This is a migrated thread and some comments may be shown as answers.
The kendoTreeView is not getting re-rendered after node removal upon adding new node
2 Answers 16 Views
This is a migrated thread and some comments may be shown as answers.
Oleksa
Top achievements
Rank 1
Oleksa asked on 03 Jul 2019, 04:31 PM

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!

2 Answers, 1 is accepted

Sort by
0
Accepted
Dimitar
Telerik team
answered on 05 Jul 2019, 09:34 AM
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:


Regards,
Dimitar
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Oleksa
Top achievements
Rank 1
answered on 11 Jul 2019, 10:57 AM

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!

Asked by
Oleksa
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Oleksa
Top achievements
Rank 1
Share this question
or