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.

tagHelper
cascading.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;
        // 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 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.

tagHelper
icons.cs
SocialMedia.cs
<div id='iconList' class='col-lg-6' style='padding-top:15px'>
<div class='content'>
    <h4> Icons</h4>
    <ejs-dropdownlist id="icons" dataSource="@ViewBag.icondata" placeholder="Select a social media">
        <e-dropdownlist-fields text="SocialMediaName" iconCss="Class" value="Id"></e-dropdownlist-fields>
    </ejs-dropdownlist>
</div>
        </div>
<link href="~/css/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.

tagHelper
tooltip.cs
Countries.cs
<div class="control-wrapper">
    <div id="default" style='padding-top:75px;'>
        <ejs-dropdownlist id="Countries" dataSource="@ViewBag.data" placeholder="Select a Country" index="2" popupHeight="220px">
            <e-dropdownlist-fields value="Code" text="Name"></e-dropdownlist-fields>
        </ejs-dropdownlist>
    </div>
</div>
<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('Countries');
        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.

tagHelper
closepopup.cs
<div class="control-wrapper">
    <div id="default" style='padding-top:75px;'>
        <ejs-dropdownlist id="games" dataSource="@ViewBag.data" placeholder="Select a game" index="2" popupHeight="220px">
        </ejs-dropdownlist>
    </div>
</div>

<script>
    document.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.

tagHelper
clearselection.cs
<div class="control-wrapper">
    <div id="default" style='padding-top:75px;'>
       <ejs-dropdownlist id="games" dataSource="@ViewBag.data" placeholder="Select a game" popupHeight="220px">
       </ejs-dropdownlist>
    </div>
</div>
<ej-button id="button" content="Click to Null the value"></ej-button>

