syncfusion-blazor-multicolumn-combobox

Syncfusion Blazor MultiColumn ComboBox の実装

MultiColumn ComboBox コンポーネントは、フィルタリング、選択、ページング、仮想化、グループ化、カスタマイズなどの機能を標準搭載した、複数列でデータを表示するドロップダウンコントロールです。従来の ComboBox の機能と、データグリッド形式のレイアウトを組み合わせています。

このスキルを使用する場面

次のような場合に、このスキルを使用します。

• 複数の列で構造化データをドロップダウンに表示する
• 列データを対象にしたフィルタリングと検索機能を実装する
• ローカルまたはリモートのデータソース（Web API、OData）にバインドする
• 柔軟なバインドオプションで値の選択に対応する
• 大規模なデータセットにページング、仮想化、またはグループ化を追加する
• フォームで外観、スタイル、検証をカスタマイズする
• アクセシビリティに対応し、キーボードで操作できるドロップダウンを実装する
• サーバーサイドまたは Web アプリに統合する MultiColumn ComboBox コンポーネントを作成する

コンポーネントの概要

MultiColumn ComboBox には、次の機能があります。

• 複雑なデータ構造を表示する複数列のレイアウト
• 高度なフィルタリング（ローカル／リモート、大文字と小文字の区別、複数列）
• データバインディング（ローカル配列、Web API、OData、カスタムアダプター）
• 値のバインディングに対応した選択モード（単純型、タプル、複雑なオブジェクト）
• パフォーマンス機能（ページング、仮想化、オフラインモード）
• カスタマイズ（テンプレート、スタイル、外観）
• 検証とフローティングラベルに対応したフォーム連携
• WCAG 準拠とキーボード操作に対応したアクセシビリティ

---

ドキュメントのナビゲーションガイド

はじめに

📄 参照先： references/getting-started.md

• インストールとパッケージの設定
• MultiColumn ComboBox の基本的な実装
• テンプレートの構造
• 最初の MultiColumn ComboBox の作成

列とデータの表示

📄 参照先： references/columns-and-templates.md

• 列の定義と設定
• 列のテンプレートと書式設定
• 列ヘッダーとテキストの配置
• グリッドの設定（行の高さ、交互の行）

データバインディングのオプション

📄 参照先： references/data-binding.md

• ローカルデータのバインディング（配列、コレクション）
• Web API と OData のバインディング
• アクションイベント（ActionBegin、ActionComplete、ActionFailure）
• Observable コレクションと動的バインディング

フィルタリングと検索

📄 参照先： references/filtering-and-search.md

• フィルターの種類とカスタムフィルタリングロジック
• 複数列のフィルタリング手法
• 大文字と小文字を区別するフィルタリング
• リモートデータのフィルタリング

選択と値のバインディング

📄 参照先： references/selection-and-values.md

• 単一および複数の値のバインディング
• 値を選択するパターン
• カスタム値と列挙型のバインディング
• タプルと複雑なオブジェクトの操作

高度な機能と設定

📄 参照先： references/features-and-settings.md

• パフォーマンス向上のためのページングと仮想化
• 列によるデータのグループ化
• ポップアップの設定（サイズ、位置、サイズ変更）
• プレースホルダーとフローティングラベル

スタイルと外観

📄 参照先： references/styling-and-appearance.md

• CSS クラスとカスタムスタイル
• プレースホルダーとフローティングラベルのカスタマイズ
• 外観の調整（交互の行、グリッド線、テキストの折り返し）
• テーマとの統合

アクセシビリティとローカライズ

📄 参照先： references/accessibility-localization.md

• WCAG 準拠とキーボードナビゲーション
• ARIA 属性とスクリーンリーダーのサポート
• フォーム検証との統合
• 多言語アプリ向けのローカライズ

高度なパターンと統合

📄 参照先： references/advanced-patterns.md

• サーバーサイドおよび Web アプリとの統合
• カスタムデータアダプター
• 列挙型と動的オブジェクトのバインディング
• オフラインモードとパフォーマンスの最適化

クイックスタートの例

最小限の MultiColumn ComboBox の実装例を以下に示します。

@using Syncfusion.Blazor.MultiColumnComboBox

<SfMultiColumnComboBox TValue="string" TItem="OrderData" 
                       DataSource="@OrderList" 
                       TextField="CustomerName"
                       ValueField="OrderID"
                       Placeholder="Select an order">
    <MultiColumnComboboxColumns>
        <MultiColumnComboboxColumn Field="OrderID" Header="Order ID" Width="100px"></MultiColumnComboboxColumn>
        <MultiColumnComboboxColumn Field="CustomerName" Header="Customer" Width="150px"></MultiColumnComboboxColumn>
        <MultiColumnComboboxColumn Field="TotalAmount" Header="Amount" Width="100px" Format="C2"></MultiColumnComboboxColumn>
    </MultiColumnComboboxColumns>
</SfMultiColumnComboBox>

