JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.common-material.min.css">
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.material.min.css">
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.material.mobile.min.css">
<select id="selected">
</select>
JavaScript
$(document).ready(function() {
$("#selected").kendoMultiSelect({
placeholder: "Select addresses...",
itemTemplate: '<span class="order-id">#= OrderID #</span> #= ShipName #, #= ShipCountry #',
dataTextField: "ShipName",
dataValueField: "OrderID",
height: 520,
virtual: {
itemHeight: 26,
valueMapper: function(options) {
$.ajax({
url: "//demos.telerik.com/kendo-ui/service/Orders/ValueMapper",
type: "GET",
dataType: "jsonp",
data: convertValues(options.value),
success: function (data) {
options.success(data);
}
})
}
},
dataSource: {
type: "odata",
transport: {
read: "//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
},
dataBound: function(e){
e.sender.open();
},
valuePrimitive: true,
value: [10265, 10289, 10415]
});
});
...