Kendo Demo Changed

by Jonatas Piazzi

HTML

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
<div class="demo-section k-content">
  <h4>Orders</h4>
  <input id="orders" style="width: 100%" />
</div>

JavaScript

$(document).ready(function() {
	$("#orders").kendoComboBox({
		template: '<span class="order-id">#= OrderID #</span> #= ShipName #, #= ShipCountry #',
		dataTextField: "ShipName",
		dataValueField: "OrderID",
		virtual: {
			itemHeight: 26,
			valueMapper: function(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);
					}
				})
			}
		},
		height: 290,
		dataSource: {
			type: "odata",
			transport: {
        read: function (options) {
          console.log(options);
          $.ajax({
            url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders",
            type: "GET",
            dataType: "jsonp",
            data: {
              $callback: "jQuery112308275137258967551_1487794971123",
              $inlinecount: "allpages",
              $format: "json",
              $top: "80"
            },
            success: function (result) {
              options.success(result);
            }
          });
        }
			},
			schema: {
				model: {
					fields: {
						OrderID: { type: "number" },
						Freight: { type: "number" },
						ShipName: { type: "string" },
						OrderDate: { type: "date" },
						ShipCity: { type: "string" }
					}
				}
			},
			pageSize: 80,
			serverPaging: true,
			serverFiltering: true
		}
	});
});

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;
}