ejDropDownList

11 Jul 201824 minutes to read

The DropDownList control provides a list of options to choose an item from the list. It can including other HTML elements such as images, textboxes, check box, radio buttons, and so on.

Syntax

JAVASCRIPT

$(element).ejDropDownList()

Example

HTML

<input type="text" id="dropdown" />  
 <div id="carsList">
   <ul>
      <li>Audi A4</li>
      <li>Audi A5</li>
      <li>Audi A6</li>
      <li>Audi A7</li>
      <li>Audi A8</li>
   </ul>
 </div><script>
// Creates the DropDownList
$('#dropdown').ejDropDownList({targetID: "carsList"});    
</script>

HTML

// Another way to render the DropDownList control.
  <select name="selectIndex" id="dropdown">
       <option value="Art">Art</option>
       <option value="Architecture">Architecture</option>
       <option value="Biographies">Biographies</option>
       <option value="Business">Business</option>
       <option value="ComputerIT">ComputerIT</option>
       <option value="Comics">Comics</option>
       <option value="Cookery">Cookery</option>
       <option value="Environment">Environment</option>
       <option value="Fiction">Fiction</option>
       <option value="Health">Health</option>
       <option value="Humanities">Humanities</option>
       <option value="Language">Language</option>
   </select><script>
// Creates the DropDownList
$('#dropdown').ejDropDownList();  
</script>

Requires

• module:jQuery

• module:jQuery.easing.1.3.js

• module:ej.core.js

• module:ej.data.js

• module:ej.draggable.js

• module:ej.globalize.js

• module:ej.dropdownlist.js

• module:ej.checkbox.js

• module:ej.scroller.js

Members

allowVirtualScrolling boolean

The Virtual Scrolling(lazy loading) feature is used to display a large amount of data that you require without buffering the entire load of a huge database records in the DropDownList, that is, when scrolling, an AJAX request is sent to fetch some amount of data from the server dynamically. To achieve this scenario with DropDownList, set the allowVirtualScrolling to true.

Default Value

• false

Example

HTML

<input type="text" id="CompanyNames" />
    var dataManagerObj = ej.DataManager({ url: "http://mvc.syncfusion.com/services/Northwnd.svc/Customers" });
    $('#CompanyNames').ejDropDownList({
        "dataSource": dataManagerObj,
        "fields": { text: "CompanyName", value: 'ContactName' },
        "width": 260,
        "itemsCount": 10,
        "allowVirtualScrolling": true
    });

cascadeTo string

The cascading DropDownLists is a series of two or more DropDownLists in which each DropDownList is filtered according to the previous DropDownList’s value.

Default Value

• null

Example

HTML

<span>Select Group</span><input id="groupsList" type="text"/>
    <span>Select Country</span><input id="countryList" type="text"/><script>
        var groups = [
            { parentId: 'a', text: "Group A" },
            { parentId: 'b', text: "Group B" },
            { parentId: 'c', text: "Group C" },
            { parentId: 'd', text: "Group D" },
            { parentId: 'e', text: "Group E" }
        ];
       
        var countries = [
           { value: 11, parentId: 'a', text: "Algeria"},
           { value: 12, parentId: 'a', text: "Armenia"},
           { value: 13, parentId: 'a', text: "Bangladesh"},
           { value: 14, parentId: 'a', text: "Cuba"},
           { value: 15, parentId: 'b', text: "Denmark"},
           { value: 16, parentId: 'b', text: "Egypt"},
           { value: 17, parentId: 'c', text: "Finland"},
           { value: 18, parentId: 'c', text: "India"},
           { value: 19, parentId: 'c', text: "Malaysia"},
           { value: 20, parentId: 'd', text: "New Zealand"},
           { value: 21, parentId: 'd', text: "Norway"},
           { value: 22, parentId: 'd', text: "Poland"},
           { value: 23, parentId: 'e', text: "Romania"},
           { value: 24, parentId: 'e', text: "Singapore"},
           { value: 25, parentId: 'e', text: "Thailand"},
           { value: 26, parentId: 'e', text: "Ukraine"}
        ];
        //Sets the cascadeTo API value during initialization. 
        $('#groupsList').ejDropDownList(
        {
            dataSource: groups,
            fields: { value: "parentId", text: "text" },
            cascadeTo: 'countryList'
        });
        $('#countryList').ejDropDownList({
            dataSource: countries,
            fields: { value: "value", text: "text" },
            enabled: false
        });

caseSensitiveSearch boolean

Sets the case sensitivity of the search operation. It supports both enableFilterSearch and enableIncrementalSearch property.

Default Value

• false

Example

HTML

<input type="text" id="dropdown" /><div id="carsList">
    <ul>
        <li>Audi A4</li>
        <li>Audi A5</li>
        <li>Audi A6</li>
        <li>Audi A7</li>
        <li>Audi A8</li>
    </ul>
    </div>
    <script>
        // Initializes the DropDownList with the caseSensitiveSearch specified.
        $("#dropdown").ejDropDownList(
        { 
           targetID: "carsList", 
           enableFilterSearch : true, 
           caseSensitiveSearch: true 
        });

    </script>

cssClass string

Dropdown widget’s style and appearance can be controlled based on 13 different default built-in themes.
You can customize the appearance of the dropdown by using the cssClass property. You need to specify a class name in the cssClass property and the same class name is used before the class definitions wherever the custom styles are applied.

Default Value

• ””

Example

HTML

<head>
        <link href="http://cdn.syncfusion.com/28.1.33/js/web/flat-saffron/ej.web.all.min.css" rel="stylesheet" /> 
    </head>
    <input type="text" id="dropdown" />

    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>
    <script>

        //Initializes the DropDownList with the cssClass value specified.
        $("#dropdown").ejDropDownList(
        { 
            targetID: "carsList", 
            cssClass: "flat-saffron"
        });

    </script>

dataSource object

This property is used to serve data from the data services based on the query provided. To bind the data to the dropdown widget, the dataSource property is assigned with the instance of the ej.DataManager.

Default Value

• null

Example

HTML

<input type="text" id="dropdown" />

    <script>
        // DataManager creation.
        var dataManager = ej.DataManager("http://mvc.syncfusion.com/Services/Northwnd.svc/Customers");

        $('#dropdown').ejDropDownList(
        {
            dataSource: dataManager,
            fields: { text: "CustomerID" }
        }); 
    </script>

delimiterChar string

Sets the separator when the multiSelectMode with delimiter option or checkbox is enabled with the dropdown. When you enter the delimiter value, the texts after the delimiter are considered as a separate word or query. The delimiter string is a single character and must be a symbol. Mostly, the delimiter symbol is used as comma (,) or semi-colon (;) or any other special character.

Default Value

• ’,’

Example

HTML

<input type="text" id="dropdown" />

    <script>
       window.countries = [
           { text: "Algeria"}, 
           { text: "Argentina"},
           { text: "Armenia"}, 
           { text: "Brazil"},
           { text: "Bangladesh"}
        ];

        //Sets the delimiterChar value during initialization.

        $("#dropdown").ejDropDownList(
        { 
           delimiterChar: ";", 
           dataSource: window.countries, 
           multiSelectMode: "delimiter" 
        });
    </script>

enableAnimation boolean

The enabled Animation property uses the easeOutQuad animation to SlideDown and SlideUp the Popup list in 200 and 100 milliseconds, respectively.

Default Value

• false

Example

HTML

<input type="text" id="dropdown" />

    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>
    <script>
        // Initializes the enableAnimation with the value specified.
        $("#dropdown").ejDropDownList(
        { 
             targetID: "carsList", 
             enableAnimation: true 
        });

    </script>

enabled boolean

This property is used to indicate whether the DropDownList control responds to the user interaction or not. By default, the control is in the enabled mode and you can disable it by setting it to false.

Default Value

• true

Example

HTML

<input type="text" id="dropdown" />

    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>

    <script>
        // Initializes the DropDownList with the enabled value specified.
        $("#dropdown").ejDropDownList(
        { 
             targetID: "carsList", 
             enabled: false 
        });

    </script>

enableIncrementalSearch boolean

Specifies to perform incremental search for the selection of items from the DropDownList with the help of this property. This helps in selecting the item by using the typed character.

Default Value

• true

Example

HTML

<input type="text" id="dropdown" /> 
    enableFilterSearch 
    <div id="carsList">
    <ul>
        <li>Audi A4</li>
        <li>Audi A5</li>
        <li>Audi A6</li>
        <li>Audi A7</li>
        <li>Audi A8</li>
    </ul>
    </div>enableFilterSearch 
    <script>          
        // Initializes the enableIncrementalSearch with the value specified.
        $("#dropdown").ejDropDownList({targetID: "carsList",enableIncrementalSearch: true });
    </script>

enableFilterSearch boolean

This property selects the item in the DropDownList when the item is entered in the Search textbox.

Default Value

• false

Example

HTML

<input type="text" id="dropdown" />

    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>
    <script>
        // Initializes the enableFilterSearch with the value specified.
        $("#dropdown").ejDropDownList(
        { 
             targetID: "carsList", 
             enableFilterSearch: true 
         });

    </script>

enableServerFiltering boolean

The serverfiltering is to perform filter action when text is typed in the search box and filtering will be done based on the collection which contains the matched item from entire datasource. Serverfiltering will be done based on the entire items in DataSource.

Default Value

• false

Example

HTML

<input type="text" id="CompanyNames" />
    var dataManagerObj = ej.DataManager({ url: "http://js.syncfusion.com/ejServices/Wcf/Northwind.svc/" });
    $('#CompanyNames').ejDropDownList({
        "dataSource": dataManagerObj,
        "fields": { text: "CompanyName", value: 'ContactName' },
        "width": 260,
        "itemsCount": 10,
        "enableFilterSearch": true,
        "enableServerFiltering": true
    });

enablePersistence boolean

Saves the current model value to the browser cookies for state maintenance. While refreshing the DropDownList control page, it retains the model value and it is applied from the browser cookies.

Default Value

• false

Example

HTML

