React Grid con combos en cascada

    La funcionalidad de edición de Grid brinda la oportunidad de utilizar componentes de Cascading Combobox. Al seleccionar el valor en cualquier IgrCombo anterior, los usuarios recibirán solo los datos que sean relevantes para su selección dentro del siguiente componente React Combobox.

    Angular Grid with Cascading Combos Sample Overview

    El siguiente ejemplo demuestra cómo funciona IgrGrid con componentes anidados en cascada IgrCombo.

    Setup

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

    Una vez que la edición de columnas esté habilitada, puede comenzar agregando su IgrCombo. Tenga en cuenta que aquí para tener solo una selección disponible, deberá utilizar la propiedad singleSelect.

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

    Luego deberías definir la plantilla de columna con el 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: obligatorio para matrices de objetos: especifica qué propiedad se utilizará para el texto de los elementos. Si no se especifica ningún valor para displayKey, el combo utilizará la valueKey especificada (si corresponde).

    Para manejar el cambio de selección, necesitamos el evento change. Los argumentos del evento emitido contienen información sobre la selección anterior al cambio, la selección actual y los elementos que se agregaron o eliminaron. Por lo tanto, filtrará los valores en función de la selección del combo anterior.

        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

    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