How To

Configure the Cascading DropDownList

The cascading DropDownList is a series of DropDownList, where the value of one DropDownList depends upon another’s value. This can be configured by using the change event of the parent DropDownList. Within that change event handler, data has to be loaded to the child DropDownList based on the selected value of the parent DropDownList.

The following example, shows the cascade behavior of country, state, and city DropDownList. Here, the dataBind method is used to reflect the property changes immediately to the DropDownList.

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

    @Html.EJS().DropDownList("country").Placeholder("Select a country").PopupHeight("auto").Change("countrychange").DataSource((IEnumerable<Country>)ViewBag.country).Fields(new DropDownListFieldSettings { Text = "CountryName", Value = "CountryId" }).Render()

</div>
<div class="padding-top">

    @Html.EJS().DropDownList("state").Placeholder("Select a state").Enabled(false).PopupHeight("auto").Change("statechange").DataSource((IEnumerable<State>)ViewBag.state).Fields(new DropDownListFieldSettings { Text = "StateName", Value = "StateId" }).Render()

</div>
<div class="padding-top">

    @Html.EJS().DropDownList("city").Placeholder("Select a city").Enabled(false).PopupHeight("auto").DataSource((IEnumerable<Cities>)ViewBag.cities).Fields(new DropDownListFieldSettings { Text = "CityName", Value = "CityId" }).Render()
</div>
   
<script type="text/javascript">
        function countrychange() {
            // disable the state DropDownList
            var state = document.getElementById('state').ej2_instances[0];
            var city = document.getElementById('city').ej2_instances[0];
            var country = document.getElementById('country').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', country.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 city = document.getElementById('city').ej2_instances[0];
            var state = document.getElementById('state').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', state.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 IActionResult cascading()
        {
            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;
        }
    }
}

Show the list items with icons

You can render icons to the list items by mapping the iconCss  field. This iconCss field create a span in the list item with mapped class name to allow styling as per your need.

In the following sample, icon classes are mapped with iconCss field.

razor
icons.cs
SocialMedia.cs
<div id='iconList' class='col-lg-6' style='padding-top:15px'>
    <div class='content'>
        <h4> Icons</h4>

        @Html.EJS().DropDownList("icons").Placeholder("Select a social media").PopupHeight("200px").DataSource(
                   (IEnumerable<SocialMedia>)ViewBag.localdata).Fields(new DropDownListFieldSettings { Text = "SocialMediaName", IconCss = "Class", Value = "Id" }).Render()

    </div>
</div>
<link href="../Content/dropdownlist/grouping.css" rel="stylesheet" />
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 IActionResult icons()
        {
            ViewBag.icondata = new SocialMedia().SocialMediaList();
            return View();
        }
    }
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace WebApplication1.Models
{
    public class SocialMedia
    {
        public string Class { get; set; }
        public string SocialMediaName { get; set; }
        public string Id { get; set; }
        public List<SocialMedia> SocialMediaList()
        {
            List<SocialMedia> media = new List<SocialMedia>();
            media.Add(new SocialMedia{ Class= "facebook", SocialMediaName= "Facebook", Id= "media1" });
            media.Add(new SocialMedia{ Class= "google-plus", SocialMediaName= "Google Plus", Id= "media2" });
            media.Add(new SocialMedia{ Class= "instagram", SocialMediaName= "Instagram", Id= "media3" });
            media.Add(new SocialMedia{ Class= "linkedin", SocialMediaName= "LinkedIn", Id= "media4" });
            media.Add(new SocialMedia{ Class= "skype", SocialMediaName= "Skype", Id= "media5" });
            media.Add(new SocialMedia{ Class= "tumblr", SocialMediaName= "Tumblr", Id= "media6" });
            media.Add(new SocialMedia{ Class= "twitter", SocialMediaName= "Twitter", Id= "media7" });
            media.Add(new SocialMedia{ Class= "vimeo", SocialMediaName= "Vimeo", Id= "media8" });
            media.Add(new SocialMedia{ Class= "whatsapp", SocialMediaName= "WhatsApp", Id= "media9" });
            media.Add(new SocialMedia { Class = "youtube", SocialMediaName= "YouTube", Id = "media10" });
            return media;
        }
    }
}

