Drag and drop between tree view

7 posts, 0 answers
  1. HSLaw
    HSLaw avatar
    153 posts
    Member since:
    Jan 2006

    Posted 21 May 2015 Link to this post

    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.

  2. HSLaw
    HSLaw avatar
    153 posts
    Member since:
    Jan 2006

    Posted 24 May 2015 Link to this post

    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.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 26 May 2015 Link to this post

    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
  5. HSLaw
    HSLaw avatar
    153 posts
    Member since:
    Jan 2006

    Posted 26 May 2015 in reply to Dimitar Link to this post

    Hi Dimitar,

    Can it be achieved with client script only?

     Thanks.

     

     

  6. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 28 May 2015 Link to this post

    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
  7. Stefan
    Stefan avatar
    4 posts
    Member since:
    Dec 2013

    Posted 05 Nov 2015 Link to this post

    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

  8. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 10 Nov 2015 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017