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.

Source
Preview
index.js
index.html
//define the country DropDownList data
var countryData = [
    { CountryName: 'Australia', CountryId: '2' },
    { CountryName: 'United States', CountryId: '1' }
];
//define the state DropDownList data
var stateData = [
    { StateName: 'New York', CountryId: '1', StateId: '101' },
    { StateName: 'Virginia ', CountryId: '1', StateId: '102' },
    { StateName: 'Tasmania ', CountryId: '2', StateId: '105' }
];
//define the city DropDownList data
var cityData = [
    { CityName: 'Albany', StateId: '101', CityId: 201 },
    { CityName: 'Beacon ', StateId: '101', CityId: 202 },
    { CityName: 'Emporia', StateId: '102', CityId: 206 },
    { CityName: 'Hampton ', StateId: '102', CityId: 205 },
    { CityName: 'Hobart', StateId: '105', CityId: 213 },
    { CityName: 'Launceston ', StateId: '105', CityId: 214 }
];
//initiates the country DropDownList
var countryObj = new ej.dropdowns.DropDownList({
    //set the data to dataSource property
    dataSource: countryData,
    fields: { value: 'CountryId', text: 'CountryName' },
    //bind the change event handler
    change: () => {
        //Query the data source based on country DropDownList selected value
        stateObj.query = new Query().where('CountryId', 'equal', countryObj.value);
        // enable the state DropDownList
        stateObj.enabled = true;
        //clear the existing selection.
        stateObj.text = null;
        // bind the property changes to state DropDownList
        stateObj.dataBind();
        //clear the existing selection in city DropDownList
        cityObj.text = null;
        //disabe the city DropDownList
        cityObj.enabled = false;
        //bind the property cahnges to City DropDownList
        cityObj.dataBind();
    },
    placeholder: 'Select a country',
});
//render the country DropDownList
countryObj.appendTo('#countries');
//initiates the state DropDownList
var stateObj = new ej.dropdowns.DropDownList({
    dataSource: stateData,
    fields: { value: 'StateId', text: 'StateName' },
    // set disable state by default to prevent user interact.
    enabled: false,
    change: () => {
        // Query the data source based on state DropDownList selected value
        cityObj.query = new Query().where('StateId', 'equal', stateObj.value);
        // enable the city DropDownList
        cityObj.enabled = true;
        //clear the existing selection
        cityObj.text = null;
        // bind the property change to city DropDownList
        cityObj.dataBind();
    },
    placeholder: 'Select a state',
});
//render the state DropDownList
stateObj.appendTo('#states');
//initiates the city DropDownList
var cityObj = new ej.dropdowns.DropDownList({
    dataSource: cityData,
    fields: { text: 'CityName', value: 'CityId' },
    // disable the DropDownList by default to prevent the user interact.
    enabled: false,
    placeholder: 'Select a city',
});
//render the city DropDownList
cityObj.appendTo('#cities');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 DropDownList</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="margin:50px auto 0; width:250px;">
        <br>
          <input type="text" id="countries">
        <div class="padding-top">
          <input type="text" id="states">
        </div>
        <div class="padding-top">
          <input type="text" id="cities">
        </div>    
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

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.

Source
Preview
index.js
index.html
let sortFormatData = [
    { Class: 'asc-sort', Type: 'Sort A to Z', Id: '1' },
    { Class: 'dsc-sort', Type: 'Sort Z to A ', Id: '2' },
    { Class: 'filter', Type: 'Filter', Id: '3' },
    { Class: 'clear', Type: 'Clear', Id: '4' }
];
//initiates the component
let sortFormat = new ej.dropdowns.DropDownList({
    //set the data to dataSource property
    dataSource: sortFormatData,
    // map the icon column to iconCSS field.
    fields: { value: 'Type', iconCss: 'Class' },
    // set placeholder to DropDownList input element
    placeholder: 'Find a format'
});
sortFormat.appendTo('#comboelement');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 DropDownList</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="margin:0 auto; width:250px;">
        <br>
        <input type="text" id="ddlelement">
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

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.