<input type="text" id="dropdown" />

    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>

    <script>

        // Initializes the DropDownList with the enablePersistence value specified.
        $("#dropdown").ejDropDownList(
        { 
            targetID: "carsList", 
            enablePersistence: true 
        });

    </script>

enablePopupResize boolean

This enables the resize handler to resize the popup to any size.

Default Value

• false

Example

HTML

<select name="selectIndex" id="dropdown">
        <option value="Art">Art</option>
        <option value="Architecture">Architecture</option>
        <option value="Biographies">Biographies</option>
        <option value="Business">Business</option>
        <option value="ComputerIT">Computer IT</option>
        <option value="Comics">Comics</option>
        <option value="Cookery">Cookery</option>
        <option value="Environment">Environment</option>
        <option value="Fiction">Fiction</option>
        <option value="Health">Health</option>
        <option value="Humanities">Humanities</option>
        <option value="Language">Language</option>
    </select>
    <script>
        // Creates DropDownList.
        $('#dropdown').ejDropDownList(
        { 
            enablePopupResize: true 
        });
    </script>

enableRTL boolean

Sets the DropDownList textbox direction from right to left align.

Default Value

• false

Example

HTML

<input type="text" id="dropdown" />
    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>
    <script>
        // Initializes the DropDownList with the enableRTL value specified.
        $("#dropdown").ejDropDownList(
        { 
            targetID: "carsList", 
            enableRTL: true 
        });

    </script>

enableSorting boolean

This property is used to sort the Items in the DropDownList. By default, it sorts the items in an ascending order.

Default Value

• false

Example

HTML

<input id="dropdown" type="text" /><div id="list">
      <ul>
            <li id="Art">Art</li>
            <li id="Architecture">Architecture</li>
            <li id="Biographies">Biographies</li>
            <li id="ComputerIT">Computer IT</li>
            <li id="Comics">Comics</li>
            <li id="Cookery">Cookery</li>
            <li id="Fiction">Fiction</li>
            <li id="Health">Health</li>
            <li id="Humanities">Humanities</li>
            <li id="Environment">Environment</li>
            <li id="Language">Language</li>
            <li id="Business">Business</li>
      </ul>
    </div>
    <script>
        // Creates the DropDownList.
        $('#dropdown').ejDropDownList(
        { 
            targetID: "list", 
            text: "Computer IT", 
            enableSorting : true, 
            sortOrder : "ascending"  
        });
        
    </script>

loadOnDemand boolean

The property is used to determine whether the popup list is generated dynamically.

Default Value

• false

Example

HTML

<input id="dropdown" type="text" /><div id="list">
      <ul>
            <li id="Art">Art</li>
            <li id="Architecture">Architecture</li>
            <li id="Biographies">Biographies</li>
            <li id="ComputerIT">Computer IT</li>
            <li id="Comics">Comics</li>
            <li id="Cookery">Cookery</li>
            <li id="Fiction">Fiction</li>
            <li id="Health">Health</li>
            <li id="Humanities">Humanities</li>
            <li id="Environment">Environment</li>
            <li id="Language">Language</li>
            <li id="Business">Business</li>
      </ul>
    </div>
    <script>
        // Creates the DropDownList.
        $('#dropdown').ejDropDownList(
        { 
            targetID: "list",  
            loadOnDemand : true,   
        });
        
    </script>

fields object

Specifies the mapping fields for the data items of the DropDownList.

Default Value

• null

Example

HTML

<input type="text" id="dropdown" /><script>
        window.countries = [
           { text: "Algeria", flag: "flag-dz" }, 
           { text: "Argentina", flag: "flag-ar" },
           { text: "Armenia", flag: "flag-am" }, 
           { text: "Brazil", flag: "flag-br" },
           { text: "Bangladesh", flag: "flag-bangladesh" }
        ];
        //Sets fields with API value during initialization.  
        $("#dropdown").ejDropDownList(
        { 
             dataSource: window.countries, 
             fields: { text: "text", value: "flag" } 
        }); 

    </script>

fields.groupBy string

Used to group the items.

fields.htmlAttributes object

Defines the HTML attributes such as ID, class, and styles for the item.

fields.id string

Defines the ID for the tag.

fields.imageAttributes string

Defines the image attributes such as height, width, styles, and so on.

fields.imageUrl string

Defines the imageURL for the image location.

fields.selected boolean

Defines the tag value to be selected initially.

fields.spriteCssClass string

Defines the sprite CSS for the image tag.

fields.tableName string

Defines the table name for tag value or display text while rendering remote data.

fields.text string

Defines the text content for the tag.

fields.value string

Defines the tag value.

filterType enum

When the enableFilterSearch property value is set to true, the values in the DropDownList shows the items starting with or containing the key word/letter typed in the Search textbox.

Name	Description
contains	filter the data wherever contains search key
startsWith	filter the data based on search key present at start position

Default Value

• ej.FilterType.Contains

Example

HTML

<input id="dropdown" type="text" /><div id="list">
      <ul>
        <li id="Art">Art</li>
        <li id="Architecture">Architecture</li>
        <li id="Biographies">Biographies</li>
        <li id="Business">Business</li>
        <li id="ComputerIT">Computer IT</li>
        <li id="Comics">Comics</li>
        <li id="Cookery">Cookery</li>
        <li id="Environment">Environment</li>
        <li id="Fiction">Fiction</li>
        <li id="Health">Health</li>
        <li id="Humanities">Humanities</li>
        <li id="Language">Language</li>
      </ul>
    </div><script>
        // Creates the DropDownList.
        $('#dropdown').ejDropDownList(
        { 
             targetID: "list", 
             text: "Computer IT", 
             enableFilterSearch : true, 
             filterType: ej.FilterType.Contains 
         });
        
    </script>

Example

HTML

<input id="dropdown" type="text" /><div id="list">
      <ul>
        <li id="Art">Art</li>
        <li id="Architecture">Architecture</li>
        <li id="Biographies">Biographies</li>
        <li id="Business">Business</li>
        <li id="ComputerIT">Computer IT</li>
        <li id="Comics">Comics</li>
        <li id="Cookery">Cookery</li>
        <li id="Environment">Environment</li>
        <li id="Fiction">Fiction</li>
        <li id="Health">Health</li>
        <li id="Humanities">Humanities</li>
        <li id="Language">Language</li>
      </ul>
    </div><script>
        // Creates DropDownList.
        $('#dropdown').ejDropDownList(
        { 
             targetID: "list", 
             text: "Computer IT", 
             enableFilterSearch : true, 
             filterType: ej.FilterType.StartsWith
        });        
    </script>

headerTemplate string

Used to create visualized header for dropdown items

Default Value

• null

Example

HTML

// Sets the headerTemplate API value during initialization  .   
    <input type="text" id="dropdown" />
    <script>
        window.countries = [
             { text: "Argentina", flag: "flag-ar" },
             { text: "Armenia", flag: "flag-am" }, 
             { text: "Brazil", flag: "flag-br" },
             { text: "Bangladesh", flag: "flag-bangladesh" },
             { text: "Canada", flag: "flag-ca" }
        ];
        $("#dropdown").ejDropDownList( 
        {
            dataSource: window.countries, 
            template: '<div class="flag ${flag}"> </div>' + '<div class="txt"> ${text} </div>', width: "200px"
            headerTemplate: "<div class='header'><span class='flag-head'>Flag</span> <span class='con-head'>Countries</span> </div>"
        });
    </script>
    <style type="text/css">
        /* Sprite CSS for country flags and get the images from JS samples location */
        .flag {
            background: url("images/autocomplete/flags.png") no-repeat;
            float: left;
            height: 15px;
            margin-right: 10px;
            margin-top: 3px;
            width: 25px;
        }
        .header {
            text-align:center;
            font-weight:600;
            height:30px;
            vertical-align:middle;	
            border-bottom:1px solid #c8c8c8;
        }
        .flag-head{
            float: left;
            margin-left: 12px;
            margin-top: 5px;
        }
        .con-head{
            float: right;
            margin-right: 89px;
            margin-top: 5px;
        }
        .flag.flag-am {background-position: -25px 0;}
        .flag.flag-ar {background-position: -50px 0;}
        .flag.flag-bangladesh {background-position: -75px 0;}
        .flag.flag-br {background-position: -100px 0;}
        .flag.flag-ca {background-position: -125px 0;}
    </style>

height string|number

Defines the height of the DropDownList textbox.

Default Value

• null

Example

HTML

<input type="text" id="dropdown" /><div id="carsList">
    <ul>
        <li>Audi A4</li>
        <li>Audi A5</li>
        <li>Audi A6</li>
        <li>Audi A7</li>
        <li>Audi A8</li>
    </ul>
    </div>
    <script>
        //Initializes the DropDownList height property with the value specified.
        $("#dropdown").ejDropDownList(
        { 
            targetID: "carsList", 
            height: 100 
        });
    </script>

htmlAttributes object

It sets the given HTML attributes for the DropDownList control such as ID, name, disabled, etc.

Default Value

• null

Example

HTML

<input type="text" id="dropdown" />
    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>

    <script>
        //Initializes the DropDownList height property with the value specified.
        $("#dropdown").ejDropDownList(
        { 
             targetID: "carsList", 
             htmlAttributes : { disabled: "disabled"}
        }); 

    </script>

itemsCount number

Data can be fetched in the DropDownList control by using the DataSource, specifying the number of items.

Default Value

• 5

Example

HTML

<input type="text" id="dropdown" />
    <script>

        window.countries = [
             { text: "Argentina", flag: "flag-ar" },
             { text: "Armenia", flag: "flag-am" }, 
             { text: "Brazil", flag: "flag-br" },
             { text: "Bangladesh", flag: "flag-bangladesh" },
             { text: "Canada", flag: "flag-ca" }
        ];

        $("#dropdown").ejDropDownList( 
        {
            dataSource: window.countries, 
            itemsCount : 2
        });

    </script>

locale string

Allows the user to set the particular country or region language for the DropDownList.

Default Value

• “en-US”

Example

HTML

