Web Components Grid with Cascading Combos
The Grid's Editing functionality provides with the opportunity to use Cascading Combobox components. By selecting the value in any preceding IgcComboComponent, the users will receive only the data that is relevant to their selection within the next Web Components Combobox component.
Angular Grid with Cascading Combos Sample Overview
The sample below demonstrates how IgcGridComponent works with nested Cascading IgcComboComponent components.
Setup
In order enable column editing, make sure editable property is set to true.
Once the column editing is enabled, you can start by adding your IgcComboComponent. Please note that here in order to have only one single selection available, you will need to use set the singleSelect property.
To get started with the IgcComboComponent, first you need to import it:
import { IgcComboComponent, defineAllComponents } from 'igniteui-webcomponents';
defineAllComponents();
Then you should define the column template with the combo:
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- Required for object arrays - Specifies which property will be used for the items' text. If no value is specified fordisplayKey, the combo will use the specifiedvalueKey(if any).
In order to handle the selection change, we need the change event. The emitted event arguments contain information about the selection prior to the change, the current selection and the items that were added or removed. Therefore, it will filter the values based on the selection of the previous combo.
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;
};
});
}
And lastly, adding the IgcLinearProgressComponent, which is required while loading the list of data.
The id is necessary to set the value of id attribute.
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>`;
}
Known Issues and Limitations
| Limitation | Description |
|---|---|
| Combo drop-down list may hide behind other UI elements. | Due to the stacking order of elements in the grid the combo drop-down may hide behind other elements like header, footers etc. |