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.

Answer 1

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)

Answer 2

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/

Answer 3

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.