DropDownList - change optionLabel dynamically

by chanaka1

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<input id="ddl" />
<button id="optionLabel">Add option label</button>
<button id="text">Change text</button>
<button id="remove">Remove</button>

JavaScript

$("#ddl").kendoDropDownList({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: [
        { text: "GB1", value: 1 },
        { text: "GB2", value: 2 },
        { text: "GB3", value: 3 },
        { text: "GB4", value: 4 }
    ]
});

var ddl = $("#ddl").data("kendoDropDownList");

$("#optionLabel").click(function() {
    ddl.options.optionLabel = "Select item";
    ddl.refresh();
    ddl.select(0);
});

$("#text").click(function() {
    ddl.text("Text is changed");
});

$("#remove").click(function() {
    var data = ddl.dataSource.data();
    
    data.shift();
    
    ddl.dataSource
       .one("change", function() {
           ddl.value(ddl.value());
       })
       .data(data);
});