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/25.1.35/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>