Do incremental search in the DropDownList

DropDownList supports incremental search, by default. You can search the list item by focusing the DropDownList and typing the characters in it. The closely matched items are selected sequentially.

If the same key is searched once again, the next matched item is selected.

You can achieve this behavior by using ej2-tooltip component. When the mouse hover on the DropDownList option that tooltip display some details related to hovered list item.

razor
tooltip.cs
Countries.cs
@Html.EJS().DropDownList("country").Placeholder("Select a country").PopupHeight("200px").DataSource((IEnumerable<object>)ViewBag.localdata).Fields(new DropDownListFieldSettings { Text = "Name",Value="Code" }).Render()

<script>
    var tooltip = new ej.popups.Tooltip({
        // default content of tooltip
        content: 'Loading...',
        // set target element to tooltip
        target: '.e-list-item',
        // set position of tooltip
        position: 'top center',
        // bind beforeRender event
        beforeRender: onBeforeRender
    });
    tooltip.appendTo('body');

    function onBeforeRender(args) {
        // get the target element
        var listElement = document.getElementById('country');
        var result = listElement.ej2_instances[0].dataSource;
        var i;
        for (i = 0; i < result.length; i++) {
            if (result[i].Name === args.target.textContent) {
                this.content = result[i].Name;
                this.dataBind();
                break;
            }
        }
    }
</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 IActionResult tooltip()
        {
            ViewBag.icondata = new Countries().CountriesList();
            return View();
        }
    }
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace WebApplication1.Models
{
    public class Countries
    {
        public string Name { get; set; }
        public string Code { get; set; }
        public List<Countries> CountriesList()
        {
            List<Countries> country = new List<Countries>();
            country.Add(new Countries { Name = "Australia", Code = "AU" });
            country.Add(new Countries { Name = "Bermuda", Code = "BM" });
            country.Add(new Countries { Name = "Canada", Code = "CA" });
            country.Add(new Countries { Name = "Cameroon", Code = "CM" });
            country.Add(new Countries { Name = "Denmark", Code = "DK" });
            country.Add(new Countries { Name = "France", Code = "FR" });
            country.Add(new Countries { Name = "Finland", Code = "FI" });
            country.Add(new Countries { Name = "Germany", Code = "DE" });
            country.Add(new Countries { Name = "Greenland", Code = "GL" });
            country.Add(new Countries { Name = "Hong Kong", Code = "HK" });
            country.Add(new Countries { Name = "India", Code = "IN" });
            country.Add(new Countries { Name = "Italy", Code = "IT" });
            country.Add(new Countries { Name = "Japan", Code = "JP" });
            country.Add(new Countries { Name = "Mexico", Code = "MX" });
            country.Add(new Countries { Name = "Norway", Code = "NO" });
            country.Add(new Countries { Name = "Poland", Code = "PL" });
            country.Add(new Countries { Name = "Switzerland", Code = "CH" });
            country.Add(new Countries { Name = "United Kingdom", Code = "GB" });
            country.Add(new Countries { Name = "United States", Code = "US" });
            return country;
        }
    }
}

Close the popup on scroll

By using the hidePopup method in DropDownList, you can close the popup on scroll when triggered the windows scroll event.

The following example demonstrate about how to close the popup on scroll.

razor
closepopup.cs
@Html.EJS().DropDownList("games").Placeholder("Select a game").PopupHeight("200px").DataSource((IEnumerable<object>)ViewBag.localdata).Render()

<script>
    window.onscroll = () => {
        var dropObj = document.getElementById("games"); //to get dropdown list object 
        dropObj.ej2_instances[0].hidePopup(); // hide the popup using hidePopup method  
    }
</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 IActionResult closepopup()
        {
            ViewBag.data = new string[] { "American Football", "Badminton", "Basketball", "Cricket", "Football", "Golf", "Hockey", "Rugby", "Snooker", "Tennis" };
            return View();
        }
    }
}

Whether each list items hold unique value

yes, value for each list items should be unique.

Clear the selected item in DropDownList

You can clear the selected item in the below two different ways.

