Data Binding
The MultiColumnComboBox enables you to bind it to local data arrays and remote data services.
When you configure the local or remote data source of the MultiColumnComboBox, enabling the paging functionality and setting
pageSizeis efficient only when you use paging together with virtualization. In all other cases, do not enable the paging functionality or set thepageSize.
Binding to Local Data
Locally defined values are useful for limited value options.
To initialize the MultiColumnComboBox by binding the widget to a local data array and utilizing the <input> element, use the Data Source component which is an abstraction for local and remote data.
The following example demonstrates how to initialize the MultiColumnComboBox through the <input> element.
<input id="comboBox" />
<script>
$(document).ready(function(){
$("#comboBox").kendoMultiColumnComboBox({
dataTextField: "text",
dataValueField: "value",
dataSource: [
{ text: "Item1", value: "1" },
{ text: "Item2", value: "2" }
],
columns: [
{ field: "text", title: "Text" },
{ field: "value", title: "Value" }
]
});
});
</script>
Binding to Remote Data
Remote data binding is useful for larger datasets so that the items are loaded on demand upon display. To initialize the ComboBox by binding the widget to remote data arrays and utilizing the <input> element, use the Data Source component. You can use the DataSource for serving data from various data services such as XML, JSON, and JSONP.
<input id="comboBox" />
<script>
$(document).ready(function() {
$("#comboBox").kendoMultiColumnComboBox({
index: 0,
dataTextField: "ProductName",
dataValueField: "ProductID",
columns: [
{ field: "ProductName", title: "ProductName" },
{ field: "ProductID", title: "ProductID" }
],
dataSource: {
transport: {
read: {
dataType: "jsonp",
url: "https://demos.telerik.com/kendo-ui/service/Products"
}
}
}
});
});
</script>