Define Virtual Configuration Declaratively
The following example demonstrates how to define the virtual
option of the Kendo UI ComboBox widget by using the data-*
attribute.
<div id="example">
<div class="demo-section k-header">
<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({
order: "10548",
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>
<style>
html {
overflow: hidden;
}
.demo-section {
width: 400px;
}
.demo-section h2 {
text-transform: uppercase;
font-size: 1.2em;
margin-bottom: 10px;
}
.order-id {
display: inline-block;
min-width: 60px;
}
</style>
</div>
See Also
- ComboBox JavaScript API Reference
- How to Bypass Boundary Detection
- How to Configure Deferred Value Binding
- How to Expand ComboBox Located in Bootstrap Layout
- How to Implement Cascading with Local Data
- How to Make Visible Input Readonly
- How to Open ComboBox When onFocus is Triggered
- How to Prevent Adding Custom Values
- How to Select Items on Tab
- How to Underline Matched Search
For more runnable examples on the Kendo UI ComboBox, check its how-to articles.