By clicking on the clear icon which is shown in DropDownList element, you can clear the selected item in DropDownList through interaction. By using showClearButton property, you can enable the clear icon in DropDownList element.

Through programmatic you can set null value to anyone of the index, text or value property to clear the selected item in DropDownList.

The following example demonstrate about how to clear the selected item in DropDownList.

razor
clearselection.cs
@Html.EJS().Button("btn").Content("Set Null value to property").Render()
@Html.EJS().DropDownList("games").Placeholder("Select a game").PopupHeight("200px").DataSource((IEnumerable<object>)ViewBag.localdata).Render()

<script>
    document.getElementById('btn').onclick = () => {
        var dropObj = document.getElementById("games"); //to get dropdown list object 
        dropObj.value = null;
    };
</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 IActionResult tooltip()
        {
            ViewBag.data = new string[] { "American Football", "Badminton", "Basketball", "Cricket", "Football", "Golf", "Hockey", "Rugby", "Snooker", "Tennis" };
            return View();
        }
    }
}

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("auto").DataSource((IEnumerable<Country>)ViewBag.country).Fields(new DropDownListFieldSettings { Text = "CountryName", Value = "CountryId" }).Render()

    @*// change="countrychange"*@

</div>
<div class="padding-top">

    @Html.EJS().DropDownList("state").Placeholder("Select a state").Enabled(false).PopupHeight("auto").DataSource((IEnumerable<State>)ViewBag.state).Fields(new DropDownListFieldSettings { Text = "StateName", Value = "StateId" }).Render()

    @*// chaknge="statechange"*@
</div>
<div class="padding-top">

    @Html.EJS().DropDownList("city").Placeholder("Select a city").Enabled(false).PopupHeight("auto").DataSource((IEnumerable<Cities>)ViewBag.cities).Fields(new DropDownListFieldSettings { Text = "CityName", Value = "CityId" }).Render()
</div>

<script type="text/javascript">
        function countrychange() {
            // disable the state DropDownList
            var state = document.getElementById('state').ej2_instances[0];
            var city = document.getElementById('city').ej2_instances[0];
            var country = document.getElementById('country').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', country.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.index = 0;
            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.index = 0;
            city.dataBind();
        }
        function statechange() {
            var city = document.getElementById('city').ej2_instances[0];
            var state = document.getElementById('state').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', state.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 IActionResult 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;
        }
    }
}

Disable the Fixed group header in DropDownList

The following example demonstrate about how to disable the Fixed group header in DropDownList through CSS by using visibility attribute.

razor
Vegetables.cs
@Html.EJS().DropDownList("Vegetable").Placeholder("Select a Vegetable").PopupHeight("200px").DataSource((IEnumerable<object>)ViewBag.localdata).Fields(new DropDownListFieldSettings { Value = "Vegetable", GroupBy = "Category" }).Render()

<style>
    .e-ddl .e-dropdownbase .e-fixed-head {
  visibility: hidden;
}
</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace WebApplication1.Models
{
    public class Vegetables
    {
        public string Vegetable { get; set; }
        public string Category { get; set; }
        public string Id { get; set; }
        public List<Vegetables> VegetablesList()
        {
        List<Vegetables> veg = new List<Vegetables>();
        veg.Add(new Vegetables { Vegetable = "Cabbage", Category= "Leafy and Salad", Id= "item1" });
        veg.Add(new Vegetables { Vegetable = "Chickpea", Category= "Beans", Id= "item2" });
        veg.Add(new Vegetables { Vegetable = "Garlic", Category= "Bulb and Stem", Id= "item3" });
        veg.Add(new Vegetables { Vegetable = "Green bean", Category= "Beans", Id= "item4" });
        veg.Add(new Vegetables { Vegetable = "Horse gram", Category= "Beans", Id= "item5" });
        veg.Add(new Vegetables { Vegetable = "Nopal", Category= "Bulb and Stem", Id= "item6" });
        veg.Add(new Vegetables { Vegetable = "Onion", Category= "Bulb and Stem", Id= "item7" });
        veg.Add(new Vegetables { Vegetable = "Pumpkins", Category= "Leafy and Salad", Id= "item8" });
        veg.Add(new Vegetables { Vegetable = "Spinach", Category= "Leafy and Salad", Id= "item9" });
        veg.Add(new Vegetables { Vegetable = "Wheat grass", Category= "Leafy and Salad", Id= "item10" });
        veg.Add(new Vegetables { Vegetable = "Yarrow", Category = "Leafy and Salad", Id = "item11" });
         return veg;
        }
    }
}