Source
Preview
index.js
index.html
//Initialize DropDownList component
var listObj = new ej.dropdowns.DropDownList({
    // define the array of JSON data
    dataSource: [
        { id: '1', text: 'Australia', content: 'National sports is Cricket' },
        { id: '2', text: 'Bhutan', content: 'National sports is Archery' },
        { id: '3', text: 'China', content: 'National sports is Table Tennis' },
        { id: '4', text: 'Cuba', content: 'National sports is Baseball' },
        { id: '5', text: 'India', content: 'National sports is Hockey' },
        { id: '6', text: 'Spain', content: 'National sports is Football' },
        { id: '7', text: 'United States', content: 'National sports is Baseball' }
    ],
    // map the appropriate column to fields property
    fields: { text: 'text', tooltip: 'id' },
    // set the placeholder to the DropDownList input
    placeholder: 'Select a country',
    // bind the DropDownList close event
    close: () => { tooltip.close(); }
});
listObj.appendTo('#ddltooltip');
//Initialize Tooltip component
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('ddltooltip');
    var result = listElement.ej2_instances[0].dataSource;
    var i;
    for (i = 0; i < result.length; i++) {
        if (result[i].text === args.target.textContent) {
            this.content = result[i].content;
            this.dataBind();
            break;
        }
    }
}
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 DropDownList</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="margin:0 auto; width:250px;">
        <br>
        <div id="Tooltip" class="e-prevent-select">
            <input type="text" id="ddltooltip">
        </div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

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.

Source
Preview
index.js
index.html
var sportsData = ['Badminton', 'Cricket', 'Football', 'Golf', 'Tennis'];
// initialize DropDownList component
var dropDownListObject = new ej.dropdowns.DropDownList({
    //set the data to dataSource property
    dataSource: sportsData,
    // set placeholder to DropDownList input element
    placeholder: "Select a game"
});
// render initialized DropDownList
dropDownListObject.appendTo('#ddlelement');
 
// bind the onscroll event to window
window.onscroll = () => {
    dropDownListObject.hidePopup();
};
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 DropDownList</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div style="padding: 50px">
        <h4> You can close the opened popup by scroll the page.</h4>
    </div>
    <div id="container" style="margin:0 auto; width:250px;">
        <br>
        <input type="text" id="ddlelement">
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

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.

Source
Preview
index.js
index.html
var sportsData = ['Badminton', 'Cricket', 'Football', 'Golf', 'Tennis'];
// initialize DropDownList component
var dropDownListObject = new ej.dropdowns.DropDownList({
    //set the data to dataSource property
    dataSource: sportsData,
    // set placeholder to DropDownList input element
    placeholder: "Select a game",
    //enable the clear icon
    showClearButton: true
});
// render initialized DropDownList
dropDownListObject.appendTo('#ddlelement');
 
// Set null value to value property for clear the selected item
document.getElementById('btn').onclick = () => {
    dropDownListObject.value = null;
};
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 DropDownList</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="margin:0 auto; width:250px;">
        <br>
        <input type="text" id="ddlelement">
    </div>
    <div style="padding: 50px">
      <button id="btn" class="e-control e-btn"> Set null to value property</button>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Preselect the list items in multiple cascading DropDownList

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

Source
Preview
index.js
index.html
var countryData = [
    { CountryName: 'United States', CountryId: '1' },
    { CountryName: 'Australia', CountryId: '2' }
];
//define the state DropDownList data
var stateData = [
    { StateName: 'New York', CountryId: '1', StateId: '101' },
    { StateName: 'Virginia ', CountryId: '1', StateId: '102' },
    { StateName: 'Tasmania ', CountryId: '2', StateId: '105' }
];
//define the city DropDownList data
var cityData = [
    { CityName: 'Albany', StateId: '101', CityId: 201 },
    { CityName: 'Beacon ', StateId: '101', CityId: 202 },
    { CityName: 'Hampton ', StateId: '102', CityId: 205 },
    { CityName: 'Emporia', StateId: '102', CityId: 206 },
    { CityName: 'Hobart', StateId: '105', CityId: 213 },
    { CityName: 'Launceston ', StateId: '105', CityId: 214 }
];
//initiates the country DropDownList
var countryObj = new ej.dropdowns.DropDownList({
    dataSource: countryData,
    // map the appropriate the column to fields property
    fields: { value: 'CountryId', text: 'CountryName' },
    //bind the change event handler
    change: countryChange,
    index: 1,
    // set the placeholder to the DropDownList input
    placeholder: 'Select a country',
});
//render the country DropDownList
countryObj.appendTo('#countries');
//initiates the state DropDownList
var stateObj = new ej.dropdowns.DropDownList({
    dataSource: stateData,
    // map the appropriate the column to fields property
    fields: { value: 'StateId', text: 'StateName' },
    // set disable state by default to prevent user interact.
    enabled: false,
    //bind the change event handler
    change: stateChange,
    // set the placeholder to the DropDownList input
    placeholder: 'Select a state',
});
//render the state DropDownList
stateObj.appendTo('#states');
//initiates the city DropDownList
var cityObj = new ej.dropdowns.DropDownList({
    dataSource: cityData,
    // map the appropriate the column to fields property
    fields: { text: 'CityName', value: 'CityId' },
    // disable the DropDownList by default to prevent the user interact.
    enabled: false,
    // set the placeholder to the DropDownList input
    placeholder: 'Select a city',
});
//render the city DropDownList
cityObj.appendTo('#cities');
// initally change event not triggered, so manually call the corresponding function

