Premium

カスケードコンボを使用した Angular Grid

グリッドの編集機能は、カスケードコンボを使用する機会を提供します。前のコンボで値を選択することにより、ユーザーは次のコンボ内の選択に関連するデータのみを受け取ります。

カスケードコンボを使用した Angular Grid サンプルの概要

以下のサンプルは、Grid がネストされた Cascading Combos でどのように機能するかを示しています。

設定

列の編集を有効にするには、editable プロパティが true に設定されていることを確認してください。

列の編集が有効になったら、単一選択コンボボックスを追加します。ここで 1 つの選択のみを使用できるようにするには、igxCombo を変更する代わりに igxSimpleCombo を使用する必要があることに注意してください。

Simple ComboBox コンポーネントの使用を開始するには、最初に IgxSimpleComboModule を app.module.ts ファイルにインポートする必要があります。

import { IgxSimpleComboModule } from 'igniteui-angular/simple-combo';

@NgModule({
    imports: [
        ...
        IgxSimpleComboModule,
        ...
    ]
})
export class AppModule {}

次に、テンプレートで、igx-simple-combo をいくつかのデータにバインドする必要があります。

displayKey - オブジェクト配列に必要 - 項目のテキストに使用されるプロパティを指定します。displayKey に値が指定されていない場合、Simple ComboBox は指定された valueKey (存在する場合) を使用します。

export class MySimpleComboComponent implements OnInit {
    public countriesData: Country[];
    public selectedCountry: Country;
    public selectedCity: City;

    public ngOnInit() {
        this.countriesData = getCountries([
            'United States',
            'Japan',
            'United Kingdom'
        ]);
    }
}

選択の変更を処理するには、selectionChanging() が必要です。発行されたイベント引数 IComboSelectionChangingEventArgs には、変更前の選択、現在の選択、追加または削除された項目に関する情報が含まれています。したがって、前のコンボの選択に基づいて値をフィルタリングします。

<igx-combo [data]="countriesData" (selectionChanging)="countryChanging($event)"></igx-combo>

public countryChanging(event: IComboSelectionChangeEventArgs) {
    if (event.added.length) {
        event.newSelection = event.added;
    }
}

最後に、リニアプログレスを追加します。これは、データのリストをの読み込むときに必要です。 id は、id 属性の値を設定するために必要です。

 <igx-linear-bar 
    [id]="'region-progress-' + cell.row.data.ID" 
    [style.visibility]="'hidden'"
    type="info" [indeterminate]="true">
</igx-linear-bar>

カスケードコンボを使用した Angular Grid