カスケード コンボを使用した Angular Grid
グリッドの編集機能は、カスケード コンボを使用する機会を提供します。前のコンボで値を選択することにより、ユーザーは次のコンボ内の選択に関連するデータのみを受け取ります。
カスケード コンボを使用した Angular Grid サンプルの概要
以下のサンプルは、Grid
がネストされた Cascading Combos
でどのように機能するかを示しています。
設定
列の編集を有効にするには、editable
プロパティが true に設定されていることを確認してください。
列の編集が有効になったら、単一選択コンボ ボックスを追加します。ここで 1 つの選択のみを使用できるようにするには、igxCombo を変更する代わりに igxSimpleCombo を使用する必要があることに注意してください。
Simple ComboBox コンポーネントの使用を開始するには、最初に IgxSimpleComboModule
を app.module.ts ファイルにインポートする必要があります。
import { IgxSimpleComboModule } from 'igniteui-angular';
@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>
API まとめ
- IgxSimpleComboComponent
- IgxComboComponent スタイル
- IgxLinearProgressBarComponent
- IgxLinearProgressBarComponent スタイル
その他のリソース
ページを開く:
GitHub