<input type="text" id="company" />

    $(function () {
        var data = ej.DataManager({ url: "http://mvc.syncfusion.com/services/Northwnd.svc/Customers" });
        $('#company').ejDropDownList({
            dataSource: data,
            fields: { text: "CompanyName", value: 'ContactName' },
            width: 260,
            showCheckbox: true,
            locale: "de-DE",
            enableFilterSearch: true,
            enablePopupResize: true

        });
    });

maxPopupHeight string|number

Defines the maximum height of the suggestion box. This property restricts the maximum height of the popup when resize is enabled.

Default Value

• null

Example

HTML

<input type="text" id="dropdown" />
    <script>
        var dataManagerObj = ej.DataManager({ url:   "http://mvc.syncfusion.com/services/Northwnd.svc/Orders" })

        var query = ej.Query().select("ShipName", "ShipCountry");

        // Creates DropDownList.
        $('#dropdown').ejDropDownList(
        { 
           dataSource: dataManagerObj, 
           query: query, 
           fields: { text: "ShipName", groupBy: "ShipCountry" }, 
           itemsCount : 20,
           maxPopupHeight: "200px", 
           enablePopupResize: true 
        });

    </script>

minPopupHeight string|number

Defines the minimum height of the suggestion box. This property restricts the minimum height of the popup when resize is enabled.

Default Value

• null

Example

HTML

<input type="text" id="dropdown" />
    <script>

        var dataManagerObj = ej.DataManager({ url: "http://mvc.syncfusion.com/services/Northwnd.svc/Orders" })

        var query = ej.Query().select("ShipName", "ShipCountry");

        // Creates DropDownList.
        $('#dropdown').ejDropDownList(
        { 
           dataSource: dataManagerObj, 
           query: query, 
           fields: { text: "ShipName", groupBy: "ShipCountry" },  
           itemsCount : 20,  
           minPopupHeight: "150px", 
           enablePopupResize: true 
        });

    </script>

maxPopupWidth string|number

Defines the maximum width of the suggestion box. This property restricts the maximum width of the popup when resize is enabled.

Default Value

• null

Example

HTML

<input type="text" id="dropdown" />
    <script>

        var dataManagerObj = ej.DataManager({ url: "http://mvc.syncfusion.com/services/Northwnd.svc/Orders" })

        var query = ej.Query().select("ShipName", "ShipCountry");

        // Creates DropDownList.
        $('#dropdown').ejDropDownList(
        { 
            dataSource: dataManagerObj, 
            query: query, 
            fields: { text: "ShipName", groupBy: "ShipCountry" },  
            itemsCount : 20,                                        
            maxPopupWidth: "200px", 
            enablePopupResize: true 
        }); 

    </script>

minPopupWidth string|number

Defines the minimum height of the suggestion box. This property restricts the minimum height of the popup when resize is enabled.

Default Value

• 0

Example

HTML

<input type="text" id="dropdown" />
    <script>

        var dataManagerObj = ej.DataManager({ url: "http://mvc.syncfusion.com/services/Northwnd.svc/Orders" })

        var query = ej.Query().select("ShipName", "ShipCountry");

        // Creates DropDownList.
        $('#dropdown').ejDropDownList(
        { 
            dataSource: dataManagerObj, 
            query: query, 
            fields: { text: "ShipName", groupBy: "ShipCountry" },
            itemsCount : 20,
            minPopupWidth: "150px", 
            enablePopupResize: true 
        });

    </script>

multiSelectMode enum

With the help of this property, you can make a single or multi selection with the DropDownList and display the text in two modes, delimiter and visual mode. In delimiter mode, you can separate the items by using the delimiter character such as comma (,) or semi-colon (;) or any other special character. In the visual mode, the items are showcased like boxes with close icon in the textbox.

Name	Description
none	can select only single item in DropDownList
delimiter	can select multiple items and it's separated by delimiterChar
visualMode	can select multiple items and it's show's like visual box in textbox

Default Value

• ej.MultiSelectMode.None

Example

HTML

<input type="text" id="dropdown" />
    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>
    <script>
        // Creates the DropDownList.        
        $("#dropdown").ejDropDownList(
        { 
             targetID: "carsList",  
             multiSelectMode: ej.MultiSelectMode.Delimiter 
        });
    </script>

Example

HTML

<input type="text" id="dropdown" />

    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>

    <script>
        // Creates the DropDownList.
        $("#dropdown").ejDropDownList(
        { 
           targetID: "carsList",  
           multiSelectMode: ej.MultiSelectMode.VisualMode 
         });

    </script>

popupHeight string|number

Defines the height of the suggestion popup box in the DropDownList control.

Default Value

• “152px”

Example

HTML

<input type="text" id="dropdown" />

    <script>

        var dataManagerObj = ej.DataManager({ url: "http://mvc.syncfusion.com/services/Northwnd.svc/Orders" })

        var query = ej.Query().select("ShipName", "ShipCountry");

        // Creates DropDownList.
        $('#dropdown').ejDropDownList(
        { 
            dataSource: dataManagerObj, 
            query: query, 
            fields: { text: "ShipName", groupBy: "ShipCountry" },   
            itemsCount : 20,
            popupHeight: "190px" 
        });

    </script>

popupWidth string|number

Defines the width of the suggestion popup box in the DropDownList control.

Default Value

• “auto”

Example

HTML

<input type="text" id="dropdown" />

    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>

    <script>
        //Initializes the DropDownList popupWidth property with the value specified.
        $("#dropdown").ejDropDownList(
        { 
           targetID: "carsList", 
           popupWidth: 200 
        });

    </script>

query object

Specifies the query to retrieve the data from the DataSource.

Default Value

• null

Example

HTML

<input type="text" id="dropdown" />

    <script>

        var dataManagerObj = ej.DataManager({ url: "http://mvc.syncfusion.com/services/Northwnd.svc/Orders" })

        var query = ej.Query().select("ShipName", "ShipCountry");

        // Creates DropDownList.
        $('#dropdown').ejDropDownList(
        { 
           dataSource: dataManagerObj, 
           query: query, 
           fields: { text: "ShipName", groupBy: "ShipCountry" },    
           itemsCount: 20
         });

    </script>

readOnly boolean

Specifies that the DropDownList textbox values should be read-only.

Default Value

• false

Example

HTML

<input type="text" id="dropdown" />

    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>

    <script>
        // Initializes the DropDownList with the readOnly value specified.
        $("#dropdown").ejDropDownList(
        { 
           targetID: "carsList", 
           text : "Audi A5",
           readOnly: true 
        });

    </script>

selectedIndex number

Specifies an item to be selected in the DropDownList.

Default Value

• null

Example

HTML

<input type="text" id="dropdown" />

    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>

    <script>
        // Sets the selectedItems API value during initialization.    
        $("#dropdown").ejDropDownList(
        { 
            targetID: "carsList",            
            selectedIndex: 1
        });

    </script>

selectedIndices array

Specifies the selectedItems for the DropDownList.

Default Value

• []

Example

HTML

<input type="text" id="dropdown" />

    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>

    <script>
        // Sets the selectedItems API value during initialization.    
        $("#dropdown").ejDropDownList(
        { 
            targetID: "carsList", 
            showCheckbox: true, 
            selectedIndices: [1, 2] 
        });

    </script>

showCheckbox boolean

Selects multiple items in the DropDownList with the help of the checkbox control. To achieve this, enable the showCheckbox option to true.

Default Value

• false

Example

HTML

<input type="text" id="dropdown" />

    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>

    <script>
        // Initializes the DropDownList with the showCheckbox value specified.
        $("#dropdown").ejDropDownList(
        { 
           targetID: "carsList", 
           showCheckbox: true 
        });

    </script>

showPopupOnLoad boolean

DropDownList control is displayed with the popup seen.

Default Value

• false

Example

HTML

<input type="text" id="dropdown" />

    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
        </ul>
    </div>

    <script>
        // Initializes the DropDownList with the showPopupOnLoad value specified.
        $("#dropdown").ejDropDownList(
        { 
           targetID: "carsList", 
           showPopupOnLoad: true 
        });

    </script>

showRoundedCorner boolean

DropDownList textbox displayed with the rounded corner style.

Default Value

• false

Example

HTML

<input type="text" id="dropdown" />

    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>

    <script>
        // Initializes the DropDownList with the showRoundedCorner value specified.
        $("#dropdown").ejDropDownList(
        { 
           targetID: "carsList", 
           showRoundedCorner: true 
        });

    </script>

sortOrder enum

When the enableSorting property value is set to true, this property helps to sort the items either in ascending or descending order

Name	Description
Ascending	Sort the data in ascending order
Descending	Sort the data in descending order

Default Value

• ej.SortOrder.Ascending

Example

HTML

<input id="dropdown" type="text" /><div id="list">
      <ul>
        <li id="Art">Art</li>
        <li id="Architecture">Architecture</li>
        <li id="Biographies">Biographies</li>
        <li id="ComputerIT">Computer IT</li>
        <li id="Comics">Comics</li>
        <li id="Cookery">Cookery</li>
        <li id="Fiction">Fiction</li>
        <li id="Health">Health</li>
        <li id="Humanities">Humanities</li>
        <li id="Environment">Environment</li>
        <li id="Language">Language</li>
        <li id="Business">Business</li>
      </ul>
    </div>
    <script>
        // Creates the DropDownList.
        $('#dropdown').ejDropDownList(
        { 
            targetID: "list", 
            text: "Computer IT", 
            enableSorting : true, 
            sortOrder : ej.sortOrder.Descending  
        });
        
    </script>

targetID string

Specifies the targetID for the DropDownList’s items.

Default Value

• null

Example

HTML

<input type="text" id="dropdown" /><div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>
    <script>
        // Initializes the DropDownList with the targetID value specified.
        $("#dropdown").ejDropDownList(
        { 
          targetID: "carsList"
        });

    </script>

template string

By default, you can add any text or image to the DropDownList item. To customize the item layout or to create your own visualized elements, you can use this template support.

Default Value

• null

Example

HTML

