React 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 IgrCombo, the users will receive only the data that is relevant to their selection within the next React Combobox component.

React Grid with Cascading Combos Sample Overview

The sample below demonstrates how IgrGrid works with nested Cascading IgrCombo components.

Setup

In order enable column editing, make sure IgrColumn.editable property is set to true.

Once the column editing is enabled, you can start by adding your IgrCombo. Please note that here in order to have only one single selection available, you will need to use set the IgrCombo.singleSelect property.

To get started with the IgrCombo, first you need to import it:

import { IgrCombo } from 'igniteui-react';

Then you should define the column template with the combo:

   <IgrColumn
    field="Country"
    header="Country"
    bodyTemplate={webGridCountryDropDownTemplate}>
    </IgrColumn>

    const webGridCountryDropDownTemplate = (ctx: IgrCellTemplateContext) => {
        const rowId = ctx.cell?.id.rowID;
        if (!rowId) return <></>;
        const comboId = `country_${rowId}`;

        return (
        <>
            <IgrCombo
                data={countries}
                ref={getComboRef(comboId)}
                onChange={(event: CustomEvent) => { onCountryChange(rowId, event) }}
                placeholder="Choose Country..."
                valueKey="Country"
                displayKey="Country"
                singleSelect={true}
                name={comboId}>
            </IgrCombo>
        </>
        );
    }

• IgrCombo.displayKey - Required for object arrays - Specifies which property will be used for the items’ text. If no value is specified for IgrCombo.displayKey, the combo will use the specified IgrCombo.valueKey (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.

    const onCountryChange = (rowId: string, event: CustomEvent) => {
        const regionCombo = getComboRef(`region_${rowId}`).current;
        const cityCombo = getComboRef(`city_${rowId}`).current;
        const regions = regions;
        const newValue = event.detail.newValue[0];

        if (newValue === undefined) {
            regionCombo.deselect(regionCombo.value);
            regionCombo.disabled = true;
            regionCombo.data = [];

            cityCombo.deselect(regionCombo.value);
            cityCombo.disabled = true;
            cityCombo.data = [];
        } else {
            regionCombo.disabled = false;
            regionCombo.data = regions.filter(x => x.Country === newValue);

            cityCombo.deselect(cityCombo.value);
            cityCombo.disabled = true;
            cityCombo.data = [];
        }
    }

Known Issues and Limitations

API References