<script type="text/javascript">
    document.getElementById('button').onclick = () => {
        var dropObject = document.getElementById("games");
        var dropDownListObject = dropObject.ej2_instances[0];
        dropDownListObject.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.

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 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.

tagHelper
Vegetables.cs
<div class="col-lg-12 control-section">
    <div id='groupList' class='col-lg-6' style='padding-top:15px'>
        <div class='content'>
            <ejs-dropdownlist id="vegetables" placeholder="Select a vegetable" popupHeight="200px" dataSource="@ViewBag.groupdata">
                <e-dropdownlist-fields groupBy="Category" text="Vegetable" value="Id"></e-dropdownlist-fields>
            </ejs-dropdownlist>
        </div>
    </div>
    <div id='iconList' class='col-lg-6' style='padding-top:15px'>
    </div>
</div>
<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.

tagHelper
detectchange.cs
Employees.cs
<ej-button id="change" content="Change the value dynamically"></ej-button>
<div class="control-wrapper">
    <div id="default" style='padding-top:75px;'>
        <ejs-dropdownlist id="employee" select="onSelect" change="onChange" dataSource="@ViewBag.data" placeholder="Select a employee" index="2" popupHeight="220px">
            <e-dropdownlist-fields value="Name" text="Name"></e-dropdownlist-fields>
        </ejs-dropdownlist>
    </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.

tagHelper
additem.cs
GameList.cs
<div class="control-wrapper">
    <div id="default" style='padding-top:75px;'>
        <ejs-dropdownlist id="games" dataSource="@ViewBag.data" placeholder="Select a game" index="2" popupHeight="220px">

        </ejs-dropdownlist>
    </div>
</div>
<div>
    <ej-button id="first" content="add item (Hockey) in first"></ej-button>
</div>
<div>
    <ej-button id="between" content="add item (Golf) in between"></ej-button>
</div>
<div>
    <ej-button id="last" content="add item (Cricket) in last"></ej-button>
</div>
<script>
    document.getElementById('first').onclick = () => {
        var dropObject = document.getElementById("games");
        var dropDownListObject = dropObject.ej2_instances[0];
        dropDownListObject.addItem( "Hockey", 0);
    };
    // add item in between
    document.getElementById('between').onclick = () => {
        var dropObject = document.getElementById("games");
        var dropDownListObject = dropObject.ej2_instances[0];
        dropDownListObject.addItem({ value: "Golf" } , 2);
    };
    // add item at last
    document.getElementById('last').onclick = () => {
        var dropObject = document.getElementById("games");
        var dropDownListObject = dropObject.ej2_instances[0];
        dropDownListObject.addItem("Cricket");
    };
</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.

tagHelper
removeitem.cs
<div class="control-wrapper">
    <div id="default" style='padding-top:75px;'>
        <ejs-dropdownlist id="games" dataSource="@ViewBag.data" placeholder="Select a game" index="2" popupHeight="220px">
            <e-dropdownlist-fields value="Name" text="Name"></e-dropdownlist-fields>
        </ejs-dropdownlist>
    </div>
</div>

<ej-button id="first" content="Remove Oth item"></ej-button>

<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.

tagHelper
modifydata.cs
<div class="control-wrapper">
    <div id="default" style='padding-top:75px;'>
        <ejs-dropdownlist id="customers" actionComplete="actionComplete" query="new ej.data.Query().from('Customers').select(['ContactName', 'CustomerID']).take(6)" placeholder="Select a customer" popupHeight="200px">
            <e-dropdownlist-fields text="ContactName" value="CustomerID"></e-dropdownlist-fields>
            <e-datamanager url="http://services.odata.org/V4/Northwind/Northwind.svc/" adaptor="ODataV4Adaptor" crossDomain="true"></e-datamanager>
        </ejs-dropdownlist>
    </div>
</div>
<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.

tagHelper
totalcount.cs
<ej-button id="btn" content="Get Items"></ej-button>
<div class="control-wrapper">
    <div id="default" style='padding-top:75px;'>
        <ejs-dropdownlist id="customers" actionComplete="actionComplete" query="new ej.data.Query().from('Customers').select(['ContactName', 'CustomerID']).take(6)" placeholder="Select a customer" popupHeight="200px">
            <e-dropdownlist-fields text="ContactName" value="CustomerID"></e-dropdownlist-fields>
            <e-datamanager url="http://services.odata.org/V4/Northwind/Northwind.svc/" adaptor="ODataV4Adaptor" crossDomain="true"></e-datamanager>
        </ejs-dropdownlist>
    </div>
</div>
<p id='event'> </p>
<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.

tagHelper
limitsearch.cs
<div class="control-wrapper">
    <div id="default" style='padding-top:75px;'>
        <ejs-dropdownlist id="customers" actionComplete="actionComplete" query="new ej.data.Query().from('Customers').select(['ContactName', 'CustomerID']).take(6)" allowFiltering="true" filtering="filtering" placeholder="Select a customer" popupHeight="200px">
            <e-dropdownlist-fields text="ContactName" value="CustomerID"></e-dropdownlist-fields>
            <e-datamanager url="http://services.odata.org/V4/Northwind/Northwind.svc/" adaptor="ODataV4Adaptor" crossDomain="true"></e-datamanager>
        </ejs-dropdownlist>
    </div>
</div>
<script type="text/javascript">
    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', 'CustomerID']).take(6);
        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.

tagHelper
highlight.cs
<div class="control-wrapper">
    <div id="default" style='padding-top:75px;'>
        <ejs-dropdownlist id="customers" actionComplete="actionComplete" query="new ej.data.Query().from('Customers').select(['ContactName', 'CustomerID']).take(6)" allowFiltering="true" filtering="filtering" placeholder="Select a customer" popupHeight="200px">
            <e-dropdownlist-fields text="ContactName" value="CustomerID"></e-dropdownlist-fields>
            <e-datamanager url="http://services.odata.org/V4/Northwind/Northwind.svc/" adaptor="ODataV4Adaptor" crossDomain="true"></e-datamanager>
        </ejs-dropdownlist>

    </div>
</div>
<script type="text/javascript">
    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();
        }
    }
}