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.

Angular 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 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 singleSelect property.

import { IgrComboModule, IgrCombo } from 'igniteui-react';
IgrComboModule.register();

Then you should define the column template with the combo:

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

    function webGridCountryDropDownTemplate(props: {dataContext: IgrCellTemplateContext}) => {
        var cell = props.dataContext.cell as any;
        if (cell === undefined) {
            return <></>;
        }
        const id = cell.id.rowID;
        const comboId = "country" + id;
        return (
        <>
            <IgrCombo data={countries} ref={comboRefs} change={(x: any, args: any) => {onCountryChange(id, x, args) }} placeholder="Choose Country..." valueKey="Country" displayKey="Country" singleSelect="true" name={comboId}></IgrCombo>
        </>
        );
    }

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

    function onCountryChange(rowId: string, cmp: any, args:any) {
        const regionCombo = comboRefCollection.get("region_" + rowId);
       setTimeout(() => {
            const newValue = cmp.value[0];
            if (newValue === undefined) {
                regionCombo.deselect(regionCombo.value);
                regionCombo.disabled = true;
                regionCombo.data = [];
            } else {
                regionCombo.disabled = false;
                regionCombo.data = regions.filter(x => x.Country === newValue);
            }
       });
    }

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.

React Grid API Members

• IgrGrid
• IgrCombo
• IgrLinearProgress