Data Binding
The ListBox provides options for binding it to local data arrays and remote data services.
Binding to Local Data
When you use complex data objects, use the dataTextField and dataValueField properties to notify the widget of your preferred binding behavior.
<select id="listbox"></select>
<!-- Initialize the ListBox -->
<script>
$(document).ready(function(){
$("#listbox").kendoListBox({
dataSource: [
{ name: "Jane Doe" },
{ name: "John Doe" }
],
template: "<div>#:name#</div>",
toolbar: {
tools: [ "moveUp", "moveDown", "remove" ]
}
});
});
</script>
Binding to Remote Data
The following example demonstrates how to bind the ListBox to a remote data service.
<select id="listbox"></select>
<!-- Initialize the ListBox -->
<script>
$(document).ready(function(){
$("#listbox").kendoListBox({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
}
},
dataTextField: "ContactName",
dataValueField: "CustomerID",
toolbar: {
tools: [ "moveUp", "moveDown", "remove" ]
}
});
});
</script>