CODEWITHSUNDEEP
jquerykendo-ui
BMills
BMills

Reputation: 901

removing a kendoComboBox

I'm having a problem with a combobox that is created when a modal is opened, then if the user clicks out the modal and clicks it again, it creates another comboBox on top of the old one so it looks like this:

enter image description here

In the documentation it talks of a destroy method, which is successfully running when I close the modal:

  $('#team1player_' + i).data('kendoComboBox').destroy();        
  $('#team1player_' + i).empty();

However it is still creating one on top of each other. What am I missing?

Upvotes: 1

Views: 745

Answers (1)

dimodi
dimodi

Reputation: 4139

The destroy() method does not remove generated DOM elements, except detached popups. That is why manual removal of DOM elements may be needed.

On the other hand, you are currently trying to empty the ComboBox element, which has no effect, because this element is an <input> or <select>, so it has no child elements. Instead, you should be removing some of the parents outside the ComboBox element.

Here is how a Kendo UI ComboBox renders:

<span class="k-widget k-combobox k-header">
    <span class="k-dropdown-wrap k-state-default">
        <input class="k-input" type="text" />
        <span class="k-select">
            <span class="k-icon k-i-arrow-s">select</span>
        </span>
    </span>
    <input id="combobox" data-role="combobox" style="display: none;" />
</span>

If you want to remove the generated content and restore the original <input> to its original state, then remove all DOM elements, except this one:

<input id="combobox" data-role="combobox" style="display: none;" />

Also, remove the style="display: none;" style, otherwise the new ComboBox that you create will be hidden.

Finally, a lot easier option may be to just remove the ComboBox wrapper (<span class="k-widget k-combobox k-header">), which will also remove the original <input>. Then, add a new <input> with the same name and id, and create the new ComboBox from it.

You may also want to review if subsequent widget initialization is needed at all, as you may be able to work with the existing widget instances.

Upvotes: 2

Related Questions