Detect whether the value change happened by manual or programmatic

You can check about whether value change happened by manual or programmatic by using change event argument that argument name is isInteracted.

The following example demonstrate, how to check whether value change happened by manual or programmatic.

razor
detectchange.cs
Employees.cs
@Html.EJS().Button("change").Content("Change the value dynamically").Render()
<div class="control-wrapper">
    <div id="default" style='padding-top:75px;'>        
@Html.EJS().DropDownList("games").Placeholder("Select a game").Change("onChange").PopupHeight("200px").DataSource((IEnumerable<object>)ViewBag.localdata).Fields(new DropDownListFieldSettings  { Text = "Game" }).Render()
   </div>
</div>
<p id='event'> </p>
<script>
    document.getElementById('change').onclick = () => {
        var dropObject = document.getElementById("employee");
        var dropDownListObject = dropObject.ej2_instances[0];
        dropDownListObject.value = 'Andrew Fuller';
    };
    function onChange(args) {
        let element = document.createElement('p');
        if (args.isInteracted) {
            element.innerText = 'Changes happened by Interaction';
        }
        else {
            element.innerText = 'Changes happened by programmatic';
        }
        document.getElementById('event').append(element);
    }
</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 IActionResult detectchange()
        {
            ViewBag.data = new Employees().EmployeesList();
            return View();
        }
    }
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace WebApplication1.Models
{
    public class Employees
    {
        public string Name { get; set; }
        public string Eimg { get; set; }
        public string Designation { get; set; }
        public string Country { get; set; }
        public List<Employees> EmployeesList()
        {
            List<Employees> emp = new List<Models.Employees>();
            emp.Add(new Employees { Name= "Andrew Fuller", Eimg= "7", Designation = "Team Lead", Country= "England"});
            emp.Add(new Employees { Name= "Anne Dodsworth", Eimg= "1", Designation = "Developer", Country= "USA"});
            emp.Add(new Employees { Name= "Janet Leverling", Eimg= "3", Designation = "HR", Country= "USA"});
            emp.Add(new Employees { Name= "Laura Callahan", Eimg= "2", Designation = "Product Manager", Country= "USA"});
            emp.Add(new Employees { Name= "Margaret Peacock", Eimg= "6", Designation = "Developer", Country= "USA"});
            emp.Add(new Employees { Name= "Michael Suyama", Eimg= "9", Designation = "Team Lead", Country= "USA"});
            emp.Add(new Employees { Name= "Nancy Davolio", Eimg= "4", Designation = "Product Manager", Country= "USA"});
            emp.Add(new Employees { Name= "Robert King", Eimg= "8", Designation = "Developer ", Country= "England"});
            emp.Add(new Employees { Name= "Steven Buchanan", Eimg= "10", Designation = "CEO", Country= "England" });
            return emp;
        }
    }
}

Add item in between in DropDownList

You can add item in between based on item index. If you add new item without item index, item will be added as last item in list.

The following example demonstrate how to add item in between in DropDownList.

razor
additem.cs
GameList.cs
@Html.EJS().Button("first").Content("add item (Hockey) in first").Render();
@Html.EJS().Button("between").Content("add item (Golf) in Between").Render();
@Html.EJS().Button("last").Content("add item (Cricket) in last").Render();
@Html.EJS().DropDownList("games").Placeholder("Select a game").PopupHeight("200px").DataSource((IEnumerable<object>)ViewBag.localdata).Fields(new DropDownListFieldSettings { Text = "Game" }).Render()

