Change selected value of kendo ui dropdownlist Change selected value of kendo ui dropdownlist jquery jquery

Change selected value of kendo ui dropdownlist


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

Basically you should:

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

If you know the index you can use:

// selects by indexdropdownlist.select(1);

If not, use:

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

JSFiddle example here


The Simplest way to do this is:

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

Here is the JSFiddle example.


Since this is one of the top search results for questions related to this I felt it was worth mentioning how you can make this work with Kendo().DropDownListFor() as well.

Everything is the same as with OnaBai's post except for how you select the item based off of its text and your selector.

To do that you would swap out dataItem.symbol for dataItem.[DataTextFieldName]. Whatever model field you used for .DataTextField() is what you will be comparing against.

@(Html.Kendo().DropDownListFor(model => model.Status.StatusId)    .Name("Status.StatusId")    .DataTextField("StatusName")    .DataValueField("StatusId")    .BindTo(...))//So that your ViewModel gets bound properly on the post, naming is a bit //different and as such you need to replace the periods with underscoresvar ddl = $('#Status_StatusId').data('kendoDropDownList');    ddl.select(function(dataItem) {    return dataItem.StatusName === "Active";});