Cascasding Between DropDrownList and MultiSelect

[Deepak Jain]

Dear Team,

I have a requirement for cascading from DropDownList to MultiSelect, How can I achieve when User change state in DropDownList and City will Bind in MultiSelect Control.

[Berly Christopher]

Hi Deepak, 

  

Greetings from Syncfusion support. 

  

Based on the requested details, we have prepared the cascading sample by using the DropDownList and MultiSelect component. Please find the sample from the below link. 

  

Sample Link: https://stackblitz.com/edit/angular-wuzsad-3kjrah?file=app.component.ts  

  

Regards, 

Berly B.C 

[Deepak Jain]

Hi Berly,

Thanks for your response and solution. But I want Cascading from live api request 

[Sevvandhi Nagulan]

Hi Deepak, 

The DropDownList supports retrieval of data from remote data services with the help of DataManager component. We modified the sample to load the data from the live services. Please refer the below code, 

export class AppComponent { 

  public country: DataManager = new DataManager({ 

    url: "https://services.odata.org/V4/Northwind/Northwind.svc/Customers", 

    adaptor: new ODataV4Adaptor(), 

    crossDomain: true 

  }); 

  public query: Query = new Query() 

    .select(["CompanyName", "CustomerID"]) 

    .take(10); 

  public state: DataManager = new DataManager({ 

    url: "https://services.odata.org/V4/Northwind/Northwind.svc/Customers", 

    adaptor: new ODataV4Adaptor(), 

    crossDomain: true 

  }); 

  public query1: Query = new Query() 

    .select(["ContactName", "CustomerID", "Country"]) 

    .take(10) 

    .requiresCount(); 

 

  // maps the country columns to fields property 

  public countryFields: Object = { value: "CustomerID", text: "CompanyName" }; 

  // maps the state columns to fields property 

  public stateFields: Object = { value: "Country", text: "ContactName" }; 

 

  // set the placeholder to DropDownList input element 

  public countryWaterMark: string = "Select a country"; 

  public stateWaterMark: string = "Select a state"; 

  @ViewChild("countryList") 

  // country DropDownList instance 

  public countryObj: DropDownListComponent; 

  @ViewChild("stateList") 

  // state DropDownList instance 

  public stateObj: MultiSelectComponent; 

  public onChange1(): void { 

    this.stateObj.enabled = true; 

    // query the data source based on country DropDownList selected value 

    let tempQuery: Query = new Query().where( 

      "CustomerID", 

      "equal", 

      this.countryObj.value 

    ); 

    this.stateObj.query = tempQuery; 

    // clear the existing selection. 

    this.stateObj.text = null; 

    // bind the property changes to state DropDownList 

    this.stateObj.dataBind(); 

  } 

} 

Please find the modified sample below, 

Sample link: https://stackblitz.com/edit/angular-wuzsad-kbj4re?file=app.component.ts 

Please check the above sample and get back to us if you need further assistance. 

Regards, 

Sevvandhi N