This is a migrated thread and some comments may be shown as answers.

Drag and drop between tree view

6 Answers 46 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
HSLaw
Top achievements
Rank 1
HSLaw asked on 22 May 2015, 02:05 AM

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.

6 Answers, 1 is accepted

Sort by
0
HSLaw
Top achievements
Rank 1
answered on 25 May 2015, 03:05 AM

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.

0
Dimitar
Telerik team
answered on 26 May 2015, 08:07 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
HSLaw
Top achievements
Rank 1
answered on 26 May 2015, 08:22 AM

Hi Dimitar,

Can it be achieved with client script only?

 Thanks.

 

 

0
Dimitar
Telerik team
answered on 28 May 2015, 04:04 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Stefan
Top achievements
Rank 1
answered on 05 Nov 2015, 01:26 PM

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

0
Peter Filipov
Telerik team
answered on 10 Nov 2015, 08:50 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
TreeView
Asked by
HSLaw
Top achievements
Rank 1
Answers by
HSLaw
Top achievements
Rank 1
Dimitar
Telerik team
Stefan
Top achievements
Rank 1
Peter Filipov
Telerik team
Share this question
or