Angular Grid with Cascading Combos

    The Grid's Editing functionality provides with the opportunity to use Cascading Combos. By selecting the value in any preceding Combos, the users will receive only the data that is relevant to their selection within the next Combo.

    Angular Grid with Cascading Combos Sample Overview

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

    Setup

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

    Once the column editig is enabled, you can start by adding your Single Select ComboBox. Please note that here in order to have only one single selection available, you will need to use igxSimpleCombo instead of modifying the 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';

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

    Then, in the template, you should bind the combos igx-simple-combo to some data.

    • 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'
        ]);
    }
}

    In order to handle the selection change, we need selectionChanging(). The emitted event arguments, IComboSelectionChangingEventArgs, contain information about the selection prior to the change, the current selection and the items that were added or removed. Therefore, it will filter the values based on the selection of the previous combo.

    <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>

    API Summary

    Additional Resources