Search results

Preselect the list items in multiple cascading DropDownList in ASP.NET Core DropDownList control

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

tagHelper
preselectcascading.cs
Cities.cs
State.cs
Country.cs
<div class="padding-top">
    <ejs-dropdownlist id="country" placeholder="Select a country" popupHeight="@ViewBag.popupHeight" dataSource="@ViewBag.country" change="countrychange">
        <e-dropdownlist-fields text="CountryName" value="CountryId"></e-dropdownlist-fields>
    </ejs-dropdownlist>

</div>
<div class="padding-top">
    <ejs-dropdownlist id="state" enabled="false" placeholder="Select a state" popupHeight="@ViewBag.popupHeight" dataSource="@ViewBag.state" change="statechange">
        <e-dropdownlist-fields text="StateName" value="StateId"></e-dropdownlist-fields>
    </ejs-dropdownlist>
</div>
<div class="padding-top">
    <ejs-dropdownlist id="city" placeholder="Select a city" enabled="false" popupHeight="@ViewBag.popupHeight" dataSource="@ViewBag.cities">
        <e-dropdownlist-fields text="CityName" value="CityId"></e-dropdownlist-fields>
    </ejs-dropdownlist>
</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;
        // preselect an item from filtered state DropDownList
        state.index = 0;
        //  bind the property changes to state DropDownList
        state.dataBind();
        // preselect an item from filtered city DropDownList
        city.index = 0;
        // 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;
        }
    }
}