Unable to replace widget by another one

7 posts, 0 answers
  1. Tayger
    Tayger avatar
    61 posts
    Member since:
    Jan 2015

    Posted 17 Feb Link to this post

    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 

     

     

  2. Tayger
    Tayger avatar
    61 posts
    Member since:
    Jan 2015

    Posted 17 Feb in reply to Tayger Link to this post

    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.

  3. Kendo UI is VS 2017 Ready
  4. Tayger
    Tayger avatar
    61 posts
    Member since:
    Jan 2015

    Posted 19 Feb Link to this post

    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?

     

  5. Tayger
    Tayger avatar
    61 posts
    Member since:
    Jan 2015

    Posted 19 Feb Link to this post

    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>
     
     
        <script src="http://code.jquery.com/jquery-1.9.1.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>

  6. Tayger
    Tayger avatar
    61 posts
    Member since:
    Jan 2015

    Posted 19 Feb in reply to Tayger Link to this post

    Even adding the following line after destroy does not remove the Widget from display:

            $("#eventobjectlist").remove();

     

  7. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 22 Feb Link to this post

    Hello Tayger,

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Tayger
    Tayger avatar
    61 posts
    Member since:
    Jan 2015

    Posted 15 Mar in reply to Georgi Krustev Link to this post

    Got it now, thank you for making it clear. I didn't get the documentation right. I see the need of keeping HTML data, just not in my case. 
Back to Top
Kendo UI is VS 2017 Ready