<script>

    document.getElementById('first').onclick = () => {
        var dropObject = document.getElementById("games");
        var dropDownListObject = dropObject.ej2_instances[0];
        dropDownListObject.addItem({ Id: "Hockey",Game:"Game0" }, 0);
    };
    // add item in between
    document.getElementById('between').onclick = () => {
        var dropObject = document.getElementById("games");
        var dropDownListObject = dropObject.ej2_instances[0];
        dropDownListObject.addItem({Id:"Game4", Game: "Golf" } , 2);
    };
    // add item at last
    document.getElementById('last').onclick = () => {
        var dropObject = document.getElementById("games");
        var dropDownListObject = dropObject.ej2_instances[0];
        dropDownListObject.addItem({Game:"Cricket",Id: "Game5"});
    };
</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 IActionResult additem()
        {
            ViewBag.data = new Vegetables().VegetablesList();
            return View();
        }
    }
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace WebApplication1.Models
{
    public class GameList
    {
        public string Id { get; set; }
        public string Game { get; set; }

        public List<GameList> GameLists()
        {
            List<GameList> game = new List<GameList>();
            game.Add(new GameList { Id = "Game1", Game = "American Football" });
            game.Add(new GameList { Id = "Game2", Game = "Badminton" });
            game.Add(new GameList { Id = "Game3", Game = "Basketball" });
            game.Add(new GameList { Id = "Game3", Game = "Basketball" });
            game.Add(new GameList { Id = "Game4", Game = "Cricket" });
            game.Add(new GameList { Id = "Game5", Game = "Football" });
            game.Add(new GameList { Id = "Game6", Game = "Golf" });
            game.Add(new GameList { Id = "Game7", Game = "Hockey" });
            game.Add(new GameList { Id = "Game8", Game = "Rugby" });
            game.Add(new GameList { Id = "Game9", Game = "Snooker" });
            game.Add(new GameList { Id = "Game10", Game = "Tennis" });
            return game;
        }
    }
}

Remove an item from DropDownList

The following example demonstrate about how to remove an item from DropDownList.

razor
removeitem.cs
@Html.EJS().Button("first").Content("Remove Oth Item").Render();
@Html.EJS().DropDownList("games").Placeholder("Select a game").PopupHeight("200px").DataSource((IEnumerable<object>)ViewBag.localdata).Fields(new DropDownListFieldSettings { Text = "Game" }).Render()

<script>
    document.getElementById('first').onclick = () => {
        // create DropDownList object
        let obj = document.getElementById('games');
        if (obj.ej2_instances[0].list) {
            // Remove the selected value if 0th index selected
            var dropObject = document.getElementById("games");
            var dropDownListObject = dropObject.ej2_instances[0];
            if (dropDownListObject.index === 0) {
                dropDownListObject.value = null;
                dropDownListObject.dataBind();
            }
            // remove first item in list
            (obj.ej2_instances[0].list.querySelectorAll('li')[0]).remove();
            if (!obj.ej2_instances[0].list.querySelectorAll('li')[0]) {
                dropDownListObject.dataSource = [];
                // enable the nodata template when no data source is empty.
                obj.ej2_instances[0].list.classList.add('e-nodata');
            }
        }
        else {
            // remove first item in list
            dropDownListObject.dataSource.splice(0, 1);
        }
    };
</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 IActionResult removeitem()
        {
            ViewBag.data = new Employees().EmployeesList();
            return View();
        }
    }
}

Modify the result data before passing to DropDownList when binding remote data source

When binding the remote data source, by using the actionComplete event, you can modify the result data before passing it to DropDownList.

The following sample demonstrate how to modify the result data.

razor
modifydata.cs
@Html.EJS().DropDownList("customers").Placeholder("Select a customer").PopupHeight("200px").DataSource(dataManger =>
            dataManger.Url("http://services.odata.org/V4/Northwind/Northwind.svc/").Adaptor("ODataV4Adaptor").CrossDomain(true)).Fields(new DropDownListFieldSettings
            {
                Text = "ContactName",
                Value = "CustomerID"
            }).Query((string)ViewBag.query).Render()
<script>
 function actionComplete (e) {
        // initially result contains 6 items
        console.log("Before modified the result: " + e.result.length);
        // remove first 2 items from result.
        e.result.splice(0, 2);
        // now displays the result count is 4.
        console.log("After modified the result: " + e.result.length);
    }
