Kendo UI TreeView - how to copy contents from one treeview to another? - kendo-ui

Question

I have two Kendo UI TreeViews on one page. For example:
var data1 = new kendo.data.HierarchicalDataSource({
data: [
{ text: "foo", items: [
{ text: "believe" },
{ text: "Sofas" },
{ text: "Occasional Furniture" }
] },
{ text: "Decor", items: [
{ text: "Bed Linen" },
{ text: "Curtains & Blinds" },
{ text: "Carpets" }
] }
]
});
var data2 = new kendo.data.HierarchicalDataSource({
data: [
]
});
$("#treeview-1").kendoTreeView({
dataSource: data1
});
$("#treeview-2").kendoTreeView({
dataSource: data2
});
$('#copy-button').click(function(e){
// what goes here?
});
How can I copy the data from one tree to the other? It's OK if the destination tree's existing data is overwritten.
Thanks!

Answer 1

You need to retrieve the data of the first tree and assign it to the DataSource of the second. Something like:
// Access both trees
var tree1 = $("#treeview-1").data("kendoTreeView");
var tree2 = $("#treeview-2").data("kendoTreeView");
// Get the data from the first tree
var data = tree1.dataSource.data();
// Assign it to the second tree
tree2.dataSource.data(data);
A snippet
$(document).ready(function() {
var data1 = new kendo.data.HierarchicalDataSource({
data: [
{ text: "foo", items: [
{ text: "believe" },
{ text: "Sofas" },
{ text: "Occasional Furniture" }
] },
{ text: "Decor", items: [
{ text: "Bed Linen" },
{ text: "Curtains & Blinds" },
{ text: "Carpets" }
] }
]
});
var data2 = new kendo.data.HierarchicalDataSource({
data: [
]
});
$("#treeview-1").kendoTreeView({
dataSource: data1
});
$("#treeview-2").kendoTreeView({
dataSource: data2
});
$('#copy-button').click(function(e){
var tree1 = $("#treeview-1").data("kendoTreeView");
var tree2 = $("#treeview-2").data("kendoTreeView");
var data = tree1.dataSource.data();
tree2.dataSource.data(data)
});
});
#treeview-1 {
border: 1px solid red;
padding: 5px;
min-height: 40px;
}
#treeview-2 {
border: 1px solid green;
padding: 5px;
min-height: 40px;
}
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
<button id="copy-button" class="k-button">Copy</button>
<div id="treeview-1"></div>
<div id="treeview-2"></div>