Kendo UI Combo Box Reset Value

Question

I'm using the Kendo UI ComboBoxes in cascade mode to build up a filter that I wish to apply.

How do I clear/reset the value of a Kendo UI ComboBox?

I've tried:

$("#comboBox").data("kendoComboBox").val('');
$("#comboBox").data("kendoComboBox").select('');
$("#comboBox").data("kendoComboBox").select(null);

all to no avail. The project is an MVC4 app using the Razor engine and the code is basically the same as the Kendo UI example.

score 19 · Accepted Answer · answered Jun 28 '13 at 17:18

19

If you want to use select the you need to provide the index of the option. Otherwise use text

$("#comboBox").data("kendoComboBox").text('');

Example: http://jsfiddle.net/OnaBai/4aHbH/

answered Jun 28 '13 at 17:18

OnaBai

40,767
6
96
125

Thank you, exactly what I wanted. Thank you for taking the extra time to provide the example. – ciantrius Jun 28 '13 at 18:04
1

I have been running into bugginess in the Kendo ComboBox where it sometimes stops responding properly to ".value(text/value)" and ".select(1)" but it still responds to ".text('xx')". (perfectly normal api calls which normally work stop working) I set the value on the input before constructing the widget now which always works. – Curtis Yallop Aug 10 '13 at 00:00
This doesn't work.. try this.. select first value.. and click on reset. now, again select first value cascade box does not popup – Sagar Kulkarni Apr 30 '14 at 12:40

Héctor Espí Hernández · Answer 2 · 2014-07-15T10:29:41.637

I had to create my custom clear function extending involved Kendo UI controls like the following:

kendo.ui.ComboBox.fn.clear = kendo.ui.AutoComplete.fn.clear = function () {
    if (!!this.text) {
        this.text("");
    }
    if (!!this.value) {
        this.value(null);
    }
    this._prev = this.oldIndex = this._old = this._last = undefined;
};

Then you can call $("mycontrol").data("kendoAutoComplete").clear(); to clear the control and have the change handler invoked when doing the following: select an item, clear and select again the previous item.

doglobster · Answer 3 · 2014-09-29T09:12:38.297

1

This also works:

$("#comboBox").data("kendoComboBox").value(null);

edited Sep 29 '14 at 09:12

answered Jan 24 '14 at 11:20

doglobster

116
8

score 1 · Answer 4 · answered Aug 04 '15 at 19:05

I've found these options below seem to work to reset the kendo combo box. You can run $("#comboBox").data("kendoComboBox").select() after trying two below and you should see a value returned of -1, indicating its reset.

$("#comboBox").data("kendoComboBox").value('')
$('#comboBox').data().kendoComboBox.value('')
$("#comboBox").data("kendoComboBox").select(-1)
$('#comboBox').data().kendoComboBox.select(-1)

Kendo UI Combo Box Reset Value

4 Answers4