Multiple cascading in EJ2 TypeScript Drop down list control

2 May 20237 minutes to read

The following example demonstrate about how to preselect the list items in multiple cascading DropDownList.

import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { Query } from '@syncfusion/ej2-data';

//define the country DropDownList data
let countryData: { [key: string]: Object }[] = [
    { CountryName: 'United States', CountryId: '1' },
    { CountryName: 'Australia', CountryId: '2' }
];
//define the state DropDownList data
let 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 DropDownList data
let cityData: { [key: string]: Object }[] = [
    { CityName: 'Albany', StateId: '101', CityId: 201 },
    { CityName: 'Beacon ', StateId: '101', CityId: 202 },
    { CityName: 'Hampton ', StateId: '102', CityId: 205 },
    { CityName: 'Emporia', StateId: '102', CityId: 206 },
    { CityName: 'Hobart', StateId: '105', CityId: 213 },
    { CityName: 'Launceston ', StateId: '105', CityId: 214 }
];
//initiates the country DropDownList
let countryObj: DropDownList = new DropDownList({
    dataSource: countryData,
    // map the appropriate the column to fields property
    fields: { value: 'CountryId', text: 'CountryName' },
    //bind the change event handler
    change: countryChange,
    index: 1,
    // set the placeholder to the DropDownList input
    placeholder: 'Select a country',
});
//render the country DropDownList
countryObj.appendTo('#countries');

//initiates the state DropDownList
let stateObj: DropDownList = new DropDownList({
    dataSource: stateData,
    // map the appropriate the column to fields property
    fields: { value: 'StateId', text: 'StateName' },
    // set disable state by default to prevent user interact.
    enabled: false,
    //bind the change event handler
    change: stateChange,
    // set the placeholder to the DropDownList input
    placeholder: 'Select a state',
});
//render the state DropDownList
stateObj.appendTo('#states');

//initiates the city DropDownList
let cityObj: DropDownList = new DropDownList({
    dataSource: cityData,
    // map the appropriate the column to fields property
    fields: { text: 'CityName', value: 'CityId' },
    // disable the DropDownList by default to prevent the user interact.
    enabled: false,
    // set the placeholder to the DropDownList input
    placeholder: 'Select a city',
});
//render the city DropDownList
cityObj.appendTo('#cities');

// initally change event not triggered, so manually call the corresponding function
countryChange();

// preselect an item from filtered state DropDownList
stateObj.index = 0;
stateObj.dataBind();

// initally change event not triggered, so manually call the corresponding function
stateChange();

// preselect an item from filtered city DropDownList
cityObj.index = 0;
cityObj.dataBind();

function stateChange(): void {
  // Query the data source based on state DropDownList selected value
  cityObj.query = new Query().where('StateId', 'equal', stateObj.value);
  // enable the city DropDownList
  cityObj.enabled = true;
  //clear the existing selection
  cityObj.text = null;
  // bind the property change to city DropDownList
  cityObj.dataBind();
}

function countryChange(): void {
  //Query the data source based on country DropDownList selected value
  stateObj.query = new Query().where('CountryId', 'equal', countryObj.value);
  // enable the state DropDownList
  stateObj.enabled = true;
  //clear the existing selection.
  stateObj.text = null;
  // bind the property changes to state DropDownList
  stateObj.dataBind();
  //clear the existing selection in city DropDownList
  cityObj.text = null;
  //disabe the city DropDownList
  cityObj.enabled = false;
  //bind the property cahnges to City DropDownList
  cityObj.dataBind();
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 DropDownList</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="styles.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container' style="margin:50px auto 0; width:250px;">
        <br>
          <input type="text" id="countries" />
        <div class="padding-top">
          <input type="text" id="states" />
        </div>
        <div class="padding-top">
          <input type="text" id="cities" />
        </div>    
    </div>
</body>

</html>