Asynchronously Clone TreeView Nodes and All Their Children

Environment

Product Version 2018.2.516
Product TreeView for ProgressĀ® Kendo UIĀ®

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>

See Also

In this article
Not finding the help you need? Improve this article