ejmDropDownList

5 Jun 202324 minutes to read

The Essential JavaScript Mobile DropDownList widget is a text box control that provides a list of options on focus and allows you to pick one option.

Custom Design for HTML DropDownList control.

$(element).ejmDropDownList()

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="dd_default" data-role="ejmdropdownlist" data-ej-targetid="targetEle" />

    <ul id="targetEle">
        <li data-ej-text="Google"></li>
        <li data-ej-text="Bing"></li>
        <li data-ej-text="Yahoo"></li>
        <li data-ej-text="Ask"></li>
    </ul>

HTML

<!-- Obtrusive way of rendering -->
    <input id="dd_default" />

    <ul id="targetEle">
        <li data-ej-text="Google"></li>
        <li data-ej-text="Bing"></li>
        <li data-ej-text="Yahoo"></li>
        <li data-ej-text="Ask"></li>
    </ul>

    <script>
        $("#dd_default").ejmDropDownList({ targetId: "targetEle" });
    </script>

Requires

• module:jQuery

• module:ej.core

• module:ej.unobtrusive

• module:ej.mobile.core

• module:ej.data

• module:ej.touch

• module:ej.mobile.listview

• module:ej.mobile.scrollpanel

• module:ej.mobile.scrollbar

Members

allowVirtualScrolling boolean

The Virtual Scrolling feature is used to display a large amount of records in the DropDownList, that is when scroll end happens, 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.

NOTE

To achieve virtual scrolling, dataSource, fields.text and itemsCount properties should be set properly.

Default Value

• false

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input type="text" id="dd_virtualscroll" data-role="ejmdropdownlist" data-ej-datasource="window.datasrc" data-ej-fields-text="ContactName" data-ej-allowvirtualscrolling="true" data-ej-itemscount="10" />

    <script type="text/javascript">
        window.datasrc = ej.DataManager({
            url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Customers"
        });
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <input type="text" id="virtualscroll" />

    <script type="text/javascript">
        window.datasrc = ej.DataManager({
            url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Customers"
        });
        $("#virtualscroll").ejmDropDownList({ dataSource: window.datasrc, fields: { text: "ContactName" }, itemsCount: 10, allowVirtualScrolling: true });
    </script>

cssClass string

Sets the root class for DropDownList. This cssClass API helps to use custom skinning option for DropDownList control. By defining the root class using this API, we need to include this root class in CSS.

Default Value

• ””

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="dd_default" data-role="ejmdropdownlist" data-ej-targetid="targetEle" data-ej-cssclass="customclass" />

    <ul id="targetEle">
        <li data-ej-text="Google"></li>
        <li data-ej-text="Bing"></li>
        <li data-ej-text="Yahoo"></li>
        <li data-ej-text="Ask"></li>
    </ul>

    <style>
        .customclass .e-m-dropdownlist {
            color: red !important;
        }
    </style>

HTML

<!-- Obtrusive way of rendering -->
    <input id="dd_default" />

    <ul id="targetEle">
        <li data-ej-text="Google"></li>
        <li data-ej-text="Bing"></li>
        <li data-ej-text="Yahoo"></li>
        <li data-ej-text="Ask"></li>
    </ul>

    <script>
        $("#dd_default").ejmDropDownList({ targetId: "targetEle", cssClass: "customclass" });
    </script>

    <style>
        .customclass .e-m-dropdownlist {
            color: red !important;
        }
    </style>

dataSource jsonarray

Specifies the data source for DropDownList rendering. In DropDownList, options can be given as data source of JSON array.

Default Value:

• []

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input type="text" id="dd_grouping" data-role="ejmdropdownlist" data-ej-datasource="window.listData" data-ej-fields-text="name" />

    <script>
        window.listData = [{ name: "Australia" },
                           { name: "Brazil" },
                           { name: "China" },
                           { name: "India" },
                           { name: "Spain" }];
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <input type="text" id="dd_default" />
    <script>
        window.listData = [{ name: "Australia" },
                           { name: "Brazil" },
                           { name: "China" },
                           { name: "India" },
                           { name: "Spain" }];
    </script>

    <script>
        $("#dd_default").ejmDropDownList({ dataSource: window.listData, fields: { text: "name" } });
    </script>

delimiterChar string

Specifies the separator character for multi selection mode which separates two items.

NOTE

This property works only for multi selection mode, hence the property enableMultiSelect should be set as true.

Default Value

• ”,”

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="dd_default" data-role="ejmdropdownlist" data-ej-targetid="targetEle" data-ej-delimiterchar="/" data-ej-enablemultiselect="true" />

    <ul id="targetEle">
        <li data-ej-text="Google"></li>
        <li data-ej-text="Bing"></li>
        <li data-ej-text="Yahoo"></li>
        <li data-ej-text="Ask"></li>
    </ul>

