CODEWITHSUNDEEP
javascriptkendo-ui
Cris Mooney
Cris Mooney

Reputation: 304

Kendo UI Javascript redraw of TreeView not rendering

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>

Upvotes: 0

Views: 577

Answers (1)

Ross Bush
Ross Bush

Reputation: 15155

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.

Upvotes: 1

Related Questions