Virtualize ComboBox with MVVM
Environment
Product | Progress® Kendo UI® MVVM Architecture |
Operating System | Windows 10 64bit |
Browser | All |
Description
How can I implement virtualization for the ComboBox in an MVVM-binding scenario?
Solution
Specify the itemHeight
and the valueMapper
in the data-virtual
attribute of the ComboBox.
<div id="example">
<h4>Search for shipping name</h4>
<input id="orders" style="width: 400px"
data-role="combobox"
data-bind="value: order, source: source"
data-text-field="ShipName"
data-value-field="OrderID"
data-filter="contains"
data-virtual="{itemHeight:26,valueMapper:orderValueMapper}"
data-height="520"/>
</div>
<script>
$(document).ready(function() {
var model = kendo.observable({
source: new kendo.data.DataSource({
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 80,
serverPaging: true,
serverFiltering: true
})
});
kendo.bind($(document.body), model);
});
function orderValueMapper(options) {
$.ajax({
url: "https://demos.telerik.com/kendo-ui/service/Orders/ValueMapper",
type: "GET",
dataType: "jsonp",
data: convertValues(options.value),
success: function (data) {
options.success(data);
}
})
}
function convertValues(value) {
var data = {};
value = $.isArray(value) ? value : [value];
for (var idx = 0; idx < value.length; idx++) {
data["values[" + idx + "]"] = value[idx];
}
return data;
}
</script>