Blazor 複数列コンボ ボックスの概要
複数列コンボ ボックスは、データ オブジェクトのプロパティ列を自動的に生成します。このコンポーネントは、ドロップダウンに埋め込まれたデータ グリッドのように大量のデータを可視化するコンボ ボックスであるという点で独特です。
Blazor 複数列コンボ ボックスの例
このサンプルは、ポップアップ ウィンドウの複数の列にデータを表示する IgbMultiColumnComboBox を作成する方法を示しています。
モジュールの要件
複数列コンボ ボックスを作成するには、以下のモジュールが必要です。
// in Program.cs file
builder.Services.AddIgniteUIBlazor(
typeof(IgbMultiColumnComboBoxModule));
使用方法
データ ソースのバインド
オブジェクトを複数列コンボ ボックス コンポーネントに表示するには、DataSource プロパティをバインドする必要があります。これは、複雑なオブジェクトの配列の形式としてバインドできます。以下のコードは、データ ソース プロパティをバインドする方法を示します。
<IgbMultiColumnComboBox Height="50px" Width="400px" DataSource="CountryNames" />
@code {
protected List<CountryInfo> CountryNames;
protected override void OnInitialized()
{
this.CountryNames = CountryTreeData.Create();
}
}
表示値とデータ値の設定
複数列コンボ ボックスのバインドされた DataSource のさまざまなプロパティを構成して、コントロールの表示テキストとして機能し、選択が行われたときに既定値としても機能します。コントロールの TextField と ValueField プロパティをこれらを表現したいデータ項目のプロパティ名に設定します。
コンポーネントの値をプログラムで更新する必要がある場合、ValueChanged イベントを処理する必要があります。ValueChanged イベント ハンドラー内にない場合、GetValue と GetValueAsync メソッドを使用して値を取得できます。
<IgbMultiColumnComboBox Height="50px" Width="400px"
DataSource="CountryNames"
TextField="Country"
ValueField="@(new string[]{ "ID" })" />
@code {
protected List<CountryInfo> CountryNames;
protected override void OnInitialized()
{
this.CountryNames = CountryTreeData.Create();
}
}
フィールドの設定
デフォルトで、複数列コンボ ボックスは基本データ項目のすべてのプロパティを表示しますが、これはコンポーネントの Fields プロパティを設定することで制御できます。このプロパティは表示されるプロパティを決定するために基本データ項目のプロパティ パスの string[] を取得します。
以下のコード スニペットはこれを設定する方法を示します。結果のドロップダウンは ID および Country 列のみを表示します。
<IgbMultiColumnComboBox Height="50px" Width="400px"
DataSource="CountryNames"
Fields="@(new string[] { "ID", "Country" })" />
@code {
protected List<CountryInfo> CountryNames;
protected override void OnInitialized()
{
this.CountryNames = CountryTreeData.Create();
}
}
プレースホルダー テキストの設定
複数列コンボ ボックス コンポーネントに選択がない場合にプレースホルダーとして表示するテキストを設定できます。Placeholder プロパティを表示したい文字列に設定します。以下のコードは設定する方法を示します。
<IgbMultiColumnComboBox Height="50px" Width="400px"
DataSource="CountryNames"
Placeholder="Please choose a country" />
@code {
protected List<CountryInfo> CountryNames;
protected override void OnInitialized()
{
this.CountryNames = CountryTreeData.Create();
}
}
ソート モードの設定
ユーザーは、ドロップダウンで列のヘッダーをクリックして、複数列コンボ ボックスに表示される列をソートすることができます。列は単一の列または複数の列でソートすることができ、昇順または降順に制限したり、3 ステートにしたり、ソートの構成方法も変更できます。コンポーネントの SortMode プロパティを使用して設定します。
注: TriState のソート オプションを使用すると、ソートされた列のソートを解除できます。
以下のコードは、複数列の 3 ステートでソートできるように複数列コンボ ボックスを設定する方法を示します。
<IgbMultiColumnComboBox Height="50px" Width="400px"
DataSource="CountryNames"
SortMode="SortMode.SortByMultipleColumnsTriState" />
@code {
protected List<CountryInfo> CountryNames;
protected override void OnInitialized()
{
this.CountryNames = CountryTreeData.Create();
}
}
API リファレンス
DataSourceFieldsGetValueAsyncGetValueIgbMultiColumnComboBoxPlaceholderSortModeTextFieldValueChangedValueField