I would like to "remove" a set widget and replace it by another widget, depending on what is chosen on a kendouidropdownlist (called "A" to reference it later on).
The input HTML element with ID = "eventobjectvalue" on which I want to set the widget will be appended before putting a widget on it:
+"<div name='eventobjectvaluediv' id='eventobjectvaluediv' style='float:left;'>"
+"<input id='eventobjectvalue' />"
Before attaching a widet on it, it looks like a simple and unformatted input element.
Now I set a kendoNumericTextBox widget on the element "eventobjectvalue" by choosing "Set numericbox" from the dropdownlist "A". Fine, will be done...
In the next step I choose "Set dropdown" from dropdownlist "A" and what happens can be seen in attached files (doubled). That brought me to the idea I have to delete a Widget first before attaching another one...
After some research I found the KendoUI functions remove, empty and destroy: http://docs.telerik.com/KENDO-UI/intro/widget-basics/destroy
Playing around with it doesn't help (because I'm probably doing something wrong).
$("#eventobjectvalue").empty(); -> same visual effect as in attached file doubled
$("#eventobjectvalue").data("kendoNumericTextBox").destroy(); -> same visual effect as in attached file doubled (even when making sure a numerictextbox is set on element eventobjectvalue)
kendo.destroy($("#eventobjectvalue")); -> same visual effect as in attached file doubled
$("#eventobjectvalue").remove(); -> The Widget is removed BUT the element eventobjectvalue as well (so unable to attach another Widget on it)
What am I doing wrong and which mentioned function do I have to use? I would like to switch between the Widget kendoNumericTextBox and kendoDropDownList attached to the same HTML element (if possible). The switch should happen depending on what is chosen from apersistent dropdownlist "A" (onchange).