React Grid con combos en cascada

    La función de edición de Grid ofrece la posibilidad de utilizar componentes de cuadro combinado en cascada. Al seleccionar el valor en cualquier IgrCombo anterior, los usuarios recibirán solo los datos que sean relevantes para su selección en el siguiente componente de cuadro combinado React.

    Descripción general de muestra de cuadrícula Angular con combinaciones en cascada

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

    EXAMPLE
    DATA
    TSX
    CSS

    ¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas completo Ignite UI for React y comienza a crear tus propias aplicaciones en minutos. Descárgalo gratis.

    Configuración

    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();
    tsx

    Luego deberías definir la plantilla de columna con el combo:

       <IgrColumn
        field="Country"
        header="Country"
        bodyTemplate={webGridCountryDropDownTemplate}
        name="column1">
        </IgrColumn>
    tsx
        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>
            </>
            );
        }
    tsx
    • 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);
                }
           });
        }
    tsx
    Ignite UI for React | CTA Banner

    Problemas conocidos y limitaciones

    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.

    Miembros de la API React Grid