Clone a TreeView Node and Its Children
Environment
| Product | Progress® Kendo UI® TreeView for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I copy a node together with its children in the Kendo UI for jQuery TreeView?
Solution
To achieve the desired behavior:
Use the
selectmethod of the TreeView to obtain the selected node as a jQuery object. The second example below uses a Context Menu instead.Use the
parentmethod to get the parent node of the selected node.Use the
dataItemmethod to obtain the data item (Kendo UI Model), which corresponds to the selected node.Use the
toJSONmethod of the Model to strip proprietary information from the data item and its children, and convert them to a plain JavaScript object.(Optional) Deselect and collapse the cloned node before appending it to the TreeView.
Use the
append,insertAfter, orinsertBeforemethod of the TreeView to add the cloned node to the desired location in the item structure of the widget. In this example, nodes are cloned at the same level.
The following example demonstrates how to copy the selected node together with its children.
<p><button class="k-button" id="cloneNode">Clone selected node</button></p>
<div id="treeview"></div>
<script>
$(function() {
var treeview = $("#treeview").kendoTreeView({
dataSource: {
data: [
{ text: "Item 1", expanded: true, items: [
{ text: "Item 1.1" },
{ text: "Item 1.2" },
{ text: "Item 1.3" }
] },
{ text: "Item 2", items: [
{ text: "Item 2.1" },
{ text: "Item 2.2" },
{ text: "Item 2.3" }
] },
{ text: "Item 3" }
]
},
loadOnDemand: false
}).data("kendoTreeView");
$("#cloneNode").kendoButton({
click: onClick
});
function onClick() {
var selectedNode = treeview.select();
if (!selectedNode[0]) {
selectedNode = treeview.wrapper.find("li.k-item").first();
}
// Find the parent node of the selected node.
// Passing a falsy value as the second append() parameter
// will append the node to the root group.
var referenceNode = treeview.parent(selectedNode);
if (!referenceNode[0]) {
referenceNode = null
}
// (Optional) Remove the selection from the cloned node.
var clonedNode = treeview.dataItem(selectedNode).toJSON();
clonedNode.selected = false;
// (Optional) Collapse the cloned node.
delete clonedNode.expanded;
treeview.append(
clonedNode,
referenceNode
);
}
});
</script>
The following example provides a variation of the previous approach and demonstrates how to copy the right-clicked node. It relies on a Context Menu click instead of a selection.
<div id="treeview"></div>
<ul id="context-menu">
<li>Clone</li>
</ul>
<script>
$(function () {
var treeview = $("#treeview").kendoTreeView({
dataSource: {
data: [
{
text: "Item 1", expanded: true, items: [
{ text: "Item 1.1" },
{ text: "Item 1.2" },
{ text: "Item 1.3" }
]
},
{
text: "Item 2", items: [
{ text: "Item 2.1" },
{ text: "Item 2.2" },
{ text: "Item 2.3" }
]
},
{ text: "Item 3" }
]
},
loadOnDemand: false
}).data("kendoTreeView");
$("#context-menu").kendoContextMenu({
target: "#treeview",
direction: "top",
filter: ".k-in",
alignToAnchor: true,
select: function (e) {
var selectedNode = e.target;
// Find the parent node of the selected node.
// Passing a falsy value as the second append() parameter
// will append the node to the root group.
var referenceNode = treeview.parent(selectedNode);
if (!referenceNode[0]) {
referenceNode = null
}
// (Optional) Remove the selection from the cloned node.
var clonedNode = treeview.dataItem(selectedNode).toJSON();
clonedNode.selected = false;
// (Optional) Collapse the cloned node.
delete clonedNode.expanded;
treeview.append(
clonedNode,
referenceNode
);
}
});
});
</script>