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.
This question is related to
javascript
jquery
asp.net-mvc
kendo-ui
telerik
Seems there's an easier way, at least in Kendo UI v2015.2.624:
$('#myDropDownSelector').data('kendoDropDownList').search('Text value to find');
If there's not a match in the dropdown, Kendo appears to set the dropdown to an unselected value, which makes sense.
I couldn't get @Gang's answer to work, but if you swap his value
with search
, as above, we're golden.
It's possible to "natively" select by value:
dropdownlist.select(1);
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 underscores
var ddl = $('#Status_StatusId').data('kendoDropDownList');
ddl.select(function(dataItem) {
return dataItem.StatusName === "Active";
});
The Simplest way to do this is:
$("#Instrument").data('kendoDropDownList').value("A value");
Here is the JSFiddle example.
Source: Stackoverflow.com