Comboboxes with lazy loading

by basmaat

HTML

<script src="http://cdn.kendostatic.com/2011.3.1007/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1007/styles/kendo.kendo.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1007/styles/kendo.common.min.css">
supplier1: <input id="suppliers1" disabled="disabled"/>
supplier2: <input id="suppliers2" disabled="disabled"/>

<button id="load">Load</button>
<button id="getDataItem" disabled="disabled">Get Data Item</button>

JavaScript

var dataSource = new kendo.data.DataSource({
    type: "odata",
    serverFiltering: true,
    transport: {
        read: ""
    }
});

var combobox1 = $("#suppliers1").kendoComboBox({
    dataTextField: "CompanyName",
    dataValueField: "SupplierID",
    dataSource: dataSource,
    autoBind: false
}).data("kendoComboBox");

var combobox2 = $("#suppliers2").kendoComboBox({
    dataTextField: "CompanyName",
    dataValueField: "SupplierID",
    dataSource: dataSource,
    autoBind: false
}).data("kendoComboBox");

$("#load").click(function() {
   $("#getDataItem").attr("disabled", false);
    
   combobox1.enable();
   combobox2.enable();
   $("#getDataItem").attr("disabled", false);
   dataSource.transport.options.read.url = "http://services.odata.org/Northwind/Northwind.svc/Suppliers";
   dataSource.fetch();
});

$("#getDataItem").click(function() {
   var selectedItem = combobox1._current;
   if (selectedItem) {
      var dataItem = combobox1.dataSource.view()[selectedItem.index()];
      console.log(dataItem);
   }
});