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

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

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

依存関係

Chart コンポーネントをインストールするときに core パッケージもインストールする必要があります。

npm install --save igniteui-angular-core
npm install --save {PackageInputs}

モジュールの要件

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

使用方法

データソースのバインド

オブジェクトを複数列コンボボックスコンポーネントに表示するには、DataSource プロパティをバインドする必要があります。これは、複雑なオブジェクトの配列の形式としてバインドできます。以下のコードは、データソースプロパティをバインドする方法を示します。

表示値とデータ値の設定

複数列コンボボックスのバインドされた DataSource のさまざまなプロパティを構成して、コントロールの表示テキストとして機能し、選択が行われたときに既定値としても機能します。コントロールの TextField と ValueField プロパティをこれらを表現したいデータ項目のプロパティ名に設定します。

以下のコードスニペットは、基本データ項目に "Country" および "ID" プロパティがある場合、これらのプロパティを設定する方法を示しています。

フィールドの設定

デフォルトで、複数列コンボボックスは基本データ項目のすべてのプロパティを表示しますが、これはコンポーネントの Fields プロパティを設定することで制御できます。このプロパティは表示されるプロパティを決定するために基本データ項目のプロパティパスの string[] を取得します。

以下のコードスニペットはこれを設定する方法を示します。結果のドロップダウンは ID および Country 列のみを表示します。

プレースホルダーテキストの設定

複数列コンボボックスコンポーネントに選択がない場合にプレースホルダーとして表示するテキストを設定できます。Placeholder プロパティを表示したい文字列に設定します。以下のコードは設定する方法を示します。

ソートモードの設定

ユーザーは、ドロップダウンで列のヘッダーをクリックして、複数列コンボボックスに表示される列をソートすることができます。列は単一の列または複数の列でソートすることができ、昇順または降順に制限したり、3 ステートにしたり、ソートの構成方法も変更できます。コンポーネントの SortMode プロパティを使用して設定します。

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

以下のコードは、複数列の 3 ステートでソートできるように複数列コンボボックスを設定する方法を示します。

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

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