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):
addLabel: function(e) {
e.preventDefault();
var label = this.get('folder_label'),
folderAttributeTree = $("#folderAttributeTree").data("kendoTreeView"),
attributeTree = this.get('attributeTree')
data = [];
if (label !== null && label !== '') {
if (attributeTree.length) {
data = attributeTree;
var i = 0;
while (data.length) {
data = data[0].items;
i++;
}
data.push({
name: label,
type: 'folder',
expanded: true,
id: i,
items: [],
hasChildren: true,
itemIndex: 0
});
} else {
this.set('attributeTree', [{
name: label,
type: 'folder',
expanded: true,
id: 0,
items: [],
hasChildren: true,
itemIndex: 0
}]);
}
}
this.set('folder_label', '');
folderAttributeTree.setDataSource(this.attributeTree);
}
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!
After submitting my question to teleriks support they answered with a pretty useful hint, that tended me to found a solution. For those, who has similar problem, here is the solution:
addLabel: function(e) {
e.preventDefault();
var label = this.get('folder_label'),
folderAttributeTree = $("#folderAttributeTree").data("kendoTreeView"),
attributeTree = this.get('attributeTree');
if (label !== null && label !== '') {
if (attributeTree.length) {
var deepest = this.findDeepest(this.attributeTree[0]);
folderAttributeTree.append({
name: label,
type: 'folder',
expanded: true,
id: deepest.id + 1,
items: [],
hasChildren: true
}, $("#folderAttributeTree .k-item:last"));
} else {
this.set('attributeTree', kendo.observableHierarchy([{
name: label,
type: 'folder',
expanded: true,
id: 0,
items: [],
hasChildren: true
}]));
}
}
this.set('folder_label', '');
folderAttributeTree.setDataSource(viewModel.attributeTree);
}
The helpful hint was laying in using .append
method instead of .push
I didn't notice the append method had the second (optional) parameter called parentNode
which apparently was so helpful in my case.