Drag and drop between tree view

[HSLaw]

Hi,

I'm trying to do drag and drop between 2 treeview using example at http://demos.telerik.com/aspnet-ajax/treeview/examples/functionality/draganddropnodes/defaultvb.aspx

However, I do not want the item to be removed from the first tree view.

1. I removed the server side event and both my treeviews are as following:

<telerik:RadTreeView ID="radTV_pages" Font-Size="Large" runat="server" EnableDragAndDrop="True"
                   OnClientNodeDropping="onNodeDropping" OnClientNodeDragging="onNodeDragging" MultipleSelect="true"
                   EnableDragAndDropBetweenNodes="true">
               </telerik:RadTreeView>

 <telerik:RadTreeView ID="radTV_Menu" Font-Size="Large" runat="server" EnableDragAndDrop="True"
                   OnClientNodeDropping="onNodeDropping" OnClientNodeDragging="onNodeDragging" MultipleSelect="true"
                   EnableDragAndDropBetweenNodes="true">
               </telerik:RadTreeView>

 

 

2. As for the client script, I modified as following (remove grid related code and comment "sourceNode.get_parent().get_nodes().remove(sourceNode);"):

<script>

        (function () {

            var demo = window.demo = window.demo || {};

            //demo.checkbox = document.getElementById('<%'= ChbClientSide.ClientID %>');

            //function isMouseOverGrid(target) {
            //    parentNode = target;
            //    while (parentNode !== null) {
            //        if (parentNode.id === demo.grid.get_id()) {
            //            return parentNode;
            //        }
            //        parentNode = parentNode.parentNode;
            //    }

            //    return null;
            //}

            function dropOnHtmlElement(args) {
                if (droppedOnInput(args))
                    return;

                if (droppedOnGrid(args))
                    return;
            }

            function droppedOnGrid(args) {
                var target = args.get_htmlElement();

                while (target) {
                    if (target.id === demo.grid.get_id()) {
                        args.set_htmlElement(target);
                        return;
                    }

                    target = target.parentNode;
                }
                args.set_cancel(true);
            }

            function droppedOnInput(args) {
                var target = args.get_htmlElement();
                if (target.tagName === "INPUT") {
                    target.style.cursor = "default";
                    target.value = args.get_sourceNode().get_text();
                    args.set_cancel(true);
                    return true;
                }
            }

            function dropOnTree(args) {
                var text = "";

                if (args.get_sourceNodes().length) {
                    var i;
                    for (i = 0; i < args.get_sourceNodes().length; i++) {
                        var node = args.get_sourceNodes()[i];
                        text = text + ', ' + node.get_text();
                    }
                }
            }

            function clientSideEdit(sender, args) {
                var destinationNode = args.get_destNode();

                if (destinationNode) {
                    firstTreeView = demo.firstTreeView;
                    secondTreeView = demo.secondTreeView;

                    firstTreeView.trackChanges();
                    secondTreeView.trackChanges();
                    var sourceNodes = args.get_sourceNodes();
                    var dropPosition = args.get_dropPosition();

                    //Needed to preserve the order of the dragged items
                    if (dropPosition == "below") {
                        for (var i = sourceNodes.length - 1; i >= 0; i--) {
                            var sourceNode = sourceNodes[i];

                            //huisheng - do not remove source
                            //sourceNode.get_parent().get_nodes().remove(sourceNode);

                            insertAfter(destinationNode, sourceNode);
                        }
                    }
                    else {
                        for (var j = 0; j < sourceNodes.length; j++) {
                            sourceNode = sourceNodes[j];

                            //huisheng - do not remove source
                            //sourceNode.get_parent().get_nodes().remove(sourceNode);

                            if (dropPosition == "over")
                                destinationNode.get_nodes().add(sourceNode);
                            if (dropPosition == "above")
                                insertBefore(destinationNode, sourceNode);
                        }
                    }
                    destinationNode.set_expanded(true);
                    firstTreeView.commitChanges();
                    secondTreeView.commitChanges();
                }
            }

            function insertBefore(destinationNode, sourceNode) {
                var destinationParent = destinationNode.get_parent();
                var index = destinationParent.get_nodes().indexOf(destinationNode);
                destinationParent.get_nodes().insert(index, sourceNode);
            }

            function insertAfter(destinationNode, sourceNode) {
                var destinationParent = destinationNode.get_parent();
                var index = destinationParent.get_nodes().indexOf(destinationNode);
                destinationParent.get_nodes().insert(index + 1, sourceNode);
            }

            window.onNodeDragging = function (sender, args) {
                var target = args.get_htmlElement();

                if (!target) return;

                if (target.tagName == "INPUT") {
                    target.style.cursor = "hand";
                }

                //var grid = isMouseOverGrid(target)
                //if (grid) {
                //    grid.style.cursor = "hand";
                //}
            };

            window.onNodeDropping = function (sender, args) {
                var dest = args.get_destNode();
                if (dest) {
                    //var clientSide = demo.checkbox.checked;
                    var clientSide = true;

                    if (clientSide) {
                        clientSideEdit(sender, args);
                        args.set_cancel(true);
                        return;
                    }

                    dropOnTree(args);
                }
                else {
                    dropOnHtmlElement(args);
                }
            };
        }());

        /* <![CDATA[ */
        Sys.Application.add_load(function () {
            //  demo.grid = $find("<%'= RadGrid1.ClientID %>");
            demo.firstTreeView = $find('<%=radTV_pages.ClientID%>');
            demo.secondTreeView = $find('<%= radTV_Menu.ClientID%>');
            //demo.checkbox = document.getElementById('<%'= ChbClientSide.ClientID %>');
        });
        /* ]]> */

    </script>

3. However, the source node is still removed. How can I make the source target to remain?

 

Thanks.

[HSLaw]

Hi, 

I have a related question, if I can maintain the node on the source tree, that means the unique ID for the node need to be generated again, else if I drag the same node more than once and assign childs to them, the tree will have error because the parent is not unique.

What is the best way to reassign an unique ID to the dragged node?

Thanks.

[Dimitar]

Hi,

I would suggest you to follow the logic from the Copy or Move Nodes from one TreeView to another using the CTRL key help article. You may modify it to copy nodes every time dragged regardless of the CTRL key. Let us know if this solution works for you.

Regards,
Dimitar
Telerik

[HSLaw]

Hi Dimitar,

Can it be achieved with client script only?

 Thanks.

 

 

[Dimitar]

Hi,

Please find the attached sample page that shows how nodes from one tree can be copied from the tree and dropped to the other on the client. The sample recreates the cloning logic from the server-side sample. You could further customize the script to fit your case.

Regards,
Dimitar
Telerik

[Stefan]

Hi,

 

Is there a possibility to copy entire structure (selected node and bellow structure) from one tree view to another without removing dragged node from the source tree using drag & drop.

"Cloning" nodes is not a solution because node's substructure may not be entirely expanded. Even if  it is, there may be lot's of nodes in the substructure.

Or, if I should simplify all my questions into one, Is there a possibility not to change anything in the source tree while drag & drop

[Peter Filipov]

Hello Stefan,

You will need to implement a method which iterate through the node's structure and create such a copy and then add it to the other treeview. In the cloneNode method in the provided function only the main properties are copied. Please review the client side API of the node and get_nodes function.

Regards,
Peter Filipov
Telerik