countryChange();
// preselect an item from filtered state DropDownList
stateObj.index = 0;
stateObj.dataBind();
// initally change event not triggered, so manually call the corresponding function
stateChange();
// preselect an item from filtered city DropDownList
cityObj.index = 0;
cityObj.dataBind();

function stateChange() {
    // Query the data source based on state DropDownList selected value
    cityObj.query = new ej.data.Query().where('StateId', 'equal', stateObj.value);
    // enable the city DropDownList
    cityObj.enabled = true;
    //clear the existing selection
    cityObj.text = null;
    // bind the property change to city DropDownList
    cityObj.dataBind();
}

function countryChange() {
    //Query the data source based on country DropDownList selected value
    stateObj.query = new ej.data.Query().where('CountryId', 'equal', countryObj.value);
    // enable the state DropDownList
    stateObj.enabled = true;
    //clear the existing selection.
    stateObj.text = null;
    // bind the property changes to state DropDownList
    stateObj.dataBind();
    //clear the existing selection in city DropDownList
    cityObj.text = null;
    //disabe the city DropDownList
    cityObj.enabled = false;
    //bind the property cahnges to City DropDownList
    cityObj.dataBind();
}
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 DropDownList</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="margin:50px auto 0; width:250px;">
        <br>
          <input type="text" id="countries">
        <div class="padding-top">
          <input type="text" id="states">
        </div>
        <div class="padding-top">
          <input type="text" id="cities">
        </div>    
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

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.

Source
Preview
index.js
index.html
var vegetableData = [
    { Vegetable: 'Cabbage', Category: 'Leafy and Salad', Id: 'item1' },
    { Vegetable: 'Spinach', Category: 'Leafy and Salad', Id: 'item2' },
    { Vegetable: 'Wheat grass', Category: 'Leafy and Salad', Id: 'item3' },
    { Vegetable: 'Yarrow', Category: 'Leafy and Salad', Id: 'item4' },
    { Vegetable: 'Pumpkins', Category: 'Leafy and Salad', Id: 'item5' },
    { Vegetable: 'Chickpea', Category: 'Beans', Id: 'item6' },
    { Vegetable: 'Green bean', Category: 'Beans', Id: 'item7' },
    { Vegetable: 'Horse gram', Category: 'Beans', Id: 'item8' },
    { Vegetable: 'Garlic', Category: 'Bulb and Stem', Id: 'item9' },
    { Vegetable: 'Nopal', Category: 'Bulb and Stem', Id: 'item10' },
    { Vegetable: 'Onion', Category: 'Bulb and Stem', Id: 'item11' }
];
//initiate the DropDownList
var vegetables = new ej.dropdowns.DropDownList({
    //set the grouped data to dataSource property
    dataSource: vegetableData,
    // map the groupBy field with Category column
    fields: { groupBy: 'Category', text: 'Vegetable', value: 'Id' },
    // set the placeholder to the DropDownList input
    placeholder: "Select a vegetable",
    // Set the popup list height
    popupHeight: '200px'
});
//render the DropDownList component
vegetables.appendTo('#ddlelement');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 DropDownList</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="margin:0 auto; width:250px;">
        <br>
        <input type="text" id="ddlelement">
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

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.