HTML

<!-- Obtrusive way of rendering -->
    <input id="dd_default" />

    <ul id="targetEle">
        <li data-ej-text="Google"></li>
        <li data-ej-text="Bing"></li>
        <li data-ej-text="Yahoo"></li>
        <li data-ej-text="Ask"></li>
    </ul>

    <script>
        $("#dd_default").ejmDropDownList({ targetId: "targetEle", delimiterChar: "/", enableMultiSelect: true });
    </script>

enabled boolean

Specifies whether to enable or disable the DropDownList control.

Default Value

• true

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="dd_default" data-role="ejmdropdownlist" data-ej-targetid="targetEle" data-ej-enabled="false" />

    <ul id="targetEle">
        <li data-ej-text="Google"></li>
        <li data-ej-text="Bing"></li>
        <li data-ej-text="Yahoo"></li>
        <li data-ej-text="Ask"></li>
    </ul>

HTML

<!-- Obtrusive way of rendering -->
    <input id="dd_default" />

    <ul id="targetEle">
        <li data-ej-text="Google"></li>
        <li data-ej-text="Bing"></li>
        <li data-ej-text="Yahoo"></li>
        <li data-ej-text="Ask"></li>
    </ul>

    <script>
        $("#dd_default").ejmDropDownList({ targetId: "targetEle", enabled: false });
    </script>

enableMultiSelect boolean

Specifies multi select DropDownList. You can select multiple options by enabling this property.

Default Value

• false

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="dd_default" data-role="ejmdropdownlist" data-ej-targetid="targetEle" data-ej-enablemultiselect="true" />

    <ul id="targetEle">
        <li data-ej-text="Google"></li>
        <li data-ej-text="Bing"></li>
        <li data-ej-text="Yahoo"></li>
        <li data-ej-text="Ask"></li>
    </ul>

HTML

<!-- Obtrusive way of rendering -->
    <input id="dd_default" />

    <ul id="targetEle">
        <li data-ej-text="Google"></li>
        <li data-ej-text="Bing"></li>
        <li data-ej-text="Yahoo"></li>
        <li data-ej-text="Ask"></li>
    </ul>

    <script>
        $("#dd_default").ejmDropDownList({ targetId: "targetEle", enableMultiSelect: true });
    </script>

enablePersisitence boolean

Specifies to maintain the current model value to browser cookies for state maintenance. While refresh the page, the model value will get apply to the control from browser cookies.

Default Value

• false

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="dd_default" data-role="ejmdropdownlist" data-ej-targetid="targetEle" data-ej-enablepersistence="true" />

    <ul id="targetEle">
        <li data-ej-text="Google"></li>
        <li data-ej-text="Bing"></li>
        <li data-ej-text="Yahoo"></li>
        <li data-ej-text="Ask"></li>
    </ul>

HTML

<!-- Obtrusive way of rendering -->
    <input id="dd_default" />

    <ul id="targetEle">
        <li data-ej-text="Google"></li>
        <li data-ej-text="Bing"></li>
        <li data-ej-text="Yahoo"></li>
        <li data-ej-text="Ask"></li>
    </ul>

    <script>
        $("#dd_default").ejmDropDownList({ targetId: "targetEle", enablePersistence: true });
    </script>

fields

Fields used to bind the data source and it includes following field members to make data bind easier.

fields.checkBy boolean

Maps the check status for each option in DropDownList initially. This is an optional property used only for multi selection DropDownList.

Default Value

• null

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input type="text" id="dd_grouping" data-role="ejmdropdownlist" data-ej-datasource="window.listData" data-ej-enablemultiselect="true" data-ej-fields-text="name" data-ej-fields-checkby="check" />

    <script>
        window.listData = [{ name: "Australia", check: true },
                           { name: "Brazil" },
                           { name: "China", check: true },
                           { name: "India" },
                           { name: "Spain" }];
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <input type="text" id="dd_default" />
    <script>
        window.listData = [{ name: "Australia", check: true },
                           { name: "Brazil" },
                           { name: "China", check: true },
                           { name: "India" },
                           { name: "Spain" }];
    </script>

    <script>
        $("#dd_default").ejmDropDownList({ dataSource: window.listData, enableMultiSelect: true, fields: { text: "name", checkBy: "check" } });
    </script>

fields.groupBy string

Maps the group name in which each option belongs to in DropDownList. This is an optional property used only for grouped DropDownList.

Default Value