@code {
    private List<OrderData> OrderList = new();

    protected override void OnInitialized()
    {
        OrderList = new()
        {
            new OrderData { OrderID = "1001", CustomerName = "Alice Johnson", TotalAmount = 150.50m },
            new OrderData { OrderID = "1002", CustomerName = "Bob Smith", TotalAmount = 280.75m },
            new OrderData { OrderID = "1003", CustomerName = "Carol White", TotalAmount = 420.00m }
        };
    }

    public class OrderData
    {
        public string OrderID { get; set; }
        public string CustomerName { get; set; }
        public decimal TotalAmount { get; set; }
    }
}

---

よく使われるパターン

1. ユーザー入力のフィルタリング

ユーザーが検索ボックスに入力すると、ComboBox が項目をフィルタリングします。AllowFiltering プロパティを使用し、FilterType でカスタマイズします。

<SfMultiColumnComboBox TValue="string" TItem="ProductData" 
                       DataSource="@Products"
                       AllowFiltering="true"
                       FilterType="FilterType.Contains">
    <MultiColumnComboboxColumns>
        
    </MultiColumnComboboxColumns>
</SfMultiColumnComboBox>

2. リモートデータの読み込み

データアダプターとともに Query プロパティを使用して、Web API または OData サービスにバインドします。

<SfMultiColumnComboBox TValue="string" TItem="OrderData"
                       Query="@DataQuery">
    <MultiColumnComboboxColumns>
        
    </MultiColumnComboboxColumns>
</SfMultiColumnComboBox>

@code {
    private Query DataQuery = new Query().From("Orders").Select(new List<string> { "OrderID", "CustomerName" });
}

3. 選択変更の処理

ユーザーが項目を選択したときに応答するには、ValueChange イベントを使用します。

<SfMultiColumnComboBox TValue="string" TItem="OrderData"
                       ValueChange="@OnValueChange">
    <MultiColumnComboboxColumns>
        
    </MultiColumnComboboxColumns>
</SfMultiColumnComboBox>

@code {
    private void OnValueChange(ValueChangeEventArgs<string, OrderData> args)
    {
        // args.Value = selected value
        // args.ItemData = selected item object
    }
}

4. 大規模なデータセットのページング

ページングを有効にすると、表示する行数を制限し、必要に応じてさらに読み込めます。

<SfMultiColumnComboBox TValue="string" TItem="OrderData"
                       AllowPaging="true"
                       PageSize="10">
    <MultiColumnComboboxColumns>
        
    </MultiColumnComboboxColumns>
</SfMultiColumnComboBox>

5. フォームの検証

EditForm と統合して、検証や必須フィールドのチェックを行います。

<EditForm Model="@FormModel">
    <SfMultiColumnComboBox TValue="string" TItem="OrderData"
                           @bind-Value="@FormModel.SelectedOrderID"
                           DataSource="@Orders">
        <MultiColumnComboboxColumns>
            
        </MultiColumnComboboxColumns>
    </SfMultiColumnComboBox>
    
    <ValidationMessage For="@(() => FormModel.SelectedOrderID)" />
</EditForm>

---

主なプロパティ

TextField| 表示テキストのフィールドをマッピングします |TextField="Name"| |ValueField| 値のフィールドをマッピングします |ValueField="ID"` |

プロパティ	説明	例
DataSource	バインドするデータコレクション	DataSource="@Products"
TextField	表示テキストのフィールドをマッピングします	TextField="Name"
ValueField	値のフィールドをマッピングします	ValueField="ID"
Value / @bind-Value	選択された値を取得／設定します	@bind-Value="@SelectedID"
AllowFiltering	検索／フィルタリング機能を有効にします	AllowFiltering="true"
FilterType	フィルターの一致方法	FilterType="FilterType.Contains"
Placeholder	入力欄のヒントテキスト	Placeholder="Select..."
AllowPaging	ページングを有効にします	AllowPaging="true"
PageSize	1ページあたりの項目数（ページング使用時）	PageSize="10"
GroupByField	フィールドごとに項目をグループ化します	GroupByField="Category"
Query	リモートソース向けのデータクエリ	Query="@new Query().From('Orders')"
Disabled / ReadOnly	コントロールの状態	`Dis

---

よくあるユースケース

1. 注文選択フォーム - 注文 ID、顧客、金額を含むグリッド状のドロップダウンから注文を選択します
2. 従業員検索 - 複数の列を対象に、名前、メールアドレス、または ID で従業員を検索します
3. 製品カタログ - 複数列のドロップダウンに、カテゴリ、価格、在庫とともに製品を表示します
4. 場所セレクター - 国、州、タイムゾーンの情報をもとに、都市／地域を選択します
5. アカウント選択 - 番号、種類、残高を一つのドロップダウンに表示して、アカウントを選択します

---

次のステップ

まず はじめに を参照して、MultiColumn ComboBox をインストールし、最初のコンポーネントを作成します。その後、ニーズに応じて他のガイドを確認してください。各リファレンスには、完全なコード例とエッジケースが記載されています。

ご質問はありますか？ 具体的なユースケースに該当するリファレンスガイドをご確認ください。