Search results

Preselect value from model in Cascading DropDownList

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.

The following example, shows how to preselect value from model in cascade DropDownList.

razor
cascading.cs
State.cs
Country.cs
<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;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public class DropDownListController : Controller
    {
        State model = new State();
        public ActionResult Index()
        {
            ViewBag.state = new State().StateList();
            ViewBag.country = new Country().CountryList();
            ViewBag.popupHeight = "auto";
            model.CountryId = "2";
            model.StateId = "105";
            return View(model);
        }
    }
}
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;
        }
    }
}