Information
Open the DropDownList to see the customized appearance of the items.
- 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
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
-
close()Closes the drop-down list.Example
dropdownlist.close(); -
enable(enable)Enables/disables the dropdownlist componentParameters
-
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) : StringGets/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) : StringGets/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.
-