React Grid con combos en cascada

    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 { IgrCombo } from 'igniteui-react';

    Luego deberías definir la plantilla de columna con el 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>
        </>
        );
    }
    • 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 onChange 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

    Limitación Descripción
    La lista desplegable combinada puede ocultarse detrás de otros elementos de la interfaz de usuario. Debido al orden de apilamiento de los elementos en la cuadrícula, el menú desplegable combinado puede ocultarse detrás de otros elementos como encabezados, pies de página, etc.

    React Grid API Members