[Solved] The kendoTreeView is not getting re-rendered after node removal upon adding new node

[Oleksa]

There are two event handlers: one adds a node to the tree, the other one - removes it. And it works fine as expected until the node gets removed by calling "check" event.
here is a tree (upon node check - it gets removed):

$('#folderAttributeTree').kendoTreeView({
    dataSource: this.attributeTree,
    dataRole: "treeview",
    dataTextField: "name",
    checkboxes: true,
    loadOnDemand: true,
    check: function(e) {
        var treeView = e.sender,
            checkedNode = e.node;
        treeView.remove(checkedNode);
    },
    dataBound: function(e) {
        if (!this.dataSource.data().length) {
            this.element.append("<li class='no-items'>No items yet.</li>");
        } else {
            this.element.find(".no-items").remove();
        }
    }
}).data("kendoTreeView");

 

here is the add node method (it creates always nested elements):

01.addLabel: function(e) {
02.    e.preventDefault();
03.
04.    var label = this.get('folder_label'),
05.        folderAttributeTree = $("#folderAttributeTree").data("kendoTreeView"),
06.        attributeTree = this.get('attributeTree')
07.        data = [];
08.
09.    if (label !== null && label !== '') {
10.
11.        if (attributeTree.length) {
12.
13.            data = attributeTree;
14.
15.            var i = 0;
16.
17.            while (data.length) {
18.                data = data[0].items;
19.                i++;
20.            }
21.
22.            data.push({
23.                name: label,
24.                type: 'folder',
25.                expanded: true,
26.                id: i,
27.                items: [],
28.                hasChildren: true,
29.                itemIndex: 0
30.            });
31.
32.        } else {
33.
34.            this.set('attributeTree', [{
35.                name: label,
36.                type: 'folder',
37.                expanded: true,
38.                id: 0,
39.                items: [],
40.                hasChildren: true,
41.                itemIndex: 0
42.            }]);
43.
44.        }
45.    }
46.
47.    this.set('folder_label', '');
48.
49.    folderAttributeTree.setDataSource(this.attributeTree);
50.
51.}

 

The problem is, when I try adding a node after its removal - a treeview is no more re-rendering (however if I check the console.log the data is getting added to the object as it should).
I'm new to kendo-ui. Please help me solving this.
Thank you in advance!

[Dimitar]

Hello,

In general, the recommended approach for dynamically adding a node to the TreeView is through the append() method:

var treeview = $("#treeview").data("kendoTreeView");
// appends a new node to the root level
treeview.append({ text: "bar" });

// appends a new node to the first treeview item
treeview.append({ text: "baz" }, $("#treeview .k-item:first"));

In this way, there will be no need to utilize the setDataSource() method to re-render the TreeView. Adding and removing nodes from the TreeView could also be tested in the following demo:

• TreeView API Demo for ASP.NET MVC.

Regards,
Dimitar
Progress Telerik

[Oleksa]

Thank you Dimitar!

I didn't notice the append method had the second parameter "parentNode", which was really helpful in my case.

The problem now is solved ;)

Have a good day!