React Grade com combos em cascata

    A funcionalidade de edição da grade oferece a oportunidade de usar componentes de caixa de combinação em cascata. Ao selecionar o valor em qualquer IgrCombo anterior, os usuários receberão apenas os dados relevantes para sua seleção no próximo componente React Combobox.

    Angular Grid with Cascading Combos Sample Overview

    O exemplo abaixo demonstra como IgrGrid funciona com componentes em cascata IgrCombo aninhados.

    Setup

    Para habilitar a edição de coluna, certifique-se de que editable a propriedade esteja definida como true.

    Depois que a edição da coluna estiver habilitada, você pode começar adicionando seu IgrCombo. Por favor, note que aqui, para ter apenas uma única seleção disponível, terá de utilizar a opção definir a singleSelect propriedade.

    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 matrizes de objetos - Especifica qual propriedade será usada para o texto dos itens. Se nenhum valor for especificado para displayKey, o combo usará o especificado valueKey (se houver).

    Para lidar com a mudança de seleção, precisamos do onChange evento. Os argumentos de evento emitidos contêm informações sobre a seleção anterior à alteração, 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