React Grade com combos em cascata

    A funcionalidade de Edição do Grid oferece a oportunidade de usar componentes Cascading Combobox. Ao selecionar o valor em qualquer dos anterioresIgrCombo, os usuários receberão apenas os dados relevantes para sua seleção dentro do próximo componente React Combobox.

    Angular Grid with Cascading Combos Sample Overview

    O exemplo abaixo demonstra comoIgrGrid funciona com componentes aninhadosIgrCombo em cascata.

    Setup

    Para permitir a edição de colunas, certifique-se deeditable que a propriedade esteja definida comotrue.

    Depois que a edição de colunas estiver ativada, você pode começar adicionando suaIgrCombo. Por favor, note que, para ter apenas uma única opção disponível, você precisará usar o set thesingleSelect property.

    import { IgrCombo } from 'igniteui-react';

    Em seguida, você deve definir o modelo de coluna com o 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- Obrigatório para arrays de objetos - Especifica qual propriedade será usada para o texto dos itens. Se nenhum valor for especificado,displayKey a combinação usará o especificadovalueKey (se houver).

    Para lidar com a mudança de seleção, precisamos doonChange evento. Os argumentos do evento emitido contêm informações sobre a seleção anterior à mudança, a seleção atual e os itens que foram adicionados ou removidos. Portanto, ele filtrará os valores com base na seleção do combo anterior.

        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

    Limitação Descrição
    A lista suspensa de combinação pode se esconder atrás de outros elementos da interface do usuário. Devido à ordem de empilhamento dos elementos na grade, o menu suspenso de combinação pode se esconder atrás de outros elementos, como cabeçalho, rodapés, etc.

    React Grid API Members