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!