Asynchronously Clone TreeView Nodes and All Their Children
Environment
Product Version | 2018.2.516 |
Product | Progress® Kendo UI® TreeView for jQuery |
Description
How can I copy a TreeView node along with all its children when loadOnDemand
is set to true
?
Solution
Asynchronously load the child nodes in the child data source by using the load()
method of the node.
<div id="content">
<button id="cloneNode" class="k-button k-primary">Clone selected node and append it to the TreeView</button>
<div id="treeview"></div>
</div>
<script>
$(document).ready(function() {
var homogeneous = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/Employees",
dataType: "jsonp"
}
},
schema: {
model: {
id: "EmployeeId",
hasChildren: "HasEmployees"
}
}
});
$("#treeview").kendoTreeView({
dataSource: homogeneous,
dataTextField: "FullName"
});
$("#cloneNode").on("click", function(e) {
var tree = $("#treeview").data("kendoTreeView"),
selected = tree.select();
if (selected.length == 0) {
alert("Select item first!");
return;
}
var dataItem = tree.dataItem(selected);
var load = function (item) {
var that = this,
chain = $.Deferred().resolve();
chain = chain.then(function () {
return item.load();
}).then(function () {
if (item.hasChildren) {
var childrenChain = $.Deferred().resolve();
item.children.data().forEach(function (child) {
(function (child) {
childrenChain = childrenChain.then(function () {
return load(child);
});
})(child);
});
return childrenChain;
}
});
return chain;
}
var updateIds = function (dataItem) {
dataItem.id = kendo.guid();
if (dataItem.items) {
dataItem.items.forEach(function (child) {
updateIds(child);
})
}
}
var item = dataItem.toJSON();
item.hasChildren = true;
tree.append(
item,
null,
function (e) {
var dataItem = tree.dataItem(e);
load.bind(tree)(tree.dataItem(e)).then(function () {
updateIds(dataItem);
});
}
);
load(dataItem);
});
});
</script>