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

    In order enable column editing, make sure editable property is set to 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 { IgrComboModule, IgrCombo } from 'igniteui-react';
IgrComboModule.register();

    Em seguida, você deve definir o modelo de coluna com o 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- 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 change 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.

        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

    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