Preselect value from model in Cascading DropDownList

12 Apr 20224 minutes to read

The cascading DropDownList is a series of DropDownList, where the value of one DropDownList depends upon another’s value. Values can be preselected in these DropDownList from model. Use the dataManager to perform the filtering operation on the JSON data for cascading through create event.

<div class="padding-top">
    @Html.EJS().DropDownListFor(model => model.CountryId).Placeholder("Select a country").Width("300").PopupHeight("auto").Change("countrychange").DataSource((IEnumerable<Object>)ViewBag.country).Fields(new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings { Text = "CountryName", Value = "CountryId" }).Render()
</div>
<div class="padding-top">
    @Html.EJS().DropDownListFor(model => model.StateId).Placeholder("Select a state").Width("300").PopupHeight("auto").Created("stateCreated").DataSource((IEnumerable<object>)ViewBag.state).Fields(new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings { Text = "StateName", Value = "StateId" }).Render()
</div>
<script type="text/javascript">
    var totalData;
    function stateCreated() {
        // disable the state DropDownList
        var countryObj = document.getElementById('CountryId').ej2_instances[0];
        var state = document.getElementById('StateId').ej2_instances[0];
        totalData = state.dataSource
        //frame the query based on selected value in country DropDownList.
        var dataManager = new ej.data.DataManager(totalData);
        var tempQuery = new ej.data.Query().where('CountryId', 'equal', countryObj.value);
        // set the framed query based on selected value in country DropDownList.
        state.dataSource = tempQuery.executeLocal(dataManager);
    }
    function countrychange() {
        // disable the state DropDownList
        var countryObj = document.getElementById('CountryId').ej2_instances[0];
        var state = document.getElementById('StateId').ej2_instances[0];
        state.enabled = true;
        var dataManager = new ej.data.DataManager(totalData);
        //frame the query based on selected value in country DropDownList.
        var tempQuery = new ej.data.Query().where('CountryId', 'equal', countryObj.value);
        // set the framed query based on selected value in country DropDownList.
        state.dataSource = tempQuery.executeLocal(dataManager);
        state.dataBind();
    }
</script>
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;
        }
    }
}