Configure the Cascading DropDownList

12 Apr 20225 minutes to read

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

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

<div class="padding-top">

    @Html.EJS().DropDownList("country").Placeholder("Select a country").PopupHeight(@ViewBag.popupHeight).Change("countrychange").DataSource((IEnumerable<Object>) Syncfusion.EJ2.DropDowns.DropDownListFieldSettings { Text = "CountryName", Value = "CountryId" }).Render()
<div class="padding-top">

    @Html.EJS().DropDownList("state").Placeholder("Select a state").Enabled(false).PopupHeight(ViewBag.popupHeight).Change("statechange").DataSource((IEnumerable<Object>)ViewBag.state).Fields(new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings { Text = "StateName", Value = "StateId" }).Render()
<div class="padding-top">

    @Html.EJS().DropDownList("city").Placeholder("Select a city").Enabled(false).PopupHeight(ViewBag.popupHeight).DataSource((IEnumerable<Object>)ViewBag.cities).Fields(new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings { Text = "CityName", Value = "CityId" }).Render()

<script type="text/javascript">
    function countrychange() {
        // disable the state DropDownList
        var countryObj = document.getElementById('country').ej2_instances[0];
        var state = document.getElementById('state').ej2_instances[0];
        var city = document.getElementById('city').ej2_instances[0];
        state.enabled = true;
        //frame the query based on selected value in country DropDownList.
        var tempQuery = new'CountryId', 'equal', countryObj.value);
        // set the framed query based on selected value in country DropDownList.
        state.query = tempQuery;
        // set null value to state DropDownList text property
        state.text = null;
        //  bind the property changes to state DropDownList
        // set null value to city DropDownList text property
        city.text = null;
        // disable the city DropDownList
        city.enabled = false;
        // bind the property changes to City DropDownList
    function statechange() {
        var stateObj = document.getElementById('state').ej2_instances[0];
        var city = document.getElementById('city').ej2_instances[0];
        city.enabled = true;
        //Query the data source based on state DropDownList selected value
        var tempQuery = new'StateId', 'equal', stateObj.value);
        //set the framed query based on selected value in city DropDownList.
        city.query = tempQuery;
        //clear the existing selection
        city.text = null;
        //bind the property change to city DropDownList

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace WebApplication1.Models
    public class Country
        public string CountryName { get; set; }
        public string CountryId { get; set; }

        public List<Country> CountryList()
            List<Country> country = new List<Country>();
            country.Add(new Country() { CountryName = "Australia", CountryId = "2" });
            country.Add(new Country() { CountryName = "United States", CountryId = "1" });
            return country;