• null

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input type="text" id="dd_grouping" data-role="ejmdropdownlist" data-ej-datasource="window.listData" data-ej-fields-text="name" data-ej-fields-groupby="group" />

    <script>
        window.listData = [{ name: "Abarth", group: "Car" },
                         { name: "Audi", group: "Car" },
                         { name: "Texas", group: "Bike" },
                         { name: "Bajaj", group: "Bike" }];
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <input type="text" id="dd_default" />
    <script>
        window.listData = [{ name: "Abarth", group: "Car" },
                         { name: "Audi", group: "Car" },
                         { name: "Texas", group: "Bike" },
                         { name: "Bajaj", group: "Bike" }];
    </script>

    <script>
        $("#dd_default").ejmDropDownList({ dataSource: window.listData, fields: { text: "name", groupBy: "group" } });
    </script>

fields.image string

Maps image field from the data source. This is a required property while rendering the DropDownList from data source.

NOTE

Since field mapping depends on data source, the dataSource property must be set with a JSON data.

Default Value

• null

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input type="text" id="dd_grouping" data-role="ejmdropdownlist" data-ej-datasource="window.listData" data-ej-fields-text="name" data-ej-fields-image="image" />

    <script>
        window.listData = [{ name: "Australia", image: "Australia.png" },
                           { name: "Brazil", image: "Brazil.png" },
                           { name: "China", image: "china.png" },
                           { name: "India", image: "India.png" },
                           { name: "Spain", image: "Spain.png" }];
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <input type="text" id="dd_default" />
    <script>
        window.listData = [{ name: "Australia", image: "Australia.png" },
                           { name: "Brazil", image: "Brazil.png" },
                           { name: "China", image: "china.png" },
                           { name: "India", image: "India.png" },
                           { name: "Spain", image: "Spain.png" }];
    </script>

    <script>
        $("#dd_default").ejmDropDownList({ dataSource: window.listData, fields: { text: "name", image: "image" } });
    </script>

fields.text string

Maps text field from the data source. This is a required property while rendering the DropDownList from data source.

NOTE

Since field mapping depends on data source, the dataSource property must be set with a JSON data.

Default Value

• null

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input type="text" id="dd_grouping" data-role="ejmdropdownlist" data-ej-datasource="window.listData" data-ej-fields-text="name" />

    <script>
        window.listData = [{ name: "Australia" },
                           { name: "Brazil" },
                           { name: "China" },
                           { name: "India" },
                           { name: "Spain" }];
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <input type="text" id="dd_default" />
    <script>
        window.listData = [{ name: "Australia" },
                           { name: "Brazil" },
                           { name: "China" },
                           { name: "India" },
                           { name: "Spain" }];
    </script>

    <script>
        $("#dd_default").ejmDropDownList({ dataSource: window.listData, fields: { text: "name" } });
    </script>

fields.value string

Maps the value for each option from the data source. This is an optional property.

Default Value

• null

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input type="text" id="dd_grouping" data-role="ejmdropdownlist" data-ej-datasource="window.listData" data-ej-fields-text="name" data-ej-fields-value="name" />

    <script>
        window.listData = [{ name: "Australia" },
                           { name: "Brazil" },
                           { name: "China" },
                           { name: "India" },
                           { name: "Spain" }];
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <input type="text" id="dd_default" />
    <script>
        window.listData = [{ name: "Australia" },
                           { name: "Brazil" },
                           { name: "China" },
                           { name: "India" },
                           { name: "Spain" }];
    </script>

    <script>
        $("#dd_default").ejmDropDownList({ dataSource: window.listData, fields: { text: "name", value: "name" } });
    </script>

itemsCount number

Specifies how many items need to render initially from remote data source. You can set the items count using itemsCount property that represents the number of items to be fetched from the server on every AJAX request in virtual scrolling feature.

NOTE

This property works based on remote data source, hence the dataSource and fields.text properties should be set properly while rendering.

Default Value

• 0

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input type="text" id="query" data-role="ejmdropdownlist" data-ej-datasource="window.datasrc" data-ej-fields-text="ContactName" data-ej-itemscount="10"/>

    <script type="text/javascript">
        window.datasrc = ej.DataManager({
            url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Customers"
        });
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <input type="text" id="query" />

    <script type="text/javascript">
        window.datasrc = ej.DataManager({
            url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Customers"
        });
        $("#query").ejmDropDownList({ dataSource: window.datasrc, fields: { text: "ContactName" }, itemsCount: 10 });
    </script>

locale string

Specifies the localization to adopt the required language. In DropDownList control, localization support given for watermarkText property.

Default Value

