Hello
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:
$('#eventmaskdiv0').append(
...
+"<div name='eventobjectvaluediv' id='eventobjectvaluediv' style='float:left;'>"
+"<input id='eventobjectvalue' />"
+"</div>"
+"</div>"
);
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).
Regards
6 Answers, 1 is accepted
Rank 1
Iron
Forgot the attachment "doubled", sorry, here it comes
The upper "white" area comes from the first set numerictextbox while the switch to dropdown (second step) puts the dropdownlist into the numerictextbox instead replacing it completly.The other way around (first dropwdown, then numerictextbox) screws it up as well.
Rank 1
Iron
Still having the problem. In between i did some further tests...
Adding a widget to an element is never a problem, just destroying it. It looks like it will be destroyed but not removed from element. Test environment:
1. input element called "eventobjectlist" on which a kendoDropDownList is initally set
2. Dropdownlist "A" with change event that will do this code:
var droplist = $("#eventobjectlist").data("kendoDropDownList");
droplist.destroy();
Initially I can choose any value from dropdownlist "eventobjectlist". The first time I choose a value from dropdownlist "A" the change event first and destroys the widget on "eventobjectlist". Visually the dropdownlist ist still there but now I'm unable to choose a value from there but its not clickable nor does it open and show the list.
The second time I choose a value from dropdownlist "A" I got the following error:
TypeError: undefined is not an object (evaluating 'droplist.destroy')
Ok, makes sense, the widget was already detached/destroyed even visible. The big question: Why is not visually removed?
Rank 1
Iron
I made it to a working example to show you the widget might be destroyed but not be visually removed. After running it you will see the template is visually still there but no more clickable.
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Kendo UI Snippet</title> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script></head><body><input id='eventobjectlist'/><script> $("#eventobjectlist").kendoDropDownList({ dataSource: { data: ["One", "Two"] } }); var droplist = $("#eventobjectlist").data("kendoDropDownList"); droplist.destroy();</script></body></html>
Rank 1
Iron
Even adding the following line after destroy does not remove the Widget from display:
$("#eventobjectlist").remove();
As it is mentioned in the kendo.destroy method, it only prepares the HTML elements for removal. This means that you need to strip the generated HTML manually.
In the case of the NumericTextBox widget, it renders additional input element and wrapping SPAN elements around the origin <input id="eventobjectvalue" /> element. What you need to do is to take this input out of the rendered NumericTextBox and then to remove the wrapper element. Here is a demo that demonstrates how to achieve a similar task:
Regards,
Georgi Krustev
Telerik
Rank 1
Iron