Cascading Combos (カスケード コンボ) を含む Web Components Grid
Grid の編集機能では、カスケード コンボボックス コンポーネントを使用する機会が提供されます。前の IgcComboComponent で値を選択すると、ユーザーは次の Web Components Combobox コンポーネントでの選択に関連するデータのみを受け取ります。
カスケード コンボを使用した Angular Grid サンプルの概要
以下のサンプルは、IgcGridComponent がネストされた Cascading IgcComboComponent コンポーネントとどのように動作するかを示しています。
設定
列の編集を有効にするには、editable プロパティが true に設定されていることを確認してください。
列の編集が有効になったら、IgcComboComponent を追加することから始めることができます。ここで、単一選択を 1 つだけ使用できるようにするには、singleSelect プロパティを設定する必要があることに注意してください。
IgcComboComponent を使い始めるには、まずコンボをインポートする必要があります。
import { IgcComboComponent, defineAllComponents } from 'igniteui-webcomponents';
defineAllComponents();
次に、コンボを使用して列テンプレートを定義する必要があります。
public webGridCountryDropDownTemplate: IgcRenderFunction<IgcCellTemplateContext> = (ctx: IgcCellTemplateContext) => {
const id = ctx.cell.id.rowID;
const comboId = "country_" + id;
return html`<igc-combo placeholder="Choose Country..." value-key="Country" display-key="Country" id="${comboId}" single-select></igc-combo>`
}
displayKey- オブジェクト配列に必要 - 項目のテキストに使用されるプロパティを指定します。displayKeyに値が指定されていない場合、コンボは指定されたvalueKey(存在する場合) を使用します。
選択の変更を処理するには、change イベントが必要です。発行されたイベント引数には、変更前の選択、現在の選択、追加または削除された項目に関する情報が含まれています。したがって、前のコンボの選択に基づいて値をフィルタリングします。
public countries = [...this.worldCitiesAbove500K].filter(x => this.countryNames.indexOf(x.Country) !== -1).filter((value, index, array) => array.findIndex(x => x.Country === value.Country) === index);
public bindEventsCountryCombo(rowId: any, cell: any) {
const comboId = "country_" + rowId;
var combo = document.getElementById(comboId) as IgcComboComponent<any>;
combo?.addEventListener("igcChange", (e:any) => {
const value = e.detail.newValue[0];
cell.update(value);
const nextCombo = document.getElementById("region_" + cell.id.rowID) as IgcComboComponent<any>;
const nextProgress = document.getElementById("progress_region_" + cell.id.rowID) as IgcLinearProgressComponent;
if (value === "") {
nextCombo.deselect(nextCombo.value);
nextCombo.disabled = true;
nextCombo.data = [];
} else {
nextProgress.style.display = "block";
setTimeout(() => {
nextProgress.style.display = "none";
nextCombo.disabled = false;
nextCombo.data = this.regions.filter(x => x.Country === value);
}, 2000);
}
});
combo?.addEventListener("igcOpening", (e:any) => {
var currCombo = e.target;
if (currCombo.data.length === 0) {
combo.data = this.countries;
};
});
}
最後に、データのリストを読み込むときに必要な IgcLinearProgressComponent を追加します。
id 属性の値を設定するには id が必要です。
public webGridRegionDropDownTemplate: IgcRenderFunction<IgcCellTemplateContext> = (ctx: IgcCellTemplateContext) => {
const id = ctx.cell.id.rowID;
const comboId = "region_" + id;
const progressId = "progress_region_" + id;
return html`<div style="display:flex; flex-direction: column;"><igc-combo placeholder="Choose Region..." disabled value-key="Region" display-key="Region" id="${comboId}" single-select></igc-combo>
<igc-linear-progress style="display:none;" indeterminate id="${progressId}"></<igc-linear-progress><div>`;
}
既知の問題と制限
| 制限 | 説明 |
|---|---|
| コンボ ドロップダウン リストは他の UI 要素の後ろに隠れる場合があります。 | グリッド内の要素の積み重ね順序により、コンボ ドロップダウンがヘッダーやフッターなどの他の要素の後ろに隠れる場合があります。 |