ComboBox with deffered result

by krustev

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<input id="categories"/>
<input id="products"/>

JavaScript

$(document).ready(function() {
  
    var promises = [];
    
    var change = function() {
       this.defferred.resolve();   
    }
   
    var categories = $("#categories").kendoDropDownList({
        dataTextField: "CategoryName",
        dataValueField: "CategoryID",
        dataSource: {
            type: "odata",
            serverFiltering: true,
            transport: {
                read: "http://demos.kendoui.com/service/Northwind.svc/Categories"
            },
            requestStart: function() {
                this.defferred = $.Deferred();
                promises.push(this.defferred.promise());
            }
        }
    }).data("kendoDropDownList");
    
    var products = $("#products").kendoDropDownList({
        dataTextField: "ProductName",
        dataValueField: "ProductID",
        dataSource: {
            type: "odata",
            serverFiltering: true,
            transport: {
                read: "http://demos.kendoui.com/service/Northwind.svc/Products"
            },
            requestStart: function() {
               this.defferred = $.Deferred();
               promises.push(this.defferred.promise());
            }
        }
    }).data("kendoDropDownList");
    
    categories.dataSource.bind("change", change);
    products.dataSource.bind("change", change);
    
    $.when.apply(null, promises)
        .then(function() {
            console.log("done");
            console.log(categories.value());
            console.log(products.value());
        });
});