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 comoGrid funciona com o aninhadoCascading Combos.

    Configuração

    Para permitir a edição de colunas, certifique-se deeditable que a propriedade 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 com o componente Simple ComboBox, primeiro você precisa importar oIgxSimpleComboModule arquivo no seu arquivo app.module.ts:

    import { IgxSimpleComboModule } from 'igniteui-angular/simple-combo';

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

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

    • displayKey-Exigido para arrays de objetos- Especifica qual propriedade será usada para o texto dos itens. Se nenhum valor for especificado para displayKey, a caixa combobox simples usará o especificadovalueKey (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 fim, adicionar o Progresso Linear, que é necessário ao carregar a lista de dados. Éid necessário para definir o valor doid atributo.

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

    Resumo da API

    Recursos adicionais