API

Configuration API Functions

or
or the drop-down
or

Description
View Code
Configuration (8)
Methods (8)
Events (3)

The DropDownList widget displays flat data as 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 ComboBox.

Getting Started

There are two basic ways to create a DropDownList:

From a basic HTML input element, using data binding to define the list items
From a HTML select element, using HTML to define the list items

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

Creating a dropdownlist from existing input HTML element

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

DropDownList initialization

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

Creating a dropdownlist from existing select HTML element

<!-- HTML -->
<select id="dropdownlist">
    <option>Item 1</option>
    <option>Item 2</option>
    <option>Item 3</option>
</select>

DropDownList initialization

  $(document).ready(function(){
      $("#dropdownlist").kendDropDownList();
  });

Binding to Data

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

Binding to a remote OData service

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

Customizing Item Templates

DropDownList leverages Kendo UI high-performance Templates to give you complete control over item rendering. For a complete overview of Kendo UI Template capabilities and syntax, please review the Kendo UI Template component 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",
                  severFiltering: true,
                  serverPaging: true,
                  pageSize: 20,
                  transport: {
                      read: "http://odata.netflix.com/Catalog/Titles"
                  }
              }
          });
      });
  </script>

No code

autoBind: Boolean(default: true)

Controls whether to bind the component on initialization.

dataSource: kendo.data.DataSource|Object

Instance of DataSource or the data that the DropDownList will be bound to.

dataTextField: String(default: "text")

Sets the field of the data item that provides the text content of the list items.

dataValueField: String(default: "value")

Sets the field of the data item that provides the value content of the list items.

delay: Number(default: 500)

Specifies the delay in ms before the search text typed by the end user is cleared.

enable: Boolean(default: true)

Controls whether the DropDownList should be initially enabled.

height: Number(default: 200)

Define the height of the drop-down list in pixels.

index: Number(default: 0)

Defines the initial selected item.

close ()
Closes the drop-down list.
Example
```
dropdownlist.close();
```
enable (enable)

Enables/disables the dropdownlist component

Parameters

enable: Boolean

Desired state
open ()
Opens the drop-down list.
Example
```
dropdownlist.open();
```

search (word)

Selects item, which starts with the provided parameter.

Example

var dropdownlist = $("#dropdownlist").data("kendoDropDownList");
// Selects item which starts with "In".
autocomplete.search("In");

Parameters

word: string: The search value.

select (li)

Selects drop-down list item and sets the value and the text of the dropdownlist.

Example

var dropdownlist = $("#dropdownlist").data("kendoDropDownList");
// selects by jQuery object
dropdownlist.select(dropdownlist.ul.children().eq(0));
// selects by index
dropdownlist.select(1);
// selects item if its text is equal to "test" using predicate function
dropdownlist.select(function(dataItem) {
    return dataItem.text === "test";
});

Parameters

li: jQueryObject | Number | Function: LI element or index of the item or predicate function, which defines the item that should be selected.

text (text) : String
Gets/Sets the text of the dropdownlist.
Example
```
var dropdownlist = $("#dropdownlist").data("kendoDropDownList");
// get the text of the dropdownlist.
var text = dropdownlist.text();
```
Parameters

text: String

The text to set.

Returns

String The text of the dropdownlist.
toggle (toggle)
Toggles the drop-down list between opened and closed state.
Example
```
var dropdownlist = $("#dropdownlist").data("kendoDropDownList");
// toggles the open state of the drop-down list.
dropdownlist.toggle();
```
Parameters

toggle: Boolean

Defines the whether to open/close the drop-down list.
value (value) : String
Gets/Sets the value of the dropdownlist. The value will not be set if there is no item with such value. If value is undefined, text of the data item is used.
Example
```
var dropdownlist = $("#dropdownlist").data("kendoDropDownList");
// get the value of the dropdownlist.
var value = dropdownlist.value();
// set the value of the dropdownlist.
dropdownlist.value("1"); //looks for item which has value "1"
```
Parameters

value: String

The value to set.

Returns

String The value of the dropdownlist.

change

Fires when the value has been changed.

close

Fires when the drop-down list is closed

open

Fires when the drop-down list is opened

Kendo

Skin

Getting Started

Creating a dropdownlist from existing input HTML element

DropDownList initialization

Creating a dropdownlist from existing select HTML element

DropDownList initialization

Binding to Data

Binding to a remote OData service

Customizing Item Templates

Basic item template customization

Example

Parameters

Example

Example

Parameters

Example

Parameters

Example

Parameters

Example

Parameters

Example

Parameters