Grade Angular com Combos em Cascata

    A funcionalidade de edição do Grid fornece a oportunidade de usar Cascading Combos. Ao selecionar o valor em qualquer Combos anterior, os usuários receberão apenas os dados que são relevantes para sua seleção dentro do próximo Combo.

    Angular Grid with Cascading Combos Sample Overview

    O exemplo abaixo demonstra como Grid funciona com Cascading Combos aninhados.

    Setup

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

    Depois que a edição de coluna estiver habilitada, você pode começar adicionando seu Single Select ComboBox. Observe que aqui, para ter apenas uma única seleção disponível, você precisará usar igxSimpleCombo em vez de modificar o igxCombo.

    Para começar a usar o componente Simple ComboBox, primeiro você precisa importar o IgxSimpleComboModule no seu arquivo app.module.ts:

    import { IgxSimpleComboModule } from 'igniteui-angular';

@NgModule({
    imports: [
        ...
        IgxSimpleComboModule,
        ...
    ]
})
export class AppModule {}

    Então, no modelo, você deve vincular as combinações igx-simple-combo a alguns dados.

    • displayKey-Obrigatório para arrays de objetos- Especifica qual propriedade será usada para o texto dos itens. Se nenhum valor for especificado para displayKey, o combobox simples usará o valueKey especificado (se houver).
    export class MySimpleComboComponent implements OnInit {
    public countriesData: Country[];
    public selectedCountry: Country;
    public selectedCity: City;

    public ngOnInit() {
        this.countriesData = getCountries([
            'United States',
            'Japan',
            'United Kingdom'
        ]);
    }
}

    Para manipular a mudança de seleção, precisamos de selectionChanging(). Os argumentos de evento emitidos, IComboSelectionChangingEventArgs, 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.

    <igx-combo [data]="countriesData" (selectionChanging)="countryChanging($event)"></igx-combo>

    public countryChanging(event: IComboSelectionChangeEventArgs) {
    if (event.added.length) {
        event.newSelection = event.added;
    }
}

    E por último, adicionar o Linear Progress, que é necessário ao carregar a lista de dados. O id é necessário para definir o valor do atributo id.

     <igx-linear-bar 
    [id]="'region-progress-' + cell.row.data.ID" 
    [style.visibility]="'hidden'"
    type="info" [indeterminate]="true">
</igx-linear-bar>

    API Summary

    Additional Resources