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 siguiente ejemplo demuestra cómo funciona Grid con Cascading Combos anidados.

    Setup

    Para habilitar la edición de columnas, asegúrese de que la propiedad editable esté configurada en verdadero.

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

    Para comenzar con el componente Simple ComboBox, primero debe importar IgxSimpleComboModule en su archivo app.module.ts:

    import { IgxSimpleComboModule } from 'igniteui-angular';

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

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

    • displayKey: obligatorio para matrices de objetos: especifica qué propiedad se utilizará para el texto de los elementos. Si no se especifica ningún valor para displayKey, el cuadro combinado simple utilizará la valueKey especificada (si corresponde).
    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, agregar el Progreso lineal, que se requiere al cargar la lista de datos. La id es necesaria para establecer el valor del 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