Cuadrícula Angular con combinaciones en cascada

    La funcionalidad de edición de Grid brinda la oportunidad de utilizar combinaciones en cascada. Al seleccionar el valor en cualquier Combo anterior, los usuarios recibirán solo los datos que sean relevantes para su selección dentro del siguiente Combo.

    Angular Grid with Cascading Combos Sample Overview

    The sample below demonstrates how Grid works with nested Cascading Combos.

    Configuración

    In order enable column editing, make sure editable property is set to true.

    Una vez que la edición de columnas esté habilitada, puede comenzar agregando su cuadro combinado de selección única. Tenga en cuenta que aquí, para tener solo una selección disponible, deberá usar igxSimpleCombo en lugar de modificar igxCombo.

    To get started with the Simple ComboBox component, first you need to import the IgxSimpleComboModule in your app.module.ts file:

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

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

    Luego, en la plantilla, debes vincular los combos igx-simple-combo a algunos datos.

    • displayKey - Required for object arrays - Specifies which property will be used for the items' text. If no value is specified for displayKey, the simple combobox will use the specified valueKey (if any).
    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 manejar el cambio de selección, necesitamos selecciónChanging(). Los argumentos del evento emitido, IComboSelectionChangingEventArgs, contienen información sobre la selección anterior al cambio, la selección actual y los elementos que se agregaron o eliminaron. Por lo tanto, filtrará los valores en función de la selección del combo anterior.

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

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

    And lastly, adding the Linear Progress, which is required while loading the list of data. The id is necessary to set the value of id attribute.

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

    Resumen de API

    Recursos adicionales