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.

score 82 · Accepted Answer · edited Jan 29 '14 at 22:54

82

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

edited Jan 29 '14 at 22:54

animuson

53,861
28
137
147

answered Apr 19 '13 at 14:19

OnaBai

40,767
6
96
125

1

selecting by index works fine but the second solution doesn't work. I tried alert(dataItem.text) in the function before return statement but it says undefined. – xkcd Apr 19 '13 at 14:40
Sorry, I've already edited the answer, it should say `dataItem.symbol`. See JS Fiddle http://jsfiddle.net/OnaBai/mRmNJ/ – OnaBai Apr 19 '13 at 14:43
2

@anilca If you don't know the Index, you can also select by Text (dataItem.Text) – Justin Oct 14 '13 at 21:25
is it possible to use angularjs in updating the selected item? – Kim Honoridez Mar 09 '15 at 05:16
Not work for me, when i tried to get the value after selecting by both methods, the value is null – R K Sharma Feb 12 '16 at 15:27
4

If your KendoDropdown has a `change` event, you must trigger it manually by calling `dropdownlist.trigger("change");` after calling `select`. – Andrew Mar 30 '17 at 17:08

Gang · Answer 2 · 2016-08-04T15:03:12.047

33

The Simplest way to do this is:

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

Here is the JSFiddle example.

edited Aug 04 '16 at 15:03

answered Feb 16 '16 at 16:02

Gang

418
5
7

1

I get "Uncaught TypeError: Cannot read property 'value' of undefined" error in my project – Ömür Bilgili Mar 16 '18 at 12:39
@ÖmürBilgili You'll probably need to check for undefined first: `var inst = $("#Instrument").data('kendoDropDownList'); if (inst) { inst.value("A value"); }` – Jason Jun 04 '19 at 00:51

score 7 · Answer 3 · edited Apr 21 '15 at 17:01

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";
});

score 7 · Answer 4 · edited May 23 '17 at 12:18

7

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.

edited May 23 '17 at 12:18

Community

1
1

answered May 27 '16 at 12:26

ruffin

16,507
9
88
138

I made an example and it worked: http://jsfiddle.net/gangwu6/vjc39eLL/2/ I tried both .search('A value') and .value("A value") they both worked and I did not see any differences. – Gang Aug 04 '16 at 15:08
I can't get this to work when my ddl values have a comma in them. For example, if the drop down has "Horseface, USA" and I search for "USA" results in nothing being found. – redwards510 Nov 14 '16 at 23:08
@redwards510 I don't have an active Kendo project right now, but I iirc **you have to have an *exact* match for `search`**. Poorly named function, I'd agree. For your case, you'd need to write your own search routine using the raw `data`, find an exact match [again, through your own search routine], then select-via-`search`-function the exact match you've found. Sound good? – ruffin Nov 15 '16 at 13:48
1

Yes, the not-so-obvious "search" works, thanks. [And why would I have the index, as described previously on this page. I didn't implement Kendo, just using the widgets...] – Gerry Aug 04 '17 at 21:15

score 3 · Answer 5 · edited Dec 13 '16 at 16:09

3

It's possible to "natively" select by value:

dropdownlist.select(1);

edited Dec 13 '16 at 16:09

Zoltan Toth

46,981
12
120
134

answered Sep 03 '15 at 10:27

HSM

91
1
1
7

2

this doesn't work as expected with kendo. It won't trigger events and therefore won't update the display. – John Lord Oct 15 '19 at 21:55

Change selected value of kendo ui dropdownlist

5 Answers5

Linked