Blazor 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 IgbCombo anterior, os usuários receberão apenas os dados relevantes para sua seleção no próximo componente Blazor Combobox.

    Angular Grid with Cascading Combos Sample Overview

    O exemplo abaixo demonstra como IgbGrid funciona com componentes em cascata IgbCombo 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 IgbCombo. Por favor, note que aqui, para ter apenas uma única seleção disponível, terá de utilizar a opção definir a singleSelect propriedade.

    Para começar a usar o IgbCombo, primeiro você precisa importá-lo:

    builder.Services.AddIgniteUIBlazor(
    typeof(IgbGridModule),
    typeof(IgbComboModule)
);

    Em seguida, você deve definir o modelo de coluna com o combo:

    <IgbColumn Field="Country" Header="Country" BodyTemplate="WebGridCountryDropDownTemplate"></IgbColumn>

@code{
    public static RenderFragment<IgbCellTemplateContext> WebGridCountryDropDownTemplate = (context) =>
    {
        var id = "country_" + context.Cell.Id.RowID;
        return @<IgbCombo id="@id" Placeholder="Choose Country..." SingleSelect=true ValueKey="Country" DisplayKey="Country" ChangeScript="CountryChange"></IgbCombo>;
    };
}
    • 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.

    //In Javascript
igRegisterScript("CountryChange", (ctx) => {
    const value = e.detail.newValue;
    cell.update(value);
    const nextCombo = document.getElementById("region_" + cell.id.rowID);
    const nextProgress = document.getElementById("progress_region_" + cell.id.rowID);
    if (value === "") {
        nextCombo.deselect(nextCombo.value);
        nextCombo.disabled = true;
        nextCombo.data = [];
    } else {
        nextProgress.style.display = "block";
        setTimeout(() => {
            nextProgress.style.display = "none";
            nextCombo.disabled = false;
            nextCombo.data = this.regions.filter(x => x.Country === value);
        }, 2000);
    }
});

    E, por último, adicionar o IgbLinearProgress, que é necessário ao carregar a lista de dados.

        public static RenderFragment<IgbCellTemplateContext> WebGridRegionDropDownTemplate = (context) =>
    {
        var id = "region_" + context.Cell.Id.RowID;
        return @<div style="display:flex;flex-direction:column;"><IgbCombo id="@id" Placeholder="Choose Region..." SingleSelect=true ValueKey="Region" DisplayKey="Region" ChangeScript="RegionChange"></IgbCombo><IgbLinearProgress Indeterminate=true></IgbLinearProgress></div>;
    };

    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.

    Blazor Grid API Members