0

After creating and rendering a Kendo UI TreeView to fill a DIV, repeat invocation alternately renders only "loading..." or works properly. Since I am having possibly similar problems with Kendo UI ContextMenu, I speculate there may be some required cleanup in between, which is passively done by even invocations such that odd invocations work, but I can't figure it out (a link to Kendo UI docs I might be missing so I can understand why I've missed this would be appreciated to help with other issues).

In my JSFiddle example, click "draw" over and over and you'll see the alternate behavior. Speculatively clicking "draw, destroy, draw, destroy..." does not seem to help.

https://jsfiddle.net/rk3nfnnu/

<script>
    function TreeDestroy() { // http://stackoverflow.com/questions/5431351
        $('#Tree_Space').data('kendoTreeView').destroy();
        alert('destroyed');
    }
    function TreeShow() {
        $('#Tree_Space').kendoTreeView({
            dataSource: [ { Name: 'Top', items: [ { Name:'Item' } ] } ],
            template: kendo.template($('#Tree_template').html())
        });
        alert('shown');
    }
</script>

<a href="#" onclick="TreeShow(); return false;">draw</a> |
<a href="#" onclick="TreeDestroy(); return false;">destroy</a>

<div id='Tree_Space'>
</div>

<script type='text/x-kendo-template' id='Tree_template'>
    #= item.Name#
</script>
Cris Mooney
  • 185
  • 10
  • As common, after hours of fighting this, an idea occurred right after posting. I inserted $('#Tree_Space').empty() into my "destroy" to clear the DIV as well as destroying KendoUI config. I'd like to alter this question to ask anyone where in KendoUI docs I should have found this info - how I should have know other than stabbing in the dark, because I've other similar issues with ContextMenu and who knows what else to come. – Cris Mooney Jan 25 '16 at 22:30
  • Some kendoui elements are places after the footer in the dom. These elements will remain if you just cleared the wrapper div. I assume that destroy() method is there to clean up DropDownList and other artifacts that have been stored outside of the wrapper element. – Ross Bush Jan 25 '16 at 22:38
  • I added the base widget destroy documentation that I found. It is not specific to the TreeView, however, the treeview extends base. – Ross Bush Jan 25 '16 at 22:41

1 Answers1

1

I have updated that fiddle. The destroy(); method probably only destroys allocated dom elements after the widget was rendered (the nodes). I doubt it cleans up the wrappers and whatnot. In your TreeDestroy(), issue a clear on that element div. Of course, you should call TreeDestroy prior to TreeCreate just in case.

function TreeDestroy() { // http://stackoverflow.com/questions/5431351
        $('#Tree_Space').data('kendoTreeView').destroy();       
        $('#Tree_Space').html('');
        alert('destroyed');
    }

Here is some kendoui documentation that refers to how to handle manual deletion of widgets.

Ross Bush
  • 14,648
  • 2
  • 32
  • 55
  • Thank you. If you know, please share how one should know this from documentation, since I don't relish having to figure this sort of requirement out for each and every Kendoo UI widget as I encounter it. – Cris Mooney Jan 25 '16 at 22:42
  • I have added a link top base widget manual deletion. I agree with you that It is not clear by reading the TreeVIew documentation how to remove the view. – Ross Bush Jan 25 '16 at 22:44
  • thank you again for the link to the Widget Basics, which I missed in the manual. – Cris Mooney Jan 25 '16 at 22:46