</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 IActionResult modifydata()
        {
            return View();
        }
    }
}

Get the total count of data when remote data bind with DropDownList

Before component rendering, you can get the total items count by using actionComplete  event with its result arguments. After rendering this component, you can get the total items count by using getItems method.

The following example demonstrate how to get the total items count.

razor
totalcount.cs
@Html.EJS().Button("btn").Content("Get Items").Render()
@Html.EJS().DropDownList("customers").Placeholder("Select a customer").PopupHeight("200px").DataSource(dataManger =>
            dataManger.Url("http://services.odata.org/V4/Northwind/Northwind.svc/").Adaptor("ODataV4Adaptor").CrossDomain(true)).Fields(new DropDownListFieldSettings
            {
                Text = "ContactName",
                Value = "CustomerID"
            }).Query((string)ViewBag.query).Render()
<script>
 function actionComplete (e) {
         // get total items count
         console.log("Total items count: " + e.result.length);
         var element = document.createElement('p');
         element.innerText = "Total items count: " + e.result.length;
         document.getElementById('event').append(element);
    }
    document.getElementById('btn').onclick = () => {
        var Obj = document.getElementById("customers").ej2_instances[0];
        // get items count using getItems method
        console.log("Total items count: " + Obj.getItems().length);
        let element = document.createElement('p');
        element.innerText = "Total items count: " + Obj.getItems().length;
        document.getElementById('event').append(element);
    };
</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 IActionResult totalcount()
        {
            return View();
        }
    }
}

Limit the search result on filtering

The following example demonstrates about how to set limit the search result on filtering.

razor
limitsearch.cs
@Html.EJS().DropDownList("customers").Placeholder("Select a customer").PopupHeight("200px").DataSource(dataManger =>
            dataManger.Url("http://services.odata.org/V4/Northwind/Northwind.svc/Customers").Adaptor("ODataV4Adaptor").CrossDomain(true)).AllowFiltering(true).Fields(new DropDownListFieldSettings
            {
                Value = "ContactName",
            }).Query((string)ViewBag.query).Render()
<script>
    function filtering(e) {
        var data = document.getElementById('customers').ej2_instances[0];
        // set limit as 4 to search result
        var query = new ej.data.Query().select(['ContactName']).take(4);
        query = (e.text !== '') ? query.where('ContactName', 'startswith', e.text, true) : query;
        e.updateData(data.dataSource, query);
    }
</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 IActionResult limitsearch()
        {           
            return View();
        }
    }
}

Highlight the matched character in filtering

By using the highlightSearch method, you can highlight the matched character in DropDownList filtering.

The following example demonstrates about how to highlight the matched character in filtering.

razor
highlight.cs
@Html.EJS().DropDownList("customers").Placeholder("Select a customer").Filtering("filtering").PopupHeight("200px").DataSource(dataManger =>
            dataManger.Url("http://services.odata.org/V4/Northwind/Northwind.svc/Customers").Adaptor("ODataV4Adaptor").CrossDomain(true)).AllowFiltering(true).Fields(new DropDownListFieldSettings
            {
                Value = "CustomerID", Text = "ContactName"
            }).Query((string)ViewBag.query).Render()
<script>
    var queryString;
    document.addEventListener('DOMContentLoaded', function () {
        var ddlObj = document.getElementById("customers")
        ddlObj.ej2_instances[0].fields = {
            text : "ContactName", value : "CustomerID", itemCreated: function (e) {
                new ej.dropdowns.highlightSearch(e.item, queryString, true, 'StartsWith');
            }
        }
    }, false);
    function filtering(e) {
        var data = document.getElementById('customers').ej2_instances[0];
        // take text for highlight the character in list items.
        queryString = e.text;
        var query = new ej.data.Query().select(['ContactName', 'CustomerID']).take(6);
        //frame the query based on search string with filter type.
        query = (e.text !== '') ? query.where('ContactName', 'startswith', e.text, true) : query;
        //pass the filter data source, filter query to updateData method.
        e.updateData(data.dataSource, query);
    }
</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 IActionResult highlight()
        {           
            return View();
        }
    }
}