// Sets the template API value during initialization  .   
    <input type="text" id="dropdown" />
    <script>
        window.countries = [
             { text: "Argentina", flag: "flag-ar" },
             { text: "Armenia", flag: "flag-am" }, 
             { text: "Brazil", flag: "flag-br" },
             { text: "Bangladesh", flag: "flag-bangladesh" },
             { text: "Canada", flag: "flag-ca" }
        ];
        $("#dropdown").ejDropDownList( 
        {
            dataSource: window.countries, 
            template: '<div class="flag ${flag}"> </div>' + '<div class="txt"> ${text} </div>', width: "200px"
        });
    </script>
    <style type="text/css">
        /* Sprite CSS for country flags and get the images from JS samples location */
        .flag {
            background: url("images/autocomplete/flags.png") no-repeat;
            float: left;
            height: 15px;
            margin-right: 10px;
            margin-top: 3px;
            width: 25px;
        }
        .flag.flag-am {background-position: -25px 0;}
        .flag.flag-ar {background-position: -50px 0;}
        .flag.flag-bangladesh {background-position: -75px 0;}
        .flag.flag-br {background-position: -100px 0;}
        .flag.flag-ca {background-position: -125px 0;}
    </style>

text string

Defines the text value that is displayed in the DropDownList textbox.

For the single selection mode, the selected item’s text will be returned in its data type. In case of MultiSelectMode, returns the selected item’s texts and separated by delimiterChar in string type.

Default Value

• null

Example

HTML

<input type="text" id="dropdown" />

    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>
    <script>
        // Initializes the DropDownList with the text specified.
        var DropDownListObj = $('#dropdown').ejDropDownList(
                              {
                                  targetID: "carsList",
                                  text : "Audi A7"

                              }).data("ejDropDownList");

        console.log("Selected Item's Text - " + DropDownListObj.option("text"));
 
    </script>

validationMessage object

Sets the jQuery validation error message in the DropDownList

Default Value

• null

Example

HTML

<input type="text" id="dropdown" name="dropdown" />
    <script>

        var dataManagerObj = ej.DataManager({ url: "http://mvc.syncfusion.com/services/Northwnd.svc/Orders" })

        var query = ej.Query().select("ShipName", "ShipCountry");

        // Creates DropDownList.

        $('#dropdown').ejDropDownList(
        {
            dataSource: dataManagerObj, 
            query: query, 
            fields: { text: "ShipName", groupBy: "ShipCountry" }, 
            itemsCount: 20,
            validationRules: {
                required: true
            },
            validationMessage: {
                required: "Required Dropdown value"
            }
        });

    </script>

validationRules object

Sets the jQuery validation rules in the Dropdownlist.

Default Value

• null

Example

HTML

<input type="text" id="dropdown" name="dropdown" />

    <script>

        var dataManagerObj = ej.DataManager({ url: "http://mvc.syncfusion.com/services/Northwnd.svc/Orders" })

        var query = ej.Query().select("ShipName", "ShipCountry");
        // Creates DropDownList.

        $('#dropdown').ejDropDownList(
        {
            dataSource: dataManagerObj, 
            query: query, 
            fields: { text: "ShipName", groupBy: "ShipCountry" }, 
            itemsCount: 20,
            validationRules: {
                required: true
            },
            validationMessage: {
                required: "Required Dropdown value"
            }
        });
    </script>

value string|number

Specifies the value (text content) for the DropDownList control.

For the single selection mode, the selected item’s value will be returned in its data type. In case of MultiSelectMode, returns the selected item’s values and separated by delimiterChar in string type.

Default Value

• null

Example

HTML

<input type="text" id="dropdown" />

    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>

    <script>
        //Initializes the DropDownList value property with the value specified.
        var DropDownListObj = $('#dropdown').ejDropDownList(
                              {
                                  targetID: "carsList",
                                  value: "Audi A7"

                              }).data("ejDropDownList");

        console.log("Selected Item's Value - " + DropDownListObj.option("value")); 

    </script>

watermarkText string

Specifies a short hint that describes the expected value of the DropDownList control.

Default Value

• null

Example

HTML

<input type="text" id="dropdown" />
    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>

    <script>
       //Initializes the DropDownList with the watermarkText value specified.
        $("#dropdown").ejDropDownList(
       { 
           targetID: "carsList", 
           watermarkText: 'Enter text' 
       });

    </script>

width string|number

Defines the width of the DropDownList textbox.

Default Value

• null

Example

HTML

<input type="text" id="dropdown" />

    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>

    <script>
      //Initializes the DropDownList width property with the width value specified.
        $("#dropdown").ejDropDownList(
        {
           targetID: "carsList",
           width: 250 
        });

    </script>

virtualScrollMode enum

The Virtual Scrolling feature is used to display a large amount of records in the DropDownList, that is, when scrolling, an AJAX request is sent to fetch some amount of data from the server dynamically. To achieve this scenario with DropDownList, set the allowVirtualScrolling to true. You can set the itemsCount property that represents the number of items to be fetched from the server on every AJAX request.

This property enables the data to load dynamically in two ways.

Name	Description
normal	The data is loaded only to the corresponding page (display items). When scrolling some other position, it enables the load on demand with the DropDownList.
continuous	The data items are loaded from the remote when scroll handle reaches the end of the scrollbar like infinity scrolling.

Default Value

• “normal”

Example - Normal mode

HTML

<input type="text" id="dropdown" />
    <script>

        var dataManagerObj = ej.DataManager({ url: "http://mvc.syncfusion.com/services/Northwnd.svc/Orders" })

        var query = ej.Query().select("ShipName", "ShipCountry");

        // Creates DropDownList.
        $('#dropdown').ejDropDownList(
        { 
            dataSource: dataManagerObj, 
            query: query, 
            fields: { text: "ShipName", value: "ShipCountry" }, 
            itemsCount: 20, 
            allowVirtualScrolling: true 
        });

    </script>

Example - Continuous mode

HTML

<input type="text" id="dropdown" />
    <script>
        var dataManagerObj = ej.DataManager({ url: "http://mvc.syncfusion.com/services/Northwnd.svc/Orders" })

        var query = ej.Query().select("ShipName", "ShipCountry");
        // Creates DropDownList.
        $('#dropdown').ejDropDownList(
        { 
            dataSource: dataManagerObj, 
            query: query, 
            fields: { text: "ShipName", value: "ShipCountry" }, 
            itemsCount: 20, 
            allowVirtualScrolling: true,
            virtualScrollMode: "continuous" 
        });
    </script>

Methods

addItem(data)

Adding a single item or an array of items into the DropDownList allows you to specify all the field attributes such as value, template, image URL, and HTML attributes for those items.Grouping and sorting will not be supported when we add items through this method.

Name	Type	Description
data	object|array	this parameter should have field attributes with respect to mapped field attributes and it's corresponding values to fields

Example

HTML

<input type="text" id="dropdown" />

    <script>
        window.countries = [
            { text: "Algeria"}, 
            { text: "Argentina"},
            { text: "Armenia"}, 
            { text: "Brazil"},
            { text: "Bangladesh"}
        ];

        // Creates the DropDownList
        $('#dropdown').ejDropDownList(
        { 
             dataSource: window.countries, 
             field: { text: "text"}, 
             value: "Algeria" 
        });

        $('#dropdown').ejDropDownList("addItem", { text :"India"});

    </script>

Example

HTML

<input type="text" id="dropdown" />

    <script>
        window.countries = [
            { text: "Algeria"}, 
            { text: "Argentina"},
            { text: "Armenia"}, 
            { text: "Brazil"},
            { text: "Bangladesh"}
        ];

        // Creates the DropDownList
        var dropdownObj = $('#dropdown').ejDropDownList(
        { 
           dataSource: window.countries, 
           field: { text: "text"}, 
           value: "Algeria" 
        }).data("ejDropDownList");

        //New Country Array. 
       window.newCountries = [
			{ text: "India"},
			{ text: "Pakistan"},
			];
        
       dropdownObj.addItem(newCountries );

    </script>

checkAll()

This method is used to select all the items in the DropDownList.

Example

HTML

<input type="text" id="dropdown" />

    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>

    <script>

        // Creates the DropDownList.
        var DropDownListObj = $('#dropdown').ejDropDownList(
        { 
            targetID: "carsList", 
            value: "Audi A5", 
            showCheckbox: true 
        }).data("ejDropDownList");

        DropDownListObj.checkAll(); // checkAll values the DropDownList.

    </script>

HTML

<input type="text" id="dropdown" />

    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>

    <script>
        // Creates DropDownList.
        $('#dropdown').ejDropDownList(
        { 
            targetID: "carsList", 
            value: "Audi A5", 
            showCheckbox: true 
        }); 

        $('#dropdown').ejDropDownList("checkAll");

    </script>

clearText()

Clears the text in the DropDownList textbox.

Example

HTML

<input type="text" id="dropdown" />

    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>

    <script>
        // Creates DropDownList.
        var DropDownListObj = $('#dropdown').ejDropDownList(
                             { 
                                targetID: "carsList", 
                                value: "Audi A5" 
                             }).data("ejDropDownList");

        DropDownListObj.clearText(); //Clears the DropDownList text.

    </script>

HTML

<input type="text" id="dropdown" />

    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>

    <script>
        // Creates the DropDownList.
        $('#dropdown').ejDropDownList(
        { 
            targetID: "carsList", 
            value: "Audi A5" 
        });

        $('#dropdown').ejDropDownList("clearText");

    </script>

destroy()

Destroys the DropDownList widget.

Example

HTML

<input type="text" id="dropdown" />

    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>

    <script>
        // Creates the DropDownList.
        var DropDownListObj = $('#dropdown').ejDropDownList(
                              { 
                                  targetID: "carsList", 
                                  value: "Audi A5"                   
                               }).data("ejDropDownList");

        DropDownListObj.destroy(); //Hides the DropDownList text.

    </script>

HTML

<input type="text" id="dropdown" />

    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>

    <script>
        // Creates the DropDownList.

        $('#dropdown').ejDropDownList(
        { 
             targetID: "carsList", 
             value: "Audi A5" 
        });

        $('#dropdown').ejDropDownList("destroy");

    </script>

