The following example demonstrate about how to preselect the list items in multiple cascading DropDownList.
<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;
}
}
}