Source
Preview
index.js
index.html
var sportsData = [
    { Id: 'game1', Game: 'Badminton' },
    { Id: 'game2', Game: 'Football' },
    { Id: 'game3', Game: 'Tennis' }
];
//initiate the DropDownList
var dropDownListObject = new ej.dropdowns.DropDownList({
    // bind the sports Data to datasource property
    dataSource: sportsData,
    // maps the appropriate column to fields property
    fields: { text: 'Game', value: 'Id' },
    //set the placeholder to DropDownList input
    placeholder: "Select a game",
    // bind change event handler
    change: onChange
});
//render the component
dropDownListObject.appendTo('#ddlelement');
 
// Set value dynamically
document.getElementById('btn').onclick = () => {
    dropDownListObject.value = 'game3';
};
function onChange(args) {
    var 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);
}
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 DropDownList</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="margin:0 auto; width:250px;">
        <br>
        <input type="text" id="ddlelement">
    </div>
    <button id="btn" class="e-control e-btn"> Set value dynamically </button>
    <p id="event"> </p>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

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.

Source
Preview
index.js
index.html
var sportsData = [
    { Id: 'game1', Game: 'Badminton' },
    { Id: 'game2', Game: 'Football' },
    { Id: 'game3', Game: 'Tennis' }
];
//initiate the DropDownList
var dropDownListObject = new ej.dropdowns.DropDownList({
    // bind the sports Data to datasource property
    dataSource: sportsData,
    // maps the appropriate column to fields property
    fields: { text: 'Game', value: 'Id' },
    //set the placeholder to DropDownList input
    placeholder: "Select a game"
});
//render the component
dropDownListObject.appendTo('#ddlelement');
 
// add item at first
document.getElementById('first').onclick = () => {
    dropDownListObject.addItem({ Id: 'game0', Game: 'Hockey' }, 0);
};
// add item in between
document.getElementById('between').onclick = () => {
    dropDownListObject.addItem({ Id: 'game4', Game: 'Golf' }, 2);
};
// add item at last
document.getElementById('last').onclick = () => {
    dropDownListObject.addItem({ Id: 'game5', Game: 'Cricket' });
};
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 DropDownList</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
   <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
    
    <div id="container" style="margin:0 auto; width:250px;">
        <br>
        <input type="text" id="ddlelement">
 
    <div style="padding: 50px 0">
      <button id="first" class="e-control e-btn"> add item (Hockey) in first</button>
    </div>
    <div style="padding-left: 50px 0">
      <button id="between" class="e-control e-btn"> add item (Golf) in between</button>
    </div>
    <div style="padding: 50px 0">
      <button id="last" class="e-control e-btn"> add item (Cricket) in last</button>
    </div>
</div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Remove an item from DropDownList

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

Source
Preview
index.js
index.html
var sportsData = [
    { Id: 'game1', Game: 'Badminton' },
    { Id: 'game2', Game: 'Football' },
    { Id: 'game3', Game: 'Tennis' }
];
//initiate the DropDownList
var dropDownListObject = new ej.dropdowns.DropDownList({
    // bind the sports Data to datasource property
    dataSource: sportsData,
    // maps the appropriate column to fields property
    fields: { text: 'Game', value: 'Id' },
    //set the placeholder to DropDownList input
    placeholder: "Select a game"
});
//render the componen
dropDownListObject.appendTo('#ddlelement');
 
document.getElementById('first').onclick = () => {
    // create DropDownList object
    var obj = document.getElementById('ddlelement');
    if (obj.ej2_instances[0].list) {
        // Remove the selected value if 0th index selected
        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);
    }
};
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 DropDownList</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
    
    <div id="container" style="margin:0 auto; width:250px;">
        <br>
        <input type="text" id="ddlelement">
        <div style="padding: 50px 0">
          <button id="first" class="e-control e-btn"> Remove 0th item</button>
        </div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

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.

Source
Preview
index.js
index.html
var ddlObject = new ej.dropdowns.DropDownList({
    //bind the data manager instance to dataSource property
    dataSource: new ej.data.DataManager({
            url: 'http://services.odata.org/V4/Northwind/Northwind.svc/Customers',
            adaptor: new ej.data.ODataV4Adaptor(),
            crossDomain: true
    }),
    //bind the Query instance to query property
    query: new ej.data.Query().select(['ContactName']),
    //map the appropriate columns to fields property
    fields: { value: 'ContactName'},
    //set the placeholder to DropDownList input
    placeholder: "Find a customer",
     //sort the resulted items
    actionComplete: function (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);
    }
});