disable()

This property is used to disable the DropDownList widget.

Example

HTML

<input type="text" id="dropdown" />

    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>

    <script>
        // Creates the DropDownList

        var DropDownListObj = $('#dropdown').ejDropDownList(
                              { 
                                  targetID: "carsList", 
                                  value: "Audi A5"                                     
                              }).data("ejDropDownList");

        DropDownListObj.disable(); //Hides the DropDownList text.

    </script>

HTML

<input type="text" id="dropdown" />

    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>

    <script>
        // Creates DropDownList.
        $('#dropdown').ejDropDownList(
        { 
            targetID: "carsList", 
            value: "Audi A5" 
        });

        $('#dropdown').ejDropDownList("disable");

    </script>

disableItemsByIndices(index)

This property disables the set of items in the DropDownList.

Name	Type	Description
index	string|number|array	disable the given index list items

Example

HTML

<input type="text" id="dropdown"/>

    <ul id="carsList">
        <li>Audi A4</li>
        <li>Audi A5</li>
        <li>Audi A6</li>
        <li>Audi A7</li>
        <li>Audi A8</li>
        <li>BMW 501</li>
        <li>BMW 502</li>
        <li>BMW 503</li>
        <li>BMW 507</li>
        <li>BMW 3200</li>
    </ul>

    <script>
        // Creates the DropDownList.

        $('#dropdown').ejDropDownList(
        { 
            targetID: "carsList",
            multiSelectMode: "delimiter"
        });

        var DropDownListObj = $("#dropdown").data("ejDropDownList");

        DropDownListObj.disableItemsByIndices("3,5,7");

    </script>

HTML

<input type="text" id="dropdown" />

    <ul id="carsList">
        <li>Audi A4</li>
        <li>Audi A5</li>
        <li>Audi A6</li>
        <li>Audi A7</li>
        <li>Audi A8</li>
        <li>BMW 501</li>
        <li>BMW 502</li>
        <li>BMW 503</li>
        <li>BMW 507</li>
        <li>BMW 3200</li>
    </ul>

    <script>
        // Creates the DropDownList.
        $('#dropdown').ejDropDownList(
        { 
            targetID: "carsList",
            multiSelectMode: "delimiter" 
        });

        $('#dropdown').ejDropDownList("disableItemsByIndices", "3,5,7");

    </script>

enable()

This property enables the DropDownList control.

Example

HTML

<input type="text" id="dropdown" />

    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>

    <script>
        // Creates the DropDownList.
        var DropDownListObj = $('#dropdown').ejDropDownList(
                              {
                                  targetID: "carsList", 
                                  value: "Audi A5",
                                  enable: false 
                              }).data("ejDropDownList");

        DropDownListObj.enable(); //Enables the DropDownList text.

    </script>

HTML

<input type="text" id="dropdown" />

    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>

    <script>
        // Creates the DropDownList.
        $('#dropdown').ejDropDownList(
        { 
             targetID: "carsList", 
             value: "Audi A5", 
             enable: false 
        });

        $('#dropdown').ejDropDownList("enable");

    </script>

enableItemsByIndices(index)

Enables an Item or set of Items that are disabled in the DropDownList

Name	Type	Description
index	string|number|array	enable the given index list items if it's disabled

Example

HTML

<input type="text" id="dropdown"/>

    <ul id="carsList">
        <li>Audi A4</li>
        <li>Audi A5</li>
        <li>Audi A6</li>
        <li>Audi A7</li>
        <li>Audi A8</li>
        <li>BMW 501</li>
        <li>BMW 502</li>
        <li>BMW 503</li>
        <li>BMW 507</li>
        <li>BMW 3200</li>
    </ul>

    <script>
        // Creates the DropDownList.

        $('#dropdown').ejDropDownList(
        { 
            targetID: "carsList", 
            multiSelectMode: "delimiter"
         });

        var DropDownListObj = $("#dropdown").data("ejDropDownList");

        DropDownListObj.disableItemsByIndices("3,5,7");

        DropDownListObj.enableItemsByIndices("3,7");

    </script>

HTML

<input type="text" id="dropdown" />
    <ul id="carsList">
        <li>Audi A4</li>
        <li>Audi A5</li>
        <li>Audi A6</li>
        <li>Audi A7</li>
        <li>Audi A8</li>
        <li>BMW 501</li>
        <li>BMW 502</li>
        <li>BMW 503</li>
        <li>BMW 507</li>
        <li>BMW 3200</li>
    </ul>

    <script>
        // Creates the DropDownList.
        $('#dropdown').ejDropDownList(
        { 
             targetID: "carsList", 
             multiSelectMode: "delimiter"
             
        });

        $('#dropdown').ejDropDownList("disableItemsByIndices", "3,5,7");
        $('#dropdown').ejDropDownList("enableItemsByIndices", "3,7");

    </script>

getItemDataByValue(value)

This method retrieves the items using given value.

Name	Type	Description
value	string|number|object	Return the whole object of data based on given value

####Returns: Array

This method will return the whole object corresponds to given value from datasource

Example

HTML

<input type="text" id="dropdown" />

    <script>

        var dataManagerObj = ej.DataManager({ url: "http://mvc.syncfusion.com/services/Northwnd.svc/Orders" })

        var query = ej.Query().select("ShipName", "ShipCountry");

        // Creates the DropDownList.
        $('#dropdown').ejDropDownList(
        {
            dataSource: dataManagerObj, 
            query: query, 
            fields: { text: "ShipName", value: "ShipCountry" }, 
            itemsCount: 20
        });
        var DropDownListObj = $("#dropdown").data("ejDropDownList");
        console.log("Target CompanyName - "+ DropDownListObj.getItemDataByValue("Aria Cruz")[0].CompanyName);

    </script>

HTML

<input type="text" id="dropdown" />

    <script>

        var dataManagerObj = ej.DataManager({ url: "http://mvc.syncfusion.com/services/Northwnd.svc/Orders" })

        var query = ej.Query().select("ShipName", "ShipCountry");

        // Creates the DropDownList.
        $('#dropdown').ejDropDownList(
        {
            dataSource: dataManagerObj, 
            query: query, 
            fields: { text: "ShipName", value: "ShipCountry" }, 
            itemsCount: 20
        });
        var data =  $('#dropdown').ejDropDownList('getItemDataByValue',"Aria Cruz")
        console.log("Target CompanyName - "+ data[0].CompanyName);

    </script>

getListData()

This method is used to retrieve the items that are bound with the DropDownList.

####Returns:

object

This method will return the whole data which binds with Dropdownlist control

Example

HTML

<select name="selectIndex" id="dropdown">

        <option value="Art">Art</option>
        <option value="Architecture">Architecture</option>
        <option value="Biographies">Biographies</option>
        <option value="Business">Business</option>
        <option value="ComputerIT">Computer IT</option>
        <option value="Comics">Comics</option>
        <option value="Cookery">Cookery</option>
        <option value="Environment">Environment</option>
        <option value="Fiction">Fiction</option>
        <option value="Health">Health</option>
        <option value="Humanities">Humanities</option>
        <option value="Language">Language</option>
</select>

    <script>

        // Creates the DropDownList.

        var DropDownListObj = $('#dropdown').ejDropDownList(
                             { 
                                text: "Comics" 

                             }).data("ejDropDownList");

         var items = DropDownListObj.getListData();
         for (var i=0;i< items.length; i++)
		       console.log("item" + i + " is " + items[i].text);

    </script>

HTML

<select name="selectIndex" id="dropdown">

        <option value="Art">Art</option>
        <option value="Architecture">Architecture</option>
        <option value="Biographies">Biographies</option>
        <option value="Business">Business</option>
        <option value="ComputerIT">Computer IT</option>
        <option value="Comics">Comics</option>
        <option value="Cookery">Cookery</option>
        <option value="Environment">Environment</option>
        <option value="Fiction">Fiction</option>
        <option value="Health">Health</option>
        <option value="Humanities">Humanities</option>
        <option value="Language">Language</option>
   
 </select>

    <script>
        // Creates the DropDownList.

        $('#dropdown').ejDropDownList({ text: "Comics"});

        var items = $('#dropdown').ejDropDownList("getListData");
        for (var i=0;i< items.length; i++)
		       console.log("item" + i + " is " + items[i].text);
    </script>

getSelectedItem()

This method is used to get the selected items in the DropDownList.

####Returns: Array

This method will return the selected item elements

Example

HTML

<input type="text" id="dropdown" /><div id="carsList"><ul>
        <li>Audi A4</li>
        <li>Audi A5</li>
        <li>Audi A6</li>
        <li>Audi A7</li>
        <li>Audi A8</li>
    </ul></div>
    <script>
        // Create DropDownList
        $('#dropdown').ejDropDownList({targetID: "carsList",value:"Audi A8"});
        var DropDownListObj  = $("#dropdown").data("ejDropDownList");
        DropDownListObj.getSelectedItem(); 
    </script>

HTML

<input type="text" id="dropdown" /><div id="carsList"><ul>
        <li>Audi A4</li>
        <li>Audi A5</li>
        <li>Audi A6</li>
        <li>Audi A7</li>
        <li>Audi A8</li>
    </ul>
    </div><script>
        // Creates the DropDownList
        $('#dropdown').ejDropDownList({targetID: "carsList",value:"Audi A8"});
        $('#dropdown').ejDropDownList("getSelectedItem");         
    </script>

getSelectedValue()

This method is used to retrieve the items value that are selected in the DropDownList.

Returns: string

This method will return the selected Item value and separated by delimiterChar in multi selection mode.

Example

HTML

<select name="selectIndex" id="dropdown">

        <option value="Art">Art</option>
        <option value="Architecture">Architecture</option>
        <option value="Biographies">Biographies</option>
        <option value="Business">Business</option>
        <option value="ComputerIT">Computer IT</option>
        <option value="Comics">Comics</option>
        <option value="Cookery">Cookery</option>
        <option value="Environment">Environment</option>
        <option value="Fiction">Fiction</option>
        <option value="Health">Health</option>
        <option value="Humanities">Humanities</option>
        <option value="Language">Language</option>
      </select>

    <script>

        // Creates the DropDownList.

        var DropDownListObj = $('#dropdown').ejDropDownList(
                             { 
                                text: "Comics" 

                             }).data("ejDropDownList");

        alert(DropDownListObj.getSelectedValue());

    </script>

