Kendo Dropdown optionLabel changes selected value

Question

I am wondering if anyone can shed some light on why setting an option label for a Kendo Dropdown affects the selected value, and how this can be avoided.

The setup is that I have a select list that's populated by ASP code. The selected value is set in the codebehind.

Everything works fine unless I specify an option label. When I do that, the selected value changes. Here it is in action:

console.log("Value before: " + $("#dropdownlist").val());

    $("#dropdownlist").kendoDropDownList({
       optionLabel: {
            text: "-- Select An Option --",
            value: 0
       }
    });

console.log("Value before: " + $("#dropdownlist").val());

Console output:

Value before: 2
Value after: 1

When I start with value = 3, the optionLabel sets the new selected value to 2.

Thanks in advance for your help.

Could you show actual code in JSFiddler or JSBin? it seems to me that the code in the question is not the one producing the output (likely some error in the cut&paste process) — OnaBai
In your example, you are outputting selected values from two different controls (legalCountryID and dropdownlist) ? And why do you set selected value before initializing Kendo control. Do the control first and then select the selected value, then you won't have this problem. As well as you should use .value() instead of .val() once the Kendo dropdown is up and running. eg. $("#dropdown").data("kendoDropDownList").value() — Vojtiik
Thanks for the comments. I'm sorry about the typo - I am actually referencing the same control. As for setting selected value, I'm doing that because it needs to be set on the server side. — christok

Vojtiik Vojtiik · Accepted Answer · 2013-07-16T15:21:32

Here is a fiddle http://jsfiddle.net/vojtiik/VZRwf/1/ showing that the ddl maintains the selection. My console says 3, 3, 3. The reason why you getting different values is because your first log refers to different control.

var $select = $('#size');

$select.val(3);

console.log($select.val()); // 3
var ddl = $('#size').kendoDropDownList({
    optionLabel: {
        text: "-- Select An Option --",
        value: 0
    }
}).data("kendoDropDownList");

console.log($select.val()); // 3
console.log(ddl.value()); // 3

Kendo Dropdown optionLabel changes selected value

1 Answers