//render the component
ddlObject.appendTo('#ddlelement');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 DropDownList</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="margin:0 auto; width:250px;">
        <br>
        <input type="text" id="ddlelement">
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

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.

Source
Preview
index.js
index.html
var customers = new ej.dropdowns.DropDownList({
    //bind the data manager instance to dataSource property
    dataSource: new ej.data.DataManager({
            url: 'http://services.odata.org/V4/Northwind/Northwind.svc/Customers',
            adaptor: new ej.data.ODataV4Adaptor(),
            crossDomain: true
    }),
    //bind the Query instance to query property
    query: new ej.data.Query().select(['ContactName']).take(6),
    //map the appropriate columns to fields property
    fields: { value: 'ContactName'},
    //set the placeholder to DropDownList input
    placeholder: "Find a customer",
     //sort the resulted items
    aactionComplete: function (e) {
        // get total items count
        console.log("Total items count: " + e.result.length);
        let element = document.createElement('p');
        element.innerText = "Total items count: " + e.result.length;
        document.getElementById('event').append(element);
    }
});

//render the component
customers.appendTo('#ddlelement');

document.getElementById('btn').onclick = () => {
    // get items count using getItems method
    console.log("Total items count: " + customers.getItems().length);
    let element = document.createElement('p');
    element.innerText = "Total items count: " + customers.getItems().length;
    document.getElementById('event').append(element);
};
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 DropDownList</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="margin:0 auto; width:250px;">
        <br>
        <input type="text" id="ddlelement">
        <div style="margin: 50px">
          <button id="btn" class="e-btn e-control"> Get items</button>
        </div>
        <p id="event"> </p>
    </div>    

<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Limit the search result on filtering

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

Source
Preview
index.js
index.html
var data=new ej.data.DataManager({
            url: 'http://services.odata.org/V4/Northwind/Northwind.svc/Customers',
            adaptor: new ej.data.ODataV4Adaptor(),
            crossDomain: true
    });
var customers = new ej.dropdowns.DropDownList({
    //bind the data manager instance to dataSource property
    dataSource : data,
    //bind the Query instance to query property
    query: new ej.data.Query().select(['ContactName']).take(6),
    //map the appropriate columns to fields property
    fields: { value: 'ContactName'},
    //set the placeholder to DropDownList input
   placeholder: "Select a name",
    // sort the resulted items
    sortOrder: 'Ascending',
    // set true to allowFiltering for enable filtering supports
    allowFiltering: true,
    // bind the filtering event handler
    filtering: (e) => {
        // set limit as 4 to search result
        let query = new ej.data.Query().select(['ContactName']).take(6);
        query = (e.text !== '') ? query.where('ContactName', 'startswith', e.text, true) : query;
        e.updateData(data, query);
    }
});

//render the component
customers.appendTo('#ddlelement');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 DropDownList</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="margin:0 auto; width:250px;">
        <br>
        <input type="text" id="ddlelement">
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

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.

Source
Preview
index.js
index.html
//bind the data manager instance to dataSource property
var data=new ej.data.DataManager({
            url: 'http://services.odata.org/V4/Northwind/Northwind.svc/Customers',
            adaptor: new ej.data.ODataV4Adaptor(),
            crossDomain: true
    });
    //initiates the component
var customers = new ej.dropdowns.DropDownList({
    //bind the data manager instance to dataSource property
    dataSource : data,
    //bind the Query instance to query property
    query: new ej.data.Query().select(['ContactName']).take(6),
    //map the appropriate columns to fields property
    fields: { value: 'ContactName'},
    //set the placeholder to DropDownList input
   placeholder: "Select a name", 
    // set true to allowFiltering for enable filtering supports
     allowFiltering: true,
    //bind the filtering event handler
    filtering: (e) => {
        // take text for highlight the character in list items.
        let text = e.text;
        let query = new ej.data.Query().select(['ContactName', 'CustomerID']);
        //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, query);
        setTimeout(() => {
            let popupElement = document.getElementById('ddlelement_popup');
            // get the list from popup element
            let lists = popupElement.querySelector('ul');
            // pass the element, text, ignore case and filter type as argument to highlightSearch method.
            highlightSearch(lists, text, true, 'StartsWith');
        }, 300);
    }
});

//render the component
customers.appendTo('#ddlelement');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 DropDownList</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="margin:0 auto; width:250px;">
        <br>
        <input type="text" id="ddlelement">
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>