• “en-US”

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="dd_default" data-role="ejmdropdownlist" data-ej-targetid="targetEle" data-ej-locale="zh-CN" />

    <ul id="targetEle">
        <li data-ej-text="Google"></li>
        <li data-ej-text="Bing"></li>
        <li data-ej-text="Yahoo"></li>
        <li data-ej-text="Ask"></li>
    </ul>

    <script>
        ej.mobile.DropDownList.Locale['zh-CN'] = {
            watermarkText: "選擇搜索引擎"
        };
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <input id="dd_default" />

    <ul id="targetEle">
        <li data-ej-text="Google"></li>
        <li data-ej-text="Bing"></li>
        <li data-ej-text="Yahoo"></li>
        <li data-ej-text="Ask"></li>
    </ul>

    <script>
        ej.mobile.DropDownList.Locale['zh-CN'] = {
            watermarkText: "選擇搜索引擎"
        };

        $("#dd_default").ejmDropDownList({ targetId: "targetEle", locale: "zh-CN" });
    </script>

popupHeight string

Specifies the height of the options list.

Default Value

• ”164px”

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="dd_default" data-role="ejmdropdownlist" data-ej-targetid="targetEle" data-ej-popupheight="205px" />

    <ul id="targetEle">
        <li data-ej-text="Google"></li>
        <li data-ej-text="Bing"></li>
        <li data-ej-text="Yahoo"></li>
        <li data-ej-text="Ask"></li>
        <li data-ej-text="Aol Search"></li>
        <li data-ej-text="Wow"></li>
    </ul>

HTML

<!-- Obtrusive way of rendering -->
    <input id="dd_default" />

    <ul id="targetEle">
        <li data-ej-text="Google"></li>
        <li data-ej-text="Bing"></li>
        <li data-ej-text="Yahoo"></li>
        <li data-ej-text="Ask"></li>
        <li data-ej-text="Aol Search"></li>
        <li data-ej-text="Wow"></li>
    </ul>

    <script>
        $("#dd_default").ejmDropDownList({ targetId: "targetEle", popupHeight: "205px" });
    </script>

popupWidth string

Specifies the width of the options list.

Default Value

• ”auto”

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="dd_default" data-role="ejmdropdownlist" data-ej-targetid="targetEle" data-ej-popupwidth="50%" />

    <ul id="targetEle">
        <li data-ej-text="Google"></li>
        <li data-ej-text="Bing"></li>
        <li data-ej-text="Yahoo"></li>
        <li data-ej-text="Ask"></li>
    </ul>

HTML

<!-- Obtrusive way of rendering -->
    <input id="dd_default" />

    <ul id="targetEle">
        <li data-ej-text="Google"></li>
        <li data-ej-text="Bing"></li>
        <li data-ej-text="Yahoo"></li>
        <li data-ej-text="Ask"></li>
    </ul>

    <script>
        $("#dd_default").ejmDropDownList({ targetId: "targetEle", popupWidth: "50%" });
    </script>

query string

This property used to filter data from remote data source.

Default Value

• null

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input type="text" id="dropdown" data-role="ejmdropdownlist" data-ej-datasource="window.data" data-ej-query="ej.Query().from('Orders').select('ShipCity').take(20)" data-ej-fields-text="ShipCity" />

    <script type="text/javascript">
        window.data = ej.DataManager({
            url: "http://mvc.syncfusion.com/Services/Northwnd.svc"
        });
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <input type="text" id="dropdown" />

    <script type="text/javascript">
        window.data = ej.DataManager({
            url: "http://mvc.syncfusion.com/Services/Northwnd.svc"
        });
        $("#dropdown").ejmDropDownList({ dataSource: window.data, fields: { text: "ShipCity" }, query: "ej.Query().from('Orders').select('ShipCity').take(20)" });
    </script>

readOnly boolean

Specifies whether the DropDownList to be rendered without interaction. If this set as true, you can’t focus the DropDownList textbox.

Default Value

• false

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="dd_default" data-role="ejmdropdownlist" data-ej-targetid="targetEle" data-ej-readonly="true" />

    <ul id="targetEle">
        <li data-ej-text="Google"></li>
        <li data-ej-text="Bing"></li>
        <li data-ej-text="Yahoo"></li>
        <li data-ej-text="Ask"></li>
    </ul>

HTML

<!-- Obtrusive way of rendering -->
    <input id="dd_default" />

    <ul id="targetEle">
        <li data-ej-text="Google"></li>
        <li data-ej-text="Bing"></li>
        <li data-ej-text="Yahoo"></li>
        <li data-ej-text="Ask"></li>
    </ul>

    <script>
        $("#dd_default").ejmDropDownList({ targetId: "targetEle", readOnly: true });
    </script>

renderMode enum

Specifies the rendering mode of the control. See RenderMode

Default Value

• “auto”

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="dd_default" data-role="ejmdropdownlist" data-ej-targetid="targetEle" data-ej-rendermode="android" />

    <ul id="targetEle">
        <li data-ej-text="Google"></li>
        <li data-ej-text="Bing"></li>
        <li data-ej-text="Yahoo"></li>
        <li data-ej-text="Ask"></li>
    </ul>

HTML

