Clear all nodes

[Steven]

How do I clear/remove all nodes from a tree view?

[Alex Gyoshev]

$(".k-treeview").data("kendoTreeView").remove(".k-item");

Regards,
Alex Gyoshev
the Telerik team

[Steven]

Thank you for your reply.  I copied and pasted the code sample, but the nodes in my tree view still are not cleared.

I also tried:

$("#myTreeView").data("kendoTreeView").remove(".k-item");

but this did not work either.  Is there something that I am not doing correctly?

[Nohinn]

It should work, as the treeview assigns the css class k-item to each node itself.
Anyway try to use:

$('#myTreeView').data('kendoTreeView').remove('li');

It's the hard way though.

[Steven]

I did some more digging and ended up using the following:

        var treeView = $('#myTreeView')
        var treeViewData = treeView.data('kendoTreeView');
        treeView.each(function (n, root) {
            for (var i = root.childNodes[0].childNodes.length - 1; i >= 0; i--)
            {
                treeViewData.remove(root.childNodes[0].childNodes[i]);
            }
        });

It's probably the hardest way of all, but it works.  Thanks for the feedback!

[Dino]

I also tried the recommended approach
($(".k-treeview").data("kendoTreeView").remove(".k-item");),

 with no success...

However i did check the code for 'remove' inside kendo.all.js, and looks like the following:

remove: function (node) {

var dataItem = this.dataItem(node);

if (dataItem) {

this.dataSource.remove(dataItem);

}

},

looks like it really expects a node which corresponds to a specific dataitem, and not made for generic selectors...

[Gary]

  handleClearAll: function() {
    var kTreeView = this.$treeview.data('kendoTreeView');
    this.$treeview.children('li').each(function() {
      kTreeView.remove($(this));
    });
  }

[Randy]

It this something that broke recently?

I had the following code working:
        var kendoTree = $("#treeview").data("kendoTreeView");
        // clear the treeview and unbind handlers
        kendoTree.remove(".k-item");
        kendoTree.unbind("select");

I ran this to clear everything before I would reload the data. Now when I reload the data it duplicates it. For example there are 6 items in the tree to be cleared and 6 in the json object I load the data from. When I reload it after running the above code I get 12 items in the tree. If I do it again I get 18.

I am running Kendo UI Web v2012.3.1121.

Thanks
Randy

[Randy]

I tried rolling back to 2012.2.831 and have the same results. I don't really know what changed to create the problem.

I have added a wrapper div around the treeview div and changed the code such:

    if (tg.TreeBuilt) {
        var kendoTree = $("#treeview").data("kendoTreeView");
        kendoTree.remove(".k-item");
        kendoTree.unbind("select");
        kendoTree.destroy();

        $("#treeview").remove();
        $("#treeviewOutterContainer").append('<div id="treeview"></div>');
    }

I then run the same code that I use to create the tress and it seems to work. Is this any better or worse than rebinding the existing treeview? It avoids the problem of the rebinding not working, but seems like it would be less efficient. However the speed doesn't seem bad regardless.

Thanks
Randy

[Alexander Valchev]

Hello guys,

Another simple approach that you could use to remove all TreeView nodes is to clear the data in its DataSource.

$("#treeview").data("kendoTreeView").dataSource.data([]);

For convenience I prepared a small example.
If you need to remove a particular node please use the remove method.

Regards,
Alexander Valchev
the Telerik team

[Steve]

This is by far the easiest way to do this. I came looking for the solution because I passed nothing to dataSource.data, not realizing it should be an empty array. Silly actually since I knew calling data() would return the dataSource items. I always prefer using a built-in method over playing around with JQuery selectors as some others have found that things break after an update.