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

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

使用方法

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

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

  • Fields 文字列配列プロパティは、どのフィールドが含まれ、表示されるかを決定します。配列にリストされていないすべてのフィールドは、ドロップダウンに表示されません。

  • PlaceHolder プロパティを使用すると、コントロールの編集部分で、何も選択されていないときにテキストを表示できます。
  • SortMode プロパティを使用すると、次の構成でフィールドのソートを構成できます:

    • None
    • SortByOneColumnOnly
    • SortByOneColumnOnlyTriState
    • SortByMultipleColumns
    • SortByMultipleColumnsTriState

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

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

Edit on CodeSandbox

依存関係

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>