HTML

<select name="selectIndex" id="dropdown">

        <option value="Art">Art</option>
        <option value="Architecture">Architecture</option>
        <option value="Biographies">Biographies</option>
        <option value="Business">Business</option>
        <option value="ComputerIT">Computer IT</option>
        <option value="Comics">Comics</option>
        <option value="Cookery">Cookery</option>
        <option value="Environment">Environment</option>
        <option value="Fiction">Fiction</option>
        <option value="Health">Health</option>
        <option value="Humanities">Humanities</option>
        <option value="Language">Language</option>
   
    </select>

    <script>
        // Creates the DropDownList.

        $('#dropdown').ejDropDownList({ text: "Comics"});

        alert($('#dropdown').ejDropDownList("getSelectedValue"));

    </script>

</script>

hidePopup()

This method hides the suggestion popup in the DropDownList.

Example

HTML

<input type="text" id="dropdown" />

    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>

    <script>

        // Creates the DropDownList
        var DropDownListObj = $('#dropdown').ejDropDownList(
                              { 
                                 targetID: "carsList", 
                                 value: "Audi A5" ,
                                 showPopupOnLoad :true        
                              }).data("ejDropDownList"); 

        DropDownListObj.hidePopup(); //Hides popup of the DropDownList. 

    </script>

HTML

<input type="text" id="dropdown" />

    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>

    <script>
        // Creates the DropDownList.
        $('#dropdown').ejDropDownList(
        { 
            targetID: "carsList", 
            value: "Audi A5",
            showPopupOnLoad :true 
        });

        $('#dropdown').ejDropDownList("hidePopup");

    </script>

selectItemsByIndices(indices)

This method is used to select the list of items in the DropDownList through the Index of the items.

Name	Type	Description
index	string|number|array	select the given index list items

Example

HTML

<select name="selectIndex" id="dropdown">

        <option value="Art">Art</option>
        <option value="Architecture">Architecture</option>
        <option value="Biographies">Biographies</option>
        <option value="Business">Business</option>
        <option value="ComputerIT">Computer IT</option>
        <option value="Comics">Comics</option>
        <option value="Cookery">Cookery</option>
        <option value="Environment">Environment</option>
        <option value="Fiction">Fiction</option>
        <option value="Health">Health</option>
        <option value="Humanities">Humanities</option>
        <option value="Language">Language</option>
</select>

    <script>
        // Creates the DropDownList.
        var DropDownListObj =     
        $('#dropdown').ejDropDownList({showCheckbox : true }).data("ejDropDownList");

        DropDownListObj.selectItemsByIndices("2,3"); //selectItemByIndex for the DropDownList text.

    </script>

HTML

<select name="selectIndex" id="dropdown">

        <option value="Art">Art</option>
        <option value="Architecture">Architecture</option>
        <option value="Biographies">Biographies</option>
        <option value="Business">Business</option>
        <option value="ComputerIT">Computer IT</option>
        <option value="Comics">Comics</option>
        <option value="Cookery">Cookery</option>
        <option value="Environment">Environment</option>
        <option value="Fiction">Fiction</option>
        <option value="Health">Health</option>
        <option value="Humanities">Humanities</option>
        <option value="Language">Language</option>

    </select>

    <script>
        // Creates the DropDownList.
        $('#dropdown').ejDropDownList({showCheckbox : true });
        $('#dropdown').ejDropDownList("selectItemsByIndices", "2,3");

    </script>

selectItemByText(text)

This method is used to select an item in the DropDownList by using the given text value.

Name	Type	Description
index	string|number|array	select the list items relates to given text

Example

HTML

<select name="selectIndex" id="dropdown"><option value="Architecture">Architecture</option>
        <option value="Biographies">Biographies</option>
        <option value="Business">Business</option>
        <option value="ComputerIT">Computer IT</option>
        <option value="Comics">Comics</option>
        <option value="Cookery">Cookery</option>
        <option value="Environment">Environment</option>
        <option value="Fiction">Fiction</option>
        <option value="Health">Health</option>
        <option value="Humanities">Humanities</option>
        <option value="Language">Language</option></select><script>
        // Creates the DropDownList.
        var DropDownListObj =  
         $('#dropdown').ejDropDownList(
         {
              showCheckbox : true
         }).data("ejDropDownList");
        DropDownListObj.selectItemByText("Computer IT ,Comics ");
    </script>

HTML

<select name="selectIndex" id="dropdown">
        <option value="Art">Art</option>
        <option value="Architecture">Architecture</option>
        <option value="Biographies">Biographies</option>
        <option value="Business">Business</option>
        <option value="ComputerIT">Computer IT</option>
        <option value="Comics">Comics</option>
        <option value="Cookery">Cookery</option>
        <option value="Environment">Environment</option>
        <option value="Fiction">Fiction</option>
        <option value="Health">Health</option>
        <option value="Humanities">Humanities</option>
        <option value="Language">Language</option>
    </select><script>
        // Creates the DropDownList.
        $('#dropdown').ejDropDownList({showCheckbox : true});
        $('#dropdown').ejDropDownList("selectItemByText", "Computer IT ,Comics ");
    </script>

selectItemByValue(value)

This method is used to select an item in the DropDownList by using the given value.

Name	Type	Description
index	string|number|array	select the list items relates to given values

Example

HTML

<select name="selectIndex" id="dropdown">
        <option value="Art">Art</option>
        <option value="Architecture">Architecture</option>
        <option value="Biographies">Biographies</option>
        <option value="Business">Business</option>
        <option value="ComputerIT">Computer IT</option>
        <option value="Comics">Comics</option>
        <option value="Cookery">Cookery</option>
        <option value="Environment">Environment</option>
        <option value="Fiction">Fiction</option>
        <option value="Health">Health</option>
        <option value="Humanities">Humanities</option>
        <option value="Language">Language</option>
    </select><script>
        // Creates the DropDownList.
        var DropDownListObj = 
            $('#dropdown').ejDropDownList(
            {
                showCheckbox : true
            }).data("ejDropDownList");
        DropDownListObj.selectItemByValue("ComputerIT, Cookery ");
    </script>

HTML

<select name="selectIndex" id="dropdown">
        <option value="Art">Art</option>
        <option value="Architecture">Architecture</option>
        <option value="Biographies">Biographies</option>
        <option value="Business">Business</option>
        <option value="ComputerIT">Computer IT</option>
        <option value="Comics">Comics</option>
        <option value="Cookery">Cookery</option>
        <option value="Environment">Environment</option>
        <option value="Fiction">Fiction</option>
        <option value="Health">Health</option>
        <option value="Humanities">Humanities</option>
        <option value="Language">Language</option>
    </select><script>
        // Creates the DropDownList.
        $('#dropdown').ejDropDownList({showCheckbox : true});
        $('#dropdown').ejDropDownList("selectItemByValue", "ComputerIT, Cookery ");
    </script>

showPopup()

This method shows the DropDownList control with the suggestion popup.

Example

HTML

<input type="text" id="dropdown" />

    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>

    <script>
        // Creates the DropDownList.
        var DropDownListObj = $('#dropdown').ejDropDownList(
                              {
                                 targetID: "carsList", 
                                 value: "Audi A5"
                              }).data("ejDropDownList");

        DropDownListObj.showPopup(); // hides Popup of the DropDownList.

    </script>

HTML

<input type="text" id="dropdown" />

    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>

    <script>
        // Creates the DropDownList.
        $('#dropdown').ejDropDownList(
        { 
             targetID: "carsList", 
             value: "Audi A5"
        });

        $('#dropdown').ejDropDownList("showPopup");

    </script>

unCheckAll()

This method is used to unselect all the items in the DropDownList.

Example

HTML

<input type="text" id="dropdown" /><div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div><script>
        // Creates the DropDownList.
        var DropDownListObj = $('#dropdown').ejDropDownList(
                              { 
                                  targetID: "carsList", 
                                  value: "Audi A5" ,  
                                  selectedIndex:[1]
                              }).data("ejDropDownList");

        DropDownListObj.uncheckAll();

    </script>

HTML

<input type="text" id="dropdown" /><div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div><script>
        // Creates the DropDownList.
        $('#dropdown').ejDropDownList(
        { 
            targetID: "carsList",
            selectedIndex:[1]
        });

        $('#dropdown').ejDropDownList("uncheckAll");
    </script>

unselectItemsByIndices(indices)

This method is used to unselect the list of items in the DropDownList through Index of the items.

Name	Type	Description
index	string|number|array	unselect the given index list items

Example

HTML

<select name="selectIndex" id="dropdown">
        <option value="Art">Art</option>
        <option value="Architecture">Architecture</option>
        <option value="Biographies">Biographies</option>
        <option value="Business">Business</option>
        <option value="ComputerIT">Computer IT</option>
        <option value="Comics">Comics</option>
        <option value="Cookery">Cookery</option>
        <option value="Environment">Environment</option>
        <option value="Fiction">Fiction</option>
        <option value="Health">Health</option>
        <option value="Humanities">Humanities</option>
        <option value="Language">Language</option>
    </select><script>
        // Creates the DropDownList.
        var DropDownListObj = $('#dropdown').ejDropDownList(
                              {
                                  checkAll: true,   
                                  showCheckbox:true
                              }).data("ejDropDownList");
        DropDownListObj.unselectItemsByIndices("2,3"); 
    </script>

HTML

