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

    El ejemplo siguiente muestra cómoGrid funciona con el anidadoCascading Combos.

    Configuración

    Para permitir la edición de columnas, asegúrate deeditable que la propiedad esté configurada como verdadera.

    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.

    Para empezar con el componente Simple ComboBox, primero necesitas importar elIgxSimpleComboModule archivo en tu app.module.ts:

    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-Requerida para arrays de objetos- Especifica qué propiedad se usará para el texto de los elementos. Si no se especifica ningún valor para displayKey, la caja combobox simple usará el especificadovalueKey (si lo hay).
    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;
    }
}

    Y por último, añadir el Progreso Lineal, que es necesario al cargar la lista de datos. Elid es necesario para establecer el valor delid atributo.

     <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