Change selected value of kendo ui dropdownlist

anilca picture anilca · Apr 19, 2013 · Viewed 135.4k times · Source

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

OnaBai picture OnaBai · Apr 19, 2013

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