Web Components 複数列コンボ ボックスの概要
複数列コンボ ボックスは、データ オブジェクトのプロパティ列を自動的に生成します。このコンポーネントは、ドロップダウンに埋め込まれたデータ グリッドのように大量のデータを可視化するコンボ ボックスであるという点で独特です。
使用方法
次のプロパティは、コンポーネントを構成するために一般的に最も使用されます:
DataSource
- ドロップダウン メニューに表示される複雑なオブジェクトの配列の形式でデータをバインドできます。TextField
- このプロパティをデータソースのフィールドに設定して、ユーザーが選択したときに項目の表示テキストとして表示される内容を反映します。ValueField
- このプロパティを、選択する基になるデータ項目のキーまたは一意の ID を表すデータソースのフィールドに設定します。これは、オブジェクトのリストに複数のプロパティがある場合に必要です。これは、ValueField
が指定されていない場合、データソースの最初のフィールドが使用されるためです。Fields
文字列配列プロパティは、どのフィールドが含まれ、表示されるかを決定します。配列にリストされていないすべてのフィールドは、ドロップダウンに表示されません。PlaceHolder
プロパティを使用すると、コントロールの編集部分で、何も選択されていないときにテキストを表示できます。SortMode
プロパティを使用すると、次の構成でフィールドのソートを構成できます:None
SortByOneColumnOnly
SortByOneColumnOnlyTriState
SortByMultipleColumns
SortByMultipleColumnsTriState
TriState オプションを使用すると、ソートされた列のソートを解除できます。
Web Components 複数列コンボ ボックスの例
依存関係
Chart コンポーネントをインストールするときに core パッケージもインストールする必要があります。
npm install --save igniteui-webcomponents-core npm install --save igniteui-webcomponents-inputs
モジュールの要件
複数列コンボ ボックスを作成するには、以下のモジュールが必要です。
import { IgcMultiColumnComboBoxModule } from 'igniteui-webcomponents-grids';
import { IgcMultiColumnComboBoxComponent } from 'igniteui-webcomponents-grids';
ModuleManager.register(
IgcMultiColumnComboBoxModule
);
コード スニペット
<igc-multi-column-combo-box width="400px"
data-source={countryNames}
text-field="Name">
</igc-multi-column-combo-box>