Search results

Preselect the list items in multiple cascading DropDownList

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

razor
preselectcascading.cs
Cities.cs
State.cs
Country.cs
<div class="padding-top">

    @Html.EJS().DropDownList("country").Placeholder("Select a country").PopupHeight(@ViewBag.popupHeight).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().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>
<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()
</div>

<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 ej.data.Query().where('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
        state.dataBind();
        // 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
        city.dataBind();
    }
    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 ej.data.Query().where('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
        city.dataBind();

    }
</script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public class DropDownListController : Controller
    {
        public ActionResult preselectcascade()
        {
            ViewBag.state = new State().StateList();
            ViewBag.country = new Country().CountryList();
            ViewBag.cities = new Cities().CitiesList();
            ViewBag.popupHeight = "auto";
            return View();
        }
    }
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace WebApplication1.Models
{
    public class Cities
    {
        public string CityName { get; set; }
        public string StateId { get; set; }
        public int CityId { get; set; }

        public List<Cities> CitiesList()
        {
            List<Cities> cities = new List<Cities>();
            cities.Add(new Cities() { CityName = "Aberdeen", StateId = "103", CityId = 207 });
            cities.Add(new Cities() { CityName = "Alexandria", StateId = "102", CityId = 204 });
            cities.Add(new Cities() { CityName = "Albany", StateId = "101", CityId = 201 });
            cities.Add(new Cities() { CityName = "Beacon ", StateId = "101", CityId = 202 });
            cities.Add(new Cities() { CityName = "Brisbane ", StateId = "104", CityId = 211 });
            cities.Add(new Cities() { CityName = "Cairns", StateId = "104", CityId = 212 });
            cities.Add(new Cities() { CityName = "Colville ", StateId = "103", CityId = 208 });
            cities.Add(new Cities() { CityName = "Devonport", StateId = "105", CityId = 215 });
            cities.Add(new Cities() { CityName = "Emporia", StateId = "102", CityId = 206 });
            cities.Add(new Cities() { CityName = "Geelong", StateId = "106", CityId = 218 });
            cities.Add(new Cities() { CityName = "Hampton ", StateId = "102", CityId = 205 });
            cities.Add(new Cities() { CityName = "Healesville ", StateId = "106", CityId = 217 });
            cities.Add(new Cities() { CityName = "Hobart", StateId = "105", CityId = 213 });
            cities.Add(new Cities() { CityName = "Launceston ", StateId = "105", CityId = 214 });
            cities.Add(new Cities() { CityName = "Lockport", StateId = "101", CityId = 203 });
            cities.Add(new Cities() { CityName = "Melbourne", StateId = "106", CityId = 216 });
            cities.Add(new Cities() { CityName = "Pasco", StateId = "103", CityId = 209 });
            cities.Add(new Cities() { CityName = "Townsville", StateId = "104", CityId = 210 });
            return cities;
        }
    }
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace WebApplication1.Models
{
    public class State
    {
        public string StateName { get; set; }
        public string CountryId { get; set; }
        public string StateId { get; set; }
        public List<State> StateList()
        {
            List<State> state = new List<State>();
            state.Add(new State() { StateName = "New York", CountryId = "1", StateId = "101" });
            state.Add(new State() { StateName = "Queensland", CountryId = "2", StateId = "104" });
            state.Add(new State() { StateName = "Tasmania ", CountryId = "2", StateId = "105" });
            state.Add(new State() { StateName = "Victoria", CountryId = "2", StateId = "106" });
            state.Add(new State() { StateName = "Virginia ", CountryId = "1", StateId = "102" });
            state.Add(new State() { StateName = "Washington", CountryId = "1", StateId = "103" });
            return state;
        }
    }
}
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;
        }
    }
}