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>

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