HelpBot Assistant

How can I help you?

Configure a Cascading MultiSelect

5 Sep 202511 minutes to read

A cascading MultiSelect consists of a series of dependent components, where the selection in one MultiSelect (the parent) determines the available options in another (the child). This is useful for guiding users through hierarchical data, such as selecting a country to populate a list of states, which in turn populates a list of cities.

This behavior is configured by using the change event of the parent component. In the event handler, the logic is implemented to:

  1. Clear any previous selections in the child component and disable it
  2. Filter the data source for the child component based on the parent’s newly selected value
  3. Re-enable the child component with the updated data source
  4. Apply the changes immediately using the dataBind method

The following example demonstrates the cascade behavior of country, state, and city MultiSelect components. The dataBind method ensures that property changes are reflected immediately in the MultiSelect components, integrating seamlessly with Angular’s change detection cycle.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns'



import { Component, ViewChild } from '@angular/core';
import { MultiSelectComponent } from '@syncfusion/ej2-angular-dropdowns';
import { Query, DataManager, Predicate } from '@syncfusion/ej2-data';

@Component({
imports: [
        FormsModule, MultiSelectModule
    ],


standalone: true,
    selector: 'app-root',
    // specifies the template path for MultiSelect component
    templateUrl: `cascading.html`
})
export class AppComponent {
    constructor() {
    }
    //define the country MultiSelect data
    public countryData: { [key: string]: Object }[] = [
        { countryName: 'Australia', countryId: '2' },
        { countryName: 'United States', countryId: '1' }
    ];
    //define the state MultiSelect data
    public stateData: { [key: string]: Object }[] = [
        { stateName: 'New York', countryId: '1', stateId: '101' },
        { stateName: 'Virginia ', countryId: '1', stateId: '102' },
        { stateName: 'Tasmania ', countryId: '2', stateId: '105' }
    ];
    //define the city MultiSelect data
    public cityData: { [key: string]: Object }[] = [
        { cityName: 'Albany', stateId: '101', cityId: 201 },
        { cityName: 'Beacon ', stateId: '101', cityId: 202 },
        { cityName: 'Emporia', stateId: '102', cityId: 206 },
        { cityName: 'Hampton ', stateId: '102', cityId: 205 },
        { cityName: 'Hobart', stateId: '105', cityId: 213 },
        { cityName: 'Launceston ', stateId: '105', cityId: 214 }
    ];
    // maps the appropriate column to fields property for country MultiSelect
    public countryFields: Object = { text: 'countryName', value: 'countryId' };
    // maps the appropriate column to fields property for state MultiSelect
    public stateFields: Object = { text: 'stateName', value: 'stateId' };
    // maps the appropriate column to fields property for city MultiSelect
    public cityFields: Object = { text: 'cityName', value: 'cityId' };
    //set the placeholder to country MultiSelect input
    public countryWatermark: string = "Select countries";
    //set the placeholder to state MultiSelect input
    public stateWatermark: string = "Select states";
    //set the placeholder to city MultiSelect input
    public cityWatermark: string = "Select cities";
    @ViewChild('country')
    public countryObj?: MultiSelectComponent | any;
    @ViewChild('state')
    public stateObj?: MultiSelectComponent | any;
    @ViewChild('city')
    public cityObj?: MultiSelectComponent | any;
    public countryChange(): void {
      //Query the data source based on country MultiSelect selected value
        let pred:Predicate | any;
        if(this.countryObj.value.length != 0)
            for(var d=0;d<this.countryObj.value.length;d++){
                if(pred)
                    pred = pred.or("countryId",'equal',this.countryObj.value[d]);
                else{
                    pred=new Predicate("countryId",'equal',this.countryObj.value[d]);
                }
        }
        else{
            this.stateObj.setProperties({enabled:false,value:[]});
            this.cityObj.setProperties({enabled:false,value:[]});
            return;
        }
        // enable the state MultiSelect
        this.stateObj.setProperties({query:new Query().where(pred),enabled:true,value:[]});
        //clear the existing selection in city MultiSelect
        this.cityObj.setProperties({enabled:false,value:[]});
    }
    public stateChange(): void {
         //Query the data source based on country MultiSelect selected value
        let pred:Predicate| any,temp:any;
        if(this.stateObj.value.length != 0)
            for(var d=0;d<this.stateObj.value.length;d++){
                if(pred)
                    pred = pred.or("stateId",'equal',this.stateObj.value[d]);
                else{
                    pred=new Predicate("stateId",'equal',this.stateObj.value[d]);
                }
        }
        else{
            this.cityObj.setProperties({enabled:false,value:[]});
            return;
        }
        this.cityObj.setProperties({query:new Query().where(pred),enabled:true,value:[]});
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
<div id="wrapper" style='margin-top: 20px'>
        <div id='content' style="margin: 50px auto 0; width:250px;">
            <br>
                <ejs-multiselect #country id="country" [dataSource]="countryData" [fields]="countryFields" [changeOnBlur]= "false" (change)="countryChange()" [placeholder]="countryWatermark"></ejs-multiselect>
            <div class="padding-top">
                <ejs-multiselect #state id="state" [dataSource]="stateData" [fields]="stateFields" [changeOnBlur] = "false" (change)="stateChange()" [placeholder]="stateWatermark" [enabled]="false"></ejs-multiselect>
            </div>
            <div class="padding-top">
                <ejs-multiselect #city id="city" [dataSource]="cityData" [fields]="cityFields" [placeholder]="cityWatermark" [enabled]="false"></ejs-multiselect>
            </div>
        </div>
    </div>