DropDownList Overview
Edit this docA DropDownList displays a list of values and allows the selection of a single value from the
list.Custom values may not be entered via keyboard input.If you wish permit keyboard input - that is, custom
values are allowed - use the ComboBox.
Getting Started
There are two ways to create a DropDownList:
- From a <select> element with HTML to define the list items
- From an <input> element with databinding to define the listitems
A DropDownList will look and operate consistently regardless of the way in which it was
created.
<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().
Widget copies any styles and CSS classes from the input element to the wrapper element.
$(document).ready(function() {
$("#dropDownList").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: [
{ text: "Item1", value: "1" },
{ text: "Item2", value: "2" }
]
});
});
<select id="dropDownList">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</select>
<script>
$(document).ready(function(){
$("#dropDownList").kendoDropDownList();
});
</script>
The DropDownList can be bound to both local arrays and remote data via the
DataSource component; an abstraction for local and
remote data. Local arrays are appropriate for limited value options, while remote data binding is better for
larger data sets. With remote data-binding, items will be loaded on-demand; when they are displayed.
$(document).ready(function() {
$("#titles").kendoDropDownList({
index: 0,
dataTextField: "Name",
dataValueField: "Id",
dataSource: {
type: "odata",
transport: {
read: "http://odata.netflix.com/Catalog/Titles"
}
}
});
});
The DropDownList uses Kendo UI templates to enable you to control how items are rendered. For
a detailed description of the capabilities and syntax of the Kendo UI templates, please refer to the
documentation.
<!-- 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",
transport: {
read: "http://odata.netflix.com/Catalog/Titles"
}
}
});
});
</script>
Width of widget's drop-down list can be changed via jQuery width method.
var dropdownlist = $("#dropdown").data("kendoDropDownList");
// set width of the drop-down list
dropdownlist.list.width(400);
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.
var dropDownList = $("#dropDownList").data("kendoDropDownList");