<!-- Obtrusive way of rendering -->
    <input id="dd_default" />

    <ul id="targetEle">
        <li data-ej-text="Google"></li>
        <li data-ej-text="Bing"></li>
        <li data-ej-text="Yahoo"></li>
        <li data-ej-text="Ask"></li>
    </ul>

    <script>
        $("#dd_default").ejmDropDownList({ targetId: "targetEle", renderMode: "android" });
    </script>

selectedItemIndex number

Specifies the Item Index which is selected initially. If the value -1 means, no item selected initially.

Default Value

• -1

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="dd_default" data-role="ejmdropdownlist" data-ej-targetid="targetEle" data-ej-selecteditemindex="1" />

    <ul id="targetEle">
        <li data-ej-text="Google"></li>
        <li data-ej-text="Bing"></li>
        <li data-ej-text="Yahoo"></li>
        <li data-ej-text="Ask"></li>
    </ul>

HTML

<!-- Obtrusive way of rendering -->
    <input id="dd_default" />

    <ul id="targetEle">
        <li data-ej-text="Google"></li>
        <li data-ej-text="Bing"></li>
        <li data-ej-text="Yahoo"></li>
        <li data-ej-text="Ask"></li>
    </ul>

    <script>
        $("#dd_default").ejmDropDownList({ targetId: "targetEle", selectedItemIndex: 1 });
    </script>

targetId string

Specifies the target element which consists the list of options to render DropDownList. Unless data source type rendering, DropDownList needs this property must.

Default Value

• null

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="dd_default" data-role="ejmdropdownlist" data-ej-targetid="targetEle" />

    <ul id="targetEle">
        <li data-ej-text="Google"></li>
        <li data-ej-text="Bing"></li>
        <li data-ej-text="Yahoo"></li>
        <li data-ej-text="Ask"></li>
    </ul>

HTML

<!-- Obtrusive way of rendering -->
    <input id="dd_default" />

    <ul id="targetEle">
        <li data-ej-text="Google"></li>
        <li data-ej-text="Bing"></li>
        <li data-ej-text="Yahoo"></li>
        <li data-ej-text="Ask"></li>
    </ul>

    <script>
        $("#dd_default").ejmDropDownList({ targetId: "targetEle" });
    </script>

templateId string

Specifies ID of the element that contains template contents.

NOTE

For DropDownList template rendering, jsrender.js file reference needed.

Default Value

• ””

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input type="text" id="template" data-role="ejmdropdownlist" data-ej-templateid="templatecontent" data-ej-datasource="window.listData" data-ej-fields-text="Name" />

    <script id="templatecontent" type="text/x-jsrender">
        <div class="contentdiv">
            <span class="name"></span> <span class="designation"></span>
        </div>
    </script>

    <script type="text/javascript">
        window.listData =
        [{ "Name": "Brooke", "Designation": "HR Assistant" },
        { "Name": "Claire", "Designation": "HR Manager" },
        { "Name": "Erik", "Designation": "Training Specialist" },
        { "Name": "Grace", "Designation": "Development Manager" },
        { "Name": "Jacob", "Designation": "Recruitment Manager" }];
    </script> 

    <style>
        .name {
            margin-left: 15px;
        }

        .designation {
            font-size: 13px;
            float: right;
            margin-right: 15px;
        }
    </style>

HTML

<!-- Obtrusive way of rendering -->
    <input type="text" id="template"/>

    <script id="templatecontent" type="text/x-jsrender">
        <div class="contentdiv">
            <span class="name"></span> <span class="designation"></span>
        </div>
    </script>

    <script type="text/javascript">
        window.listData =
        [{ "Name": "Brooke", "Designation": "HR Assistant" },
        { "Name": "Claire", "Designation": "HR Manager" },
        { "Name": "Erik", "Designation": "Training Specialist" },
        { "Name": "Grace", "Designation": "Development Manager" },
        { "Name": "Jacob", "Designation": "Recruitment Manager" }];

        $("#template").ejmDropDownList({ templateId: "templatecontent", dataSource: window.listData, fields: { text: "Name" } });

    </script> 

    <style>
        .name {
            margin-left: 15px;
        }

        .designation {
            font-size: 13px;
            float: right;
            margin-right: 15px;
        }
    </style>

watermarkText string

Specifies the DropDownList watermark text that to be shown on DropDownList textbox when it is empty

Default Value

• null

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="dd_default" data-role="ejmdropdownlist" data-ej-targetid="targetEle" data-ej-watermarktext="Select a search engine" />

    <ul id="targetEle">
        <li data-ej-text="Google"></li>
        <li data-ej-text="Bing"></li>
        <li data-ej-text="Yahoo"></li>
        <li data-ej-text="Ask"></li>
    </ul>

HTML

