Data Binding
The DropDownList enables you to initialize it by using the <input> or the <select> element after you bind it to local data arrays or remote data services.
For more information on initializing the DropDownList through the <option> tag of an existing <select> element, refer to the DropDownList Overview article.
When you configure the local or remote data source of the DropDownList, enabling the paging functionality and setting
pageSizeis efficient only when you use paging together with virtualization. In all other cases, enabling paging and settingpageSizeis regarded as incorrect configuration.
Binding to Local Data
To initialize the DropDownList by binding the widget to a local data array and then utilizing the <input> or the <select> element, use the Kendo UI Data Source. The Data Source component is an abstraction for local and remote data. Local arrays are suitable for limited value options.
<input id="dropdownlist">
<script>
$(document).ready(function() {
$("#dropdownlist").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: [
{ text: "Item1", value: "1" },
{ text: "Item2", value: "2" }
]
});
});
</script>
Binding to Remote Data
To initialize the DropDownList by binding the widget to remote data arrays and then utilizing the <input> or the <select> element, use the Kendo UI Data Source. The Data Source component is an abstraction for local and remote data. Remote data binding is suitable for larger data sets so that items can be loaded on demand when they are displayed. You can use the Data Source for serving data from a variety of data services such as XML, JSON, and JSONP. For a complete example, refer to the demo on binding the DropDownList to remote data.
<input id="dropdownlist">
<script>
$(document).ready(function() {
$("#dropdownlist").kendoDropDownList({
index: 0,
dataTextField: "ContactName",
dataValueField: "CustomerID",
dataSource: {
type: "odata", // specifies data protocol
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
}
}
});
});
</script>