DropDownList - change optionLabel dynamically

by krustev

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>

<br/>

<input id="ddl2" />

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

/////------------------------

$("#ddl2").kendoDropDownList({
    optionLabel: "Select...",
    dataTextField: "Name",
    dataValueField: "Id",
    dataSource: {
        type: "odata",
        serverFiltering: true,
        filter: [{
            field: "Name",
            operator: "contains",
            value: "Star Wars: Episode VI: Return of the Jedi: Original Theatrical Version"
        },{
            field: "BoxArt.SmallUrl",
            operator: "neq",
            value: null
        }],
        transport: {
            read: "http://odata.netflix.com/Catalog/Titles"
        }
    }
});

$("#ddl2").data("kendoDropDownList").one("dataBound", function() {
   var ddl = this;

    if (ddl.dataSource.data().length === 1) {
       ddl.options.optionLabel = "";
    } else {
       ddl.options.optionLabel = "Select...";        
    }
    ddl.refresh();
});