<!-- Obtrusive way of rendering -->
    <input id="dd_default" />

    <ul id="targetEle">
        <li data-ej-text="Google"></li>
        <li data-ej-text="Bing"></li>
        <li data-ej-text="Yahoo"></li>
        <li data-ej-text="Ask"></li>
    </ul>

    <script>
        $("#dd_default").ejmDropDownList({ targetId: "targetEle", watermarkText: "Select a search engine" });
    </script>

Methods

getSelectedItemValue()

To get the values of currently selected item/items in DropDownList.

Example

HTML

<input data-role="ejmbutton" type="button" data-ej-text="Get Value" data-ej-touchend="getvalue" />
    <input id="dd_default" data-role="ejmdropdownlist" data-ej-targetid="targetEle" />

    <ul id="targetEle">
        <li data-ej-text="Google"></li>
        <li data-ej-text="Bing"></li>
        <li data-ej-text="Yahoo"></li>
        <li data-ej-text="Ask"></li>
    </ul>

    <script>
        function getvalue() {
            var str = $("#dd_default").ejmDropDownList("getSelectedItemValue");
            alert("Currently selected value is: " + str);
        }
    </script>

getValue()

To get the current selected values from DropDownList textbox.

Example

HTML

<input data-role="ejmbutton" type="button" data-ej-text="Get Value" data-ej-touchend="getvalue" />
    <input id="dd_default" data-role="ejmdropdownlist" data-ej-targetid="targetEle" />

    <ul id="targetEle">
        <li data-ej-text="Google"></li>
        <li data-ej-text="Bing"></li>
        <li data-ej-text="Yahoo"></li>
        <li data-ej-text="Ask"></li>
    </ul>

    <script>
        function getvalue() {
            var str = $("#dd_default").ejmDropDownList("getValue");
            alert("Currently selected value is: " + str);
        }
    </script>

hidePopup()

To hide options list pop up.

Example

HTML

<input data-role="ejmbutton" type="button" data-ej-text="Hide options" data-ej-touchend="hide" />
    <input id="dd_default" data-role="ejmdropdownlist" data-ej-targetid="targetEle" />

    <ul id="targetEle">
        <li data-ej-text="Google"></li>
        <li data-ej-text="Bing"></li>
        <li data-ej-text="Yahoo"></li>
        <li data-ej-text="Ask"></li>
    </ul>

    <script>
        function hide() {
            $("#dd_default").ejmDropDownList("hidePopup");
        }
    </script>

selectItemByIndex()

To select an option by its index.

Example

HTML

<input data-role="ejmbutton" type="button" data-ej-text="Select 2nd indexed option" data-ej-touchend="select" />
    <input id="dd_default" data-role="ejmdropdownlist" data-ej-targetid="targetEle" />

    <ul id="targetEle">
        <li data-ej-text="Google"></li>
        <li data-ej-text="Bing"></li>
        <li data-ej-text="Yahoo"></li>
        <li data-ej-text="Ask"></li>
    </ul>

    <script>
        function select() {
            $("#dd_default").ejmDropDownList("selectItemByIndex", 2);
        }
    </script>

selectItemByIndices()

To select multiple option by its index array. This method works only for multi selection DropDownList. So enableMultiSelect property should be set as true.

Example

HTML

<input data-role="ejmbutton" type="button" data-ej-text="Select 2nd, 3rd indexed options" data-ej-touchend="select" />
    <input id="dd_default" data-role="ejmdropdownlist" data-ej-enablemultiselect="true" data-ej-targetid="targetEle" />

    <ul id="targetEle">
        <li data-ej-text="Google"></li>
        <li data-ej-text="Bing"></li>
        <li data-ej-text="Yahoo"></li>
        <li data-ej-text="Ask"></li>
    </ul>

    <script>
        function select() {
            $("#dd_default").ejmDropDownList("selectItemByIndices", [2, 3]);
        }
    </script>

showPopup()

To show options list pop up.

Example

HTML

<input data-role="ejmbutton" type="button" data-ej-text="Show options" data-ej-touchend="show" />
    <input id="dd_default" data-role="ejmdropdownlist" data-ej-targetid="targetEle" />

    <ul id="targetEle">
        <li data-ej-text="Google"></li>
        <li data-ej-text="Bing"></li>
        <li data-ej-text="Yahoo"></li>
        <li data-ej-text="Ask"></li>
    </ul>

    <script>
        function show() {
            $("#dd_default").ejmDropDownList("showPopup");
        }
    </script>

unselectItemByIndex()

To unselect an option by its index. This method works only for multi selection DropDownList. So enableMultiSelect property should be set as true.

Example

HTML

