This is a migrated thread and some comments may be shown as answers.

Clear all nodes

9 Answers 1237 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Steven
Top achievements
Rank 1
Steven asked on 05 Sep 2012, 05:29 PM
How do I clear/remove all nodes from a tree view?

9 Answers, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 06 Sep 2012, 05:57 AM
$(".k-treeview").data("kendoTreeView").remove(".k-item");

Regards,
Alex Gyoshev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Steven
Top achievements
Rank 1
answered on 06 Sep 2012, 03:48 PM
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?
0
Nohinn
Top achievements
Rank 1
answered on 06 Sep 2012, 04:04 PM
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.
0
Steven
Top achievements
Rank 1
answered on 06 Sep 2012, 04:45 PM
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!
0
Dino
Top achievements
Rank 1
answered on 06 Nov 2012, 11:25 PM
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...
0
Gary
Top achievements
Rank 1
answered on 28 Nov 2012, 01:22 AM

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

0
Randy
Top achievements
Rank 1
answered on 02 Dec 2012, 03:22 PM
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
0
Randy
Top achievements
Rank 1
answered on 03 Dec 2012, 02:30 PM
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

0
Alexander Valchev
Telerik team
answered on 05 Dec 2012, 04:38 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
TreeView
Asked by
Steven
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Steven
Top achievements
Rank 1
Nohinn
Top achievements
Rank 1
Dino
Top achievements
Rank 1
Gary
Top achievements
Rank 1
Randy
Top achievements
Rank 1
Alexander Valchev
Telerik team
Share this question
or