Search results

Configure the Cascading MultiSelect in Angular MultiSelect component

The cascading MultiSelect is a series of MultiSelect, where the value of one MultiSelect depends upon another’s value. This can be configured by using the change event of the parent MultiSelect. Within that change event handler, data has to be loaded to the child MultiSelect based on the selected value of the parent MultiSelect.

The following example, shows the cascade behavior of country, state, and city MultiSelect. Here, the dataBind method is used to reflect the property changes immediately to the MultiSelect.

Source
Preview
app.component.ts
app.module.ts
main.ts
cascading.html
import { Component, ViewChild } from '@angular/core';
import { MultiSelectComponent } from '@syncfusion/ej2-angular-dropdowns';
import { Query, DataManager, Predicate } from '@syncfusion/ej2-data';

@Component({
    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;
    @ViewChild('state')
    public stateObj: MultiSelectComponent;
    @ViewChild('city')
    public cityObj: MultiSelectComponent;
    public countrySelect(): void {
      //Query the data source based on country MultiSelect selected value
        let pred:Predicate;
        if(this.countryObj.value)
            for(var d=0;d<this.countryObj.value.length;d++){
                if(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,values:[]});
            this.cityObj.setProperties({enabled:false,values:[]});
            return;
        }
        // enable the state MultiSelect
        this.stateObj.setProperties({query:new Query().where(pred),enabled:true,values:[]});
        //clear the existing selection in city MultiSelect
        this.cityObj.setProperties({enabled:false,values:[]});
    }
    public stateSelect(): void {
         //Query the data source based on country MultiSelect selected value
        let pred:Predicate,temp:any;
        if(this.stateObj.value)
            for(var d=0;d<this.stateObj.value.length;d++){
                if(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,values:[]});
            return;
        }
        this.cityObj.setProperties({query:new Query().where(pred),enabled:true,values:[]});
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns';
/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,FormsModule, MultiSelectModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Angular MultiSelect</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Angular UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <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" (select)="countrySelect($event)" [placeholder]="countryWatermark"></ejs-multiselect>
            <div class="padding-top">
                <ejs-multiselect #state id="state" [dataSource]="stateData" [fields]="stateFields" (select)="stateSelect($event)" [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>
</body>
</html>