A DropDownList displays a list of values and allows the selection of a single value from the list. It is a richer version of the standard HTML select, providing support for local and remote data binding, item templates, and configurable options for controlling the list behavior.

If you want to allow user input, use the Kendo UI dropdownlist.

Getting Started

There are two basic ways to create a DropDownList:

  1. From a input element, using data binding to define the list items
  2. From a select element, using HTML to define the list items

Regardless of the initialization technique, the resulting DropDownList will look and function identically.

Creating a dropdownlist from existing input HTML element

<input id="dropDownList" />

Initialization of a DropDownList should occur after the DOM is fully loaded. It is recommended that initialization the DropDownList occur within a handler is provided to $(document).ready().

Initialize a DropDownList using a selector within $(document).ready()

$(document).ready(function() {
    $("#dropDownList").kendoDropDownList({
        dataTextField: "text",
        dataValueField: "value",
        dataSource: [
            { text: "Item1", value: "1" },
            { text: "Item2", value: "2" }
        ]
    });
});

Create a DropDownList from existing select HTML element with a defined structure

<select id="dropDownList">
    <option>Item 1</option>
    <option>Item 2</option>
    <option>Item 3</option>
</select>

<script>
   $(document).ready(function(){
      $("#dropDownList").kendoDropDownList();
   });
</script>

Binding to Data

A DropDownList can be bound to both local arrays and remote data via the DataSource component. Arrays are appropriate for limited value options while remote data binding is better suited for larger data sets. With remote binding, options will be loaded on-demand, similar to an AutoComplete.

Binding to a remote OData service

$(document).ready(function() {
    $("#titles").kendoDropDownList({
        index: 0,
        dataTextField: "Name",
        dataValueField: "Id",
        filter: "contains",
        dataSource: {
            type: "odata",
            serverFiltering: true,
            serverPaging: true,
            pageSize: 20,
            transport: {
                read: "http://odata.netflix.com/Catalog/Titles"
            }
        }
    });
});

Customizing Item Templates

A DropDownList leverages templates, providing an ability to control item rendering. For a complete overview of the template capabilities and syntax of Kendo UI Web, please review the Kendo UI Template demos and documentation.

Basic item template customization

<!-- HTML -->
<input id="titles" />

<!-- Template -->
<script id="scriptTemplate" type="text/x-kendo-template">
    # if (data.BoxArt.SmallUrl) { #
        <img src="${ data.BoxArt.SmallUrl }" alt="${ data.Name }" />Title:${ data.Name }, Year: ${ data.Name }
    # } else { #
        <img alt="${ data.Name }" />Title:${ data.Name }, Year: ${ data.Name }
    # } #
</script>

<!-- DropDownList initialization -->
<script type="text/javascript">
    $(document).ready(function() {
        $("#titles").kendoDropDownList({
            autoBind: false,
            dataTextField: "Name",
            dataValueField: "Id",
            template: $("#scriptTemplate").html(),
            dataSource: {
                type: "odata",
                serverFiltering: true,
                serverPaging: true,
                pageSize: 20,
                transport: {
                    read: "http://odata.netflix.com/Catalog/Titles"
                }
            }
        });
    });
</script>

Accessing an Existing DropDownList

You can reference an existing DropDownList instance via jQuery.data(). Once a reference has been established, you can use the API to control its behavior.

Accessing an existing DropDownList instance

var dropDownList = $("#dropDownList").data("kendoDropDownList");