Change selected value of kendo ui dropdownlist

Question

I have a kendo ui dropdownlist in my view:

$("#Instrument").kendoDropDownList({     dataTextField: "symbol",     dataValueField: "symbol",     dataSource: data,     index: 0 }); 

How can I change the selected value of it using jQuery? I tried:

$("#Instrument").val(symbol); 

But it doesn't work as expected.

Answer 1

You have to use Kendo UI DropDownList select method (documentation in here).

Basically you should:

// get a reference to the dropdown list var dropdownlist = $("#Instrument").data("kendoDropDownList"); 

If you know the index you can use:

// selects by index dropdownlist.select(1); 

If not, use:

// selects item if its text is equal to "test" using predicate function dropdownlist.select(function(dataItem) {     return dataItem.symbol === "test"; }); 

JSFiddle example here

Answer 2

The Simplest way to do this is:

$("#Instrument").data('kendoDropDownList').value("A value"); 

Here is the JSFiddle example.