<input data-role="ejmbutton" type="button" data-ej-text="Select 2nd indexed option" data-ej-touchend="select" />
    <input data-role="ejmbutton" type="button" data-ej-text="Unselect 2nd indexed option" data-ej-touchend="unselect" />
    <input id="dd_default" data-role="ejmdropdownlist" data-ej-targetid="targetEle" data-ej-enablemultiselect="true" />

    <ul id="targetEle">
        <li data-ej-text="Google"></li>
        <li data-ej-text="Bing"></li>
        <li data-ej-text="Yahoo"></li>
        <li data-ej-text="Ask"></li>
    </ul>

    <script>
        function select() {
            $("#dd_default").ejmDropDownList("selectItemByIndex", 2);
        }
        function unselect() {
            $("#dd_default").ejmDropDownList("unselectItemByIndex", 2);
        }
    </script>

unselectItemByIndices()

To unselect multiple option by its index array. This method works only for multi selection DropDownList. So enableMultiSelect property should be set as true.

Example

HTML

<input data-role="ejmbutton" type="button" data-ej-text="Select 2nd, 3rd indexed options" data-ej-touchend="select" />
    <input data-role="ejmbutton" type="button" data-ej-text="Unselect 2nd, 3rd indexed options" data-ej-touchend="unselect" />
    <input id="dd_default" data-role="ejmdropdownlist" data-ej-enablemultiselect="true" data-ej-targetid="targetEle" />

    <ul id="targetEle">
        <li data-ej-text="Google"></li>
        <li data-ej-text="Bing"></li>
        <li data-ej-text="Yahoo"></li>
        <li data-ej-text="Ask"></li>
    </ul>

    <script>
        function select() {
            $("#dd_default").ejmDropDownList("selectItemByIndices", [2, 3]);
        }
        function unselect() {
            $("#dd_default").ejmDropDownList("unselectItemByIndices", [2, 3]);
        }
    </script>

Events

actionComplete

