I have the following code:
var cnt = 0;
$(document).ready(function () {
var data = [
{
"id": cnt++,
"text":"node_" + cnt
}
];
var tree = $("#treeview").kendoTreeView({
dataSource:kendo.observableHierarchy(data)
}).data("kendoTreeView");
$("#push").click(function () {
var pos = tree.dataItem(tree.select());
pos.items.push({id:cnt++, text:"node_" + cnt});
});
$("#append").click(function () {
var pos = tree.select();
tree.append({id:cnt++, text:"node_" + cnt}, pos);
});
$("#show").click(function () {
var data = tree.dataItem(".k-item:first");
$("#content").html(JSON.stringify(data, null, 2));
});
});
And there are two functions: 1. push: once selected a node in the tree, it uses dataItem to get current data item and pushes one additional node into it (child node). This should be valid since dataSource is an ObservableHierarchy object. 2. append: once selected a node in the tree, it uses append to introduce one additional node into it (child node). This was valid on previous release of KendoUI and modify the tree but should not reflect changes in the DataSource.
The question / problem is: 1. If I use append the tree is update (visually) but the dataItem is not updated. 2. If I use push then dataItem is update but not the tree. 3. If I select a node, use append and then push, the tree is visually updated and the model too.
It seems that the first time that I introduce a child append
updates some internal structure and from there the tree 'observes' the observable hierarchy put if I directly push it then the tree does not observe the observable hierarchy.
How should I insert nodes dynamically being able to check the DataSource and get the current state of the tree?
NOTE This is with the latest version of KendoUI Q2.1024.