<select name="selectIndex" id="dropdown">
        <option value="Art">Art</option>
        <option value="Architecture">Architecture</option>
        <option value="Biographies">Biographies</option>
        <option value="Business">Business</option>
        <option value="ComputerIT">Computer IT</option>
        <option value="Comics">Comics</option>
        <option value="Cookery">Cookery</option>
        <option value="Environment">Environment</option>
        <option value="Fiction">Fiction</option>
        <option value="Health">Health</option>
        <option value="Humanities">Humanities</option>
        <option value="Language">Language</option>
    </select><script>
        // Creates the DropDownList.
        $('#dropdown').ejDropDownList(
        {
            checkAll: true, 
            showCheckbox:true
        });
        $('#dropdown').ejDropDownList("unselectItemsByIndices", "2,3");
    </script>

unselectItemByText(text)

This method is used to unselect an item in the DropDownList by using the given text value.

Name	Type	Description
index	string|number|array	unselect the list items relates to given text

Example

HTML

<select name="selectIndex" id="dropdown">
        <option value="Art">Art</option>
        <option value="Architecture">Architecture</option>
        <option value="Biographies">Biographies</option>
        <option value="Business">Business</option>
        <option value="ComputerIT">Computer IT</option>
        <option value="Comics">Comics</option>
        <option value="Cookery">Cookery</option>
        <option value="Environment">Environment</option>
        <option value="Fiction">Fiction</option>
        <option value="Health">Health</option>
        <option value="Humanities">Humanities</option>
        <option value="Language">Language</option>
    </select><script>
        // Creates the DropDownList.
        var DropDownListObj = $('#dropdown').ejDropDownList(
                              {
                                  checkAll: true, 
                                  showCheckbox :true
                              }).data("ejDropDownList");
        DropDownListObj.unselectItemByText("Computer IT, Cookery");
    </script>

HTML

<select name="selectIndex" id="dropdown">
        <option value="Art">Art</option>
        <option value="Architecture">Architecture</option>
        <option value="Biographies">Biographies</option>
        <option value="Business">Business</option>
        <option value="ComputerIT">Computer IT</option>
        <option value="Comics">Comics</option>
        <option value="Cookery">Cookery</option>
        <option value="Environment">Environment</option>
        <option value="Fiction">Fiction</option>
        <option value="Health">Health</option>
        <option value="Humanities">Humanities</option>
        <option value="Language">Language</option>
    </select><script>
        // Creates the DropDownList.
        $('#dropdown').ejDropDownList(
        {
            checkAll: true, 
            showCheckbox:true
        });
        $('#dropdown').ejDropDownList("unselectItemByText", "Computer IT, Cookery ");
    </script>

unselectItemByValue(value)

This method is used to unselect an item in the DropDownList by using the given value.

Name	Type	Description
index	string|number|array	unselect the list items relates to given values

Example

HTML

<select name="selectIndex" id="dropdown">
        <option value="Art">Art</option>
        <option value="Architecture">Architecture</option>
        <option value="Biographies">Biographies</option>
        <option value="Business">Business</option>
        <option value="ComputerIT">Computer IT</option>
        <option value="Comics">Comics</option>
        <option value="Cookery">Cookery</option>
        <option value="Environment">Environment</option>
        <option value="Fiction">Fiction</option>
        <option value="Health">Health</option>
        <option value="Humanities">Humanities</option>
        <option value="Language">Language</option>
    </select><script>
        // Creates the DropDownList.
        var DropDownListObj = $('#dropdown').ejDropDownList(
                              {
                                  checkAll: true, 
                                  showCheckbox :true
                              }).data("ejDropDownList");

        DropDownListObj.unselectItemByValue("ComputerIT, Cookery ");
    </script>

HTML

<select name="selectIndex" id="dropdown">
        <option value="Art">Art</option>
        <option value="Architecture">Architecture</option>
        <option value="Biographies">Biographies</option>
        <option value="Business">Business</option>
        <option value="ComputerIT">Computer IT</option>
        <option value="Comics">Comics</option>
        <option value="Cookery">Cookery</option>
        <option value="Environment">Environment</option>
        <option value="Fiction">Fiction</option>
        <option value="Health">Health</option>
        <option value="Humanities">Humanities</option>
        <option value="Language">Language</option>
    </select><script>
        // Creates the DropDownList.
        $('#dropdown').ejDropDownList(
        {
            checkAll: true, 
            showCheckbox:true
        });
        $('#dropdown').ejDropDownList("unselectItemByValue", "ComputerIT, Cookery ");
    </script>

Events

actionBegin

Fires the action before the XHR request.

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the DropDownList model
type	string	returns the name of the event

Example

HTML

<input type="text" id="dropdown" />

    <script>

        var dataManagerObj = ej.DataManager({ url: "http://mvc.syncfusion.com/services/Northwnd.svc/Orders" })

        var query = ej.Query().select("ShipName", "ShipCountry");

        // Creates the DropDownList.
        $('#dropdown').ejDropDownList(
        {
            dataSource: dataManagerObj, 
            query: query, 
            fields: { text: "ShipName", value: "ShipCountry" }, 
            itemsCount: 20, 
            actionBegin : function (args) 
            {
                /*Do your changes */               
            }
        });

    </script>

actionComplete

Fires the action when the list of items is bound to the DropDownList by xhr post calling

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
count	number	Returns number of times trying to fetch the data
model	object	returns the DropDownList model
query	object	Returns the query for data retrieval
request	object	Returns the query for data retrieval from the Database
type	string	returns the name of the event
result	array	Returns the number of items fetched from remote data
xhr	object	Returns the requested data

Example

HTML

<input type="text" id="dropdown" />

    <script>

        var dataManagerObj = ej.DataManager({ url: "http://mvc.syncfusion.com/services/Northwnd.svc/Orders" })

        var query = ej.Query().select("ShipName", "ShipCountry");

        // Creates the DropDownList.
        $('#dropdown').ejDropDownList(
        {
            dataSource: dataManagerObj, 
            query: query, 
            fields: { text: "ShipName", value: "ShipCountry" }, 
            itemsCount: 20, 
            actionComplete: function (args) 
            {
                /*Do your changes */               
            }
        });

    </script>

actionFailure

Fires the action when the xhr post calling failed on remote data binding with the DropDownList control.

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
error	object	Returns the error message
model	object	returns the DropDownList model
query	object	Returns the query for data retrieval
type	string	returns the name of the event

Example

HTML

<input type="text" id="dropdown" />

    <script>

        var dataManagerObj = ej.DataManager({ url: "http://mvc.syncfusion.com/services/Northwnd.svc/Orders" })

        var query = ej.Query().select("ShipName", "ShipCountry");

        // Creates the DropDownList.
        $('#dropdown').ejDropDownList(
        {
            dataSource: dataManagerObj, 
            query: query, 
            fields: { text: "ShipName", value: "ShipCountry" }, 
            itemsCount: 20, 
            actionFailure: function (args) 
            {
                /*Do your changes */               
            }
        });

    </script>

actionSuccess

Fires the action when the xhr post calling succeed on remote data binding with the DropDownList control

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
count	number	Returns number of times trying to fetch the data
model	object	returns the DropDownList model
query	object	Returns the query for data retrieval
request	object	Returns the query for data retrieval from the Database
type	string	returns the name of the event
result	array	Returns the number of items fetched from remote data
xhr	object	Returns the requested data

Example

HTML

<input type="text" id="dropdown" />

    <script>

        var dataManagerObj = ej.DataManager({ url: "http://mvc.syncfusion.com/services/Northwnd.svc/Orders" })

        var query = ej.Query().select("ShipName", "ShipCountry");

        // Creates DropDownList.
        $('#dropdown').ejDropDownList(
        {
            dataSource: dataManagerObj, 
            query: query, 
            fields: { text: "ShipName", value: "ShipCountry" }, 
            itemsCount: 20, 
            actionSuccess: function (args) 
            {
                /*Do your changes */               
            }
        });

    </script>

beforePopupHide

Fires the action before the popup is ready to hide.

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the DropDownList model
type	string	returns the name of the event
text	string	returns the selected text
value	string	returns the selected value

Example

HTML

<input type="text" id="dropdown" />

    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>

    <script> 

        // Creates the DropDownList.
        $('#dropdown').ejDropDownList(
        {
            targetID: "carsList", 
            value: "Audi A5", 
            beforePopupHide: function (args) 
            {
               /*Do your changes */            
            }
        });

    </script>

beforePopupShown

Fires the action before the popup is ready to be displayed.

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the DropDownList model
type	string	returns the name of the event
text	string	returns the selected text
value	string	returns the selected value

Example

HTML

<input type="text" id="dropdown" />

    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>

    <script>
        // Creates the DropDownList.
        $('#dropdown').ejDropDownList(
        {
            targetID: "carsList", 
            value: "Audi A5", 
            beforePopupShown: function (args) 
            {
                      /*Do your changes */                        
            }
        });

    </script>

cascade

Fires when the cascading happens between two DropDownList exactly after the value changes in the first dropdown and before filtering in the second Dropdown.

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
cascadeModel	object	Returns the cascading dropdown model.
cascadeValue	string	returns the current selected value in first dropdown.
model	object	returns the DropDownList model
requiresDefaultFilter	boolean	returns the default filter action for second dropdown data should happen or not.
type	string	returns the name of the event

Example

HTML