Event triggers when Ajax request succeeded and completed the processing of remote data source.

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

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input type="text" id="dropdown" data-role="ejmdropdownlist" data-ej-datasource="window.data" data-ej-query="ej.Query().from('Orders').select('ShipCity').take(20)" data-ej-fields-text="ShipCity" data-ej-actioncomplete="complete" />

    <script type="text/javascript">
        window.data = ej.DataManager({
            url: "http://mvc.syncfusion.com/Services/Northwnd.svc"
        });

        function complete(args) {
            //handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <input type="text" id="dropdown" />

    <script type="text/javascript">
        window.data = ej.DataManager({
            url: "http://mvc.syncfusion.com/Services/Northwnd.svc"
        });
        $("#dropdown").ejmDropDownList({ dataSource: window.data, fields: { text: "ShipCity" }, query: "ej.Query().from('Orders').select('ShipCity').take(20)", actionComplete: "complete" });

        function complete(args) {
            //handle the event
        }
    </script>

actionFailure

Event triggers when Ajax request failed for remote binding data source.

Name	Type	Description
argument	Object	Event parameters from DropDownList. Name Type Description cancel boolean Returns true if the event should be cancelled; otherwise, false. type string Returns the name of the event. model object Returns the model value of the control. error object Returns object which contains AJAX error information query object Returns the query for data retrieval

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input type="text" id="dropdown" data-role="ejmdropdownlist" data-ej-datasource="window.data" data-ej-query="ej.Query().from('Orders').select('ShipCity').take(20)" data-ej-fields-text="ShipCity" data-ej-actionfailure="error" />

    <script type="text/javascript">
        window.data = ej.DataManager({
            url: "http://mvc.syncfusion.com/Services/North.svc"
        });

        function error(args) {
            //handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <input type="text" id="dropdown" />

    <script type="text/javascript">
        window.data = ej.DataManager({
            url: "http://mvc.syncfusion.com/Services/North.svc"
        });
        $("#dropdown").ejmDropDownList({ dataSource: window.data, fields: { text: "ShipCity" }, query: "ej.Query().from('Orders').select('ShipCity').take(20)", actionFailure: "error" });
        function error(args) {
            //handle the event
        }
    </script>

actionSuccess

Event triggers when Ajax request succeeded for remote binding data source.

Name	Type	Description
argument	Object	Event parameters from DropDownList. Name Type Description cancel boolean Returns true if the event should be cancelled; otherwise, false. type string Returns the name of the event. model object Returns the model value of the control.

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input type="text" id="dropdown" data-role="ejmdropdownlist" data-ej-datasource="window.data" data-ej-query="ej.Query().from('Orders').select('ShipCity').take(20)" data-ej-fields-text="ShipCity" data-ej-actionsuccess="success" />

    <script type="text/javascript">
        window.data = ej.DataManager({
            url: "http://mvc.syncfusion.com/Services/Northwnd.svc"
        });

        function success(args) {
            //handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <input type="text" id="dropdown" />

    <script type="text/javascript">
        window.data = ej.DataManager({
            url: "http://mvc.syncfusion.com/Services/Northwnd.svc"
        });
        $("#dropdown").ejmDropDownList({ dataSource: window.data, fields: { text: "ShipCity" }, query: "ej.Query().from('Orders').select('ShipCity').take(20)", actionSuccess: "success" });

        function success(args) {
            //handle the event
        }
    </script>

change

Event triggers when newly selected option updated to the DropDownList textbox.

Name	Type	Description
argument	Object	Event parameters from DropDownList. Name Type Description cancel boolean Returns true if the event should be cancelled; otherwise, false. type string Returns the name of the event. model object Returns the model value of the control.

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="dd_default" data-role="ejmdropdownlist" data-ej-targetid="targetEle" data-ej-change="change"/>

    <ul id="targetEle">
        <li data-ej-text="Google"></li>
        <li data-ej-text="Bing"></li>
        <li data-ej-text="Yahoo"></li>
        <li data-ej-text="Ask"></li>
    </ul>

    <script>
        function change(args) {
            //handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <input id="dd_default" />

    <ul id="targetEle">
        <li data-ej-text="Google"></li>
        <li data-ej-text="Bing"></li>
        <li data-ej-text="Yahoo"></li>
        <li data-ej-text="Ask"></li>
    </ul>

    <script>
        $("#dd_default").ejmDropDownList({ targetId: "targetEle", change: "change"  });
        function change(args) {
            //handle the event
        }
    </script>

focusIn

Event triggers when focus in happens on the DropDownList textbox.

Name	Type	Description
argument	Object	Event parameters from DropDownList. Name Type Description cancel boolean Returns true if the event should be cancelled; otherwise, false. type string Returns the name of the event. model object Returns the model value of the control.

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="dd_default" data-role="ejmdropdownlist" data-ej-targetid="targetEle" data-ej-focusin="focusin"/>

    <ul id="targetEle">
        <li data-ej-text="Google"></li>
        <li data-ej-text="Bing"></li>
        <li data-ej-text="Yahoo"></li>
        <li data-ej-text="Ask"></li>
    </ul>

    <script>
        function focusin(args) {
            //handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <input id="dd_default" />

    <ul id="targetEle">
        <li data-ej-text="Google"></li>
        <li data-ej-text="Bing"></li>
        <li data-ej-text="Yahoo"></li>
        <li data-ej-text="Ask"></li>
    </ul>

    <script>
        $("#dd_default").ejmDropDownList({ targetId: "targetEle" , focusIn: "focusin"  });
        function focusin(args) {
            //handle the event
        }
    </script>

focusOut

Event triggers when focus out happens on the DropDownList textbox.

Name	Type	Description
argument	Object	Event parameters from DropDownList. Name Type Description cancel boolean Returns true if the event should be cancelled; otherwise, false. type string Returns the name of the event. model object Returns the model value of the control.

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="dd_default" data-role="ejmdropdownlist" data-ej-targetid="targetEle" data-ej-focusout="focusout"/>

    <ul id="targetEle">
        <li data-ej-text="Google"></li>
        <li data-ej-text="Bing"></li>
        <li data-ej-text="Yahoo"></li>
        <li data-ej-text="Ask"></li>
    </ul>

    <script>
        function focusout(args) {
            //handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <input id="dd_default" />

    <ul id="targetEle">
        <li data-ej-text="Google"></li>
        <li data-ej-text="Bing"></li>
        <li data-ej-text="Yahoo"></li>
        <li data-ej-text="Ask"></li>
    </ul>

    <script>
        $("#dd_default").ejmDropDownList({ targetId: "targetEle" , focusOut: "focusout"  });
        function focusout(args) {
            //handle the event
        }
    </script>

select

Event triggers when an option selected from the options list but not updated to the DropDownList textbox.

Name	Type	Description
argument	Object	Event parameters from DropDownList. Name Type Description cancel boolean Returns true if the event should be cancelled; otherwise, false. type string Returns the name of the event. model object Returns the model value of the control.

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="dd_default" data-role="ejmdropdownlist" data-ej-targetid="targetEle" data-ej-select="select"/>

    <ul id="targetEle">
        <li data-ej-text="Google"></li>
        <li data-ej-text="Bing"></li>
        <li data-ej-text="Yahoo"></li>
        <li data-ej-text="Ask"></li>
    </ul>

    <script>
        function select(args) {
            //handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <input id="dd_default" />

    <ul id="targetEle">
        <li data-ej-text="Google"></li>
        <li data-ej-text="Bing"></li>
        <li data-ej-text="Yahoo"></li>
        <li data-ej-text="Ask"></li>
    </ul>

    <script>
        $("#dd_default").ejmDropDownList({ targetId: "targetEle", select: "select"  });
        function select(args) {
            //handle the event
        }
    </script>