Refresh DropDownList

by krustev

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<input id="customers" />
<button id="refresh">refresh</button>
<span id="result"></span>

JavaScript

function randomData() {
    var length = Math.floor(Math.random() * 11),
        idx = 0,
        data = [];
    
    for (;idx < length; idx++) {
        data.push({
            "ID": idx,
            "Title": "Title" + idx
        });            
    }
    
    return data;
}

$("#customers").kendoDropDownList({
    optionLabel: "Select customer...",
    dataTextField: "Title",
    dataValueField: "ID",
    //JSON property name to use
    dataSource: {
        transport: {
            read: {
                url: "/echo/json/",
                //using jsfiddle echo service to simulate JSON endpoint
                dataType: "json",
                type: "POST",
                data: function() {
                    // /echo/json/ echoes the JSON which you pass as an argument
                    return { json: JSON.stringify(randomData()) };
                }
            }
        }
    }
});

$("#refresh").click(function () {
    $("#customers").data("kendoDropDownList")
                   .dataSource
                   .one("change", function() {
                       $("#result").html("Items length: " + this.data().length);     
                   })
                   .read();
});