Blazor 複数列コンボ ボックスの概要

複数列コンボ ボックスは、データ オブジェクトのプロパティ列を自動的に生成します。このコンポーネントは、ドロップダウンに埋め込まれたデータ グリッドのように大量のデータを可視化するコンボ ボックスであるという点で独特です。

使用方法

次のプロパティは、コンポーネントを構成するために一般的に最も使用されます:

  • DataSource - ドロップダウン メニューに表示される複雑なオブジェクトの配列の形式でデータをバインドできます。
  • TextField - このプロパティをデータソースのフィールドに設定して、ユーザーが選択したときに項目の表示テキストとして表示される内容を反映します。
  • ValueField - このプロパティを、選択する基になるデータ項目のキーまたは一意の ID を表すデータソースのフィールドに設定します。これは、オブジェクトのリストに複数のプロパティがある場合に必要です。これは、 ValueField が指定されていない場合、データソースの最初のフィールドが使用されるためです。

値を更新する必要がある場合は、 ValueChanged イベントを処理する必要があることに注意してください。ValueChanged イベントを処理しない場合、GetValue および GetValueAsync メソッドを使用して値を取得できます。

  • Fields 文字列配列プロパティは、どのフィールドが含まれ、表示されるかを決定します。配列にリストされていないすべてのフィールドは、ドロップダウンに表示されません。
  • PlaceHolder プロパティを使用すると、コントロールの編集部分で、何も選択されていないときにテキストを表示できます。

  • SortMode プロパティを使用すると、次の構成でフィールドのソートを構成できます:

    • None
    • SortByOneColumnOnly
    • SortByOneColumnOnlyTriState
    • SortByMultipleColumns
    • SortByMultipleColumnsTriState

TriState オプションを使用すると、ソートされた列のソートを解除できます。

Blazor 複数列コンボ ボックスの例

モジュールの要件

複数列コンボ ボックスを作成するには、以下のモジュールが必要です。

MultiColumnComboBoxModule.Register(IgniteUIBlazor);

コード スニペット

<MultiColumnComboBox Height="50px" Width="400px"
    DataSource="CountryNames"
    TextField="Name" />            

@code {
    protected List<CountryInfo> CountryNames;

    protected override void OnInitialized()
    {
        MultiColumnComboBoxModule.Register(IgniteUIBlazor);
        this.CountryNames = CountryTreeData.Create();            
    }
}