<div style="float: left;">
        <span>Select Group</span>
        <input id="groupsList" type="text" />
    </div>

    <div style="float: right;">
        <span>Select Country</span>
        <input id="countryList" type="text" />
    </div>
    <script>
        var groups = [
            { parentId: 'a', text: "Group A" },
            { parentId: 'b', text: "Group B" },
            { parentId: 'c', text: "Group C" },
            { parentId: 'd', text: "Group D" },
            { parentId: 'e', text: "Group E" }
        ];

        var countries = [
            { value: 11, parentId: 'a', text: "Algeria", flag: "flag-dz" },
            { value: 12, parentId: 'a', text: "Armenia", flag: "flag-am" },
            { value: 13, parentId: 'a', text: "Bangladesh", flag: "flag-bangladesh" },
            { value: 14, parentId: 'a', text: "Cuba", flag: "flag-cu" },
            { value: 15, parentId: 'b', text: "Denmark", flag: "flag-denmark" },
            { value: 16, parentId: 'b', text: "Egypt", flag: "flag-eg" },
            { value: 17, parentId: 'c', text: "Finland", flag: "flag-fi" },
            { value: 18, parentId: 'c', text: "India", flag: "flag-in" },
            { value: 19, parentId: 'c', text: "Malaysia", flag: "flag-my" },
            { value: 20, parentId: 'd', text: "New Zealand", flag: "flag-new-zealand" },
            { value: 21, parentId: 'd', text: "Norway", flag: "flag-no" },
            { value: 22, parentId: 'd', text: "Poland", flag: "flag-pl" },
            { value: 23, parentId: 'e', text: "Romania", flag: "flag-ro" },
            { value: 24, parentId: 'e', text: "Singapore", flag: "flag-singapore" },
            { value: 25, parentId: 'e', text: "Thailand", flag: "flag-th" },
            { value: 26, parentId: 'e', text: "Ukraine", flag: "flag-ukraine" }
        ];

        // Sets the cascadeTo API value during initialization 
        $('#groupsList').ejDropDownList({
            dataSource: groups,
            fields: { value: "parentId", text: "text" },
            cascadeTo: 'countryList',
            cascade: function (args) {/*Do your changes */ }
        });

change

Fires the action when the DropDownList control’s value is changed.

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
isChecked	boolean	Returns the selected item with checkbox checked or not.
itemId	string	Returns the selected item ID.
model	object	returns the DropDownList model
selectedText	string	Returns the selected item text.
type	string	returns the name of the event
text	string	Returns the selected text.
value	string	Returns the selected value.

Example

HTML

<input type="text" id="dropdown" />

    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>

    <script>
        // Creates the DropDownList.
        $('#dropdown').ejDropDownList(
        {
            targetID: "carsList", 
            value: "Audi A5", 
            change: function (args) 
            {
               /*Do your changes */                        
            }
        });

    </script>

checkChange

Fires the action when the list item checkbox value is changed.

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
isChecked	boolean	Returns the selected item with checkbox checked or not.
itemId	string	Returns the selected item ID.
model	object	returns the DropDownList model
selectedText	string	Returns the selected item text.
type	string	returns the name of the event
text	string	Returns the selected text.
value	string	Returns the selected value.

Example

HTML

<input type="text" id="dropdown" />

    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>

    <script>
        // Creates the DropDownList.
        $('#dropdown').ejDropDownList(
        {
            targetID: "carsList", 
            value: "Audi A5", 
            showCheckbox: true, 
            checkChange: function (args) 
            {              
               /*Do your changes */                        
            }
        });

    </script>

create

Fires the action once the DropDownList is created.

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the DropDownList model
type	string	returns the name of the event

Example

HTML

<input type="text" id="dropdown" />

    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>

    <script>
        // Creates the DropDownList.
        $('#dropdown').ejDropDownList(
        {
            targetID: "carsList", 
            value: "Audi A5", 
            create: function (args) 
            {
               /*Do your changes */                        
            }
        });

    </script>

dataBound

Fires the action when the list items is bound to the DropDownList.

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the DropDownList model
type	string	returns the name of the event
data	object	returns the data that is bound to DropDownList

Example

HTML

<input type="text" id="dropdown" />

    <script>

        var dataManagerObj = ej.DataManager({ url: "http://mvc.syncfusion.com/services/Northwnd.svc/Orders" })

        var query = ej.Query().select("ShipName", "ShipCountry");

        // Creates DropDownList.
        $('#dropdown').ejDropDownList(
        {
            dataSource: dataManagerObj, 
            query: query, 
            fields: { text: "ShipName", value: "ShipCountry" }, 
            itemsCount: 20, 
            dataBound: function (args) 
            {
                /*Do your changes */               
            }
        });

    </script>

destroy

Fires the action when the DropDownList is destroyed.

Name	Type	Description
cancel	boolean	its value is set as true,if the event should be canceled; otherwise, false.
model	object	returns the DropDownList model
type	string	returns the name of the event

Example

HTML

<input type="text" id="dropdown" />

    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>

    <script>
        // Creates the DropDownList.
        $('#dropdown').ejDropDownList(
        {
            targetID: "carsList", 
            value: "Audi A5", 
            destroy: function (args) 
            {
               /*Do your changes */                        
            }
        });

    </script>

focusIn

Fires the action when the DropDownList is focused.

Name	Type	Description
cancel	boolean	its value is set as true,if the event should be canceled; otherwise, false.
model	object	returns the DropDownList model
type	string	returns the name of the event

Example

HTML

<input type="text" id="dropdown" />

    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>

    <script>
        // Creates the DropDownList.
        $('#dropdown').ejDropDownList(
        {
            targetID: "carsList",  
            focusIn: function (args) 
            {
               /*Do your changes */                        
            }
        });

    </script>

focusOut

Fires the action when the DropDownList is about to lose focus.

Name	Type	Description
cancel	boolean	its value is set as true,if the event should be canceled; otherwise, false.
model	object	returns the DropDownList model
type	string	returns the name of the event

Example

HTML

<input type="text" id="dropdown" />

    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>

    <script>
        // Creates the DropDownList.
        $('#dropdown').ejDropDownList(
        {
            targetID: "carsList",  
            focusOut: function (args) 
            {
               /*Do your changes */                        
            }
        });

    </script>

popupHide

Fires the action, once the popup is closed

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the DropDownList model
type	string	returns the name of the event
text	string	returns the selected text
value	string	returns the selected value

Example

HTML

<input type="text" id="dropdown" />

    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>
    <script>
        // Creates DropDownList.
        $('#dropdown').ejDropDownList(
        {
            targetID: "carsList", 
            value: "Audi A5", 
            popupHide: function (args) 
            {
               /*Do your changes */                        
            }
        });
    </script>

popupResize

Fires the action, when the popup is resized.

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the DropDownList model
type	string	returns the name of the event
event	object	Returns the data from the resizable plugin.

Example

HTML

<input type="text" id="dropdown" /><script>

        var dataManagerObj = ej.DataManager({ url: "http://mvc.syncfusion.com/services/Northwnd.svc/Orders" })

        var query = ej.Query().select("ShipName", "ShipCountry");

        // Creates the DropDownList.
        $('#dropdown').ejDropDownList(
        {
            dataSource: dataManagerObj, 
            query: query, 
            fields: { text: "ShipName", value: "ShipCountry" }, 
            itemsCount: 20, 
            enablePopupResize: true, 
            popupResize: function (args) 
            {
                /*Do your changes */
            }
        });

    </script>

popupShown

Fires the action, once the popup is opened.

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the DropDownList model
type	string	returns the name of the event
text	string	returns the selected text
value	string	returns the selected value

Example

HTML

<input type="text" id="dropdown" />

    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>

    <script>
        // Creates DropDownList.
        $('#dropdown').ejDropDownList(
        {
            targetID: "carsList", 
            value: "Audi A5", 
            popupShown: function (args) 
            {
               /*Do your changes */                        
            }
        });

    </script>

popupResizeStart

Fires the action, when resizing a popup starts.

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the DropDownList model
type	string	returns the name of the event
event	object	Returns the data from the resizable plugin.

Example

HTML

<input type="text" id="dropdown" />

    <script>

        var dataManagerObj = ej.DataManager({ url: "http://mvc.syncfusion.com/services/Northwnd.svc/Orders" })

        var query = ej.Query().select("ShipName", "ShipCountry");

        // Creates the DropDownList.
        $('#dropdown').ejDropDownList(
        {
            dataSource: dataManagerObj, 
            query: query, 
            fields: { text: "ShipName", value: "ShipCountry" }, 
            itemsCount: 20, 
            enablePopupResize:true, 
            popupResizeStart: function (args) 
            {
                /*Do your changes */
            }
        });

    </script>

popupResizeStop

Fires the action, when the popup resizing is stopped.

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the DropDownList model
type	string	returns the name of the event
event	object	Returns the data from the resizable plugin.

Example

HTML

<input type="text" id="dropdown" />
    <script>

        var dataManagerObj = ej.DataManager({ url: "http://mvc.syncfusion.com/services/Northwnd.svc/Orders" });

        var query = ej.Query().select("ShipName", "ShipCountry");

        // Creates the DropDownList.
        $('#dropdown').ejDropDownList(
        {
            dataSource: dataManagerObj, 
            query: query, 
            fields: { text: "ShipName", value: "ShipCountry" }, 
            itemsCount: 20, 
            enablePopupResize:true, 
            popupResizeStop: function (args) 
            {
                /*Do your changes */
            }
        });
    </script>

search

Fires the action before filtering the list items that starts in the DropDownList when the enableFilterSearch is enabled.

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
items	object	Returns the data bound to the DropDownList.
model	object	returns the DropDownList model
selectedText	string	Returns the selected item text.
type	string	returns the name of the event
searchString	string	Returns the search string typed in search box.

Example

HTML

<input type="text" id="dropdown" />

    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>

    <script>
        // Creates the DropDownList.
        $('#dropdown').ejDropDownList(
        {
            targetID: "carsList", 
            value: "Audi A5", 
            enableFilterSearch : true, 
            search: function (args) 
            {              
               /*Do your changes */                        
            }
        });

    </script>

select

Fires the action, when the list of item is selected.

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
isChecked	boolean	Returns the selected item with checkbox checked or not.
itemId	string	Returns the selected item ID.
model	object	returns the DropDownList model
selectedText	string	Returns the selected item text.
type	string	returns the name of the event
text	string	Returns the selected text.
value	string	Returns the selected value.

Example

HTML

<input type="text" id="dropdown" />

    <div id="carsList">
        <ul>
            <li>Audi A4</li>
            <li>Audi A5</li>
            <li>Audi A6</li>
            <li>Audi A7</li>
            <li>Audi A8</li>
        </ul>
    </div>

    <script>
        // Creates the DropDownList.
        $('#dropdown').ejDropDownList(
        {
            targetID: "carsList", 
            value: "Audi A5", 
            showCheckbox: true, 
            select: function (args) 
            {              
               /*Do your changes */                        
            }
        });

    </script>