Drag And Drop between nodes

5 posts, 0 answers
  1. Thomas
    Thomas avatar
    13 posts
    Member since:
    Feb 2008

    Posted 14 Oct 2008 Link to this post

    Hi,

    I made an application using the rad treeview supporting drag and drop. Some nodes have a special purpose, which means it is not allowed to move nodes in there (allow-drop is set to false on these nodes)

    Two problems occurred:
    1. When a user drags a node below or above a child-node of a special node it works. So allowDrop=false is not enough to forbid adding nodes to a special node. I need to check this again in the OnDrop-Event. Is there a better solution for that?

    2. When a user drags a node over a special node a kind of stop sign is shown, which indicates that the drag is forbidden, or not possible. If the user moves the node below or a above another node and this is not allowed, nothing is shown. (of course not, at that time I don't know that it is not allowed) Whichh means the user doesn't get a feedback.

    Any ideas how to solve this?
  2. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 16 Oct 2008 Link to this post

    Hi Thomas,

    Both of the points you have made seem to be issues. It sounds logical to have these by default. I will contact our development team and will inform them about the matter.

    The workaround to the first issue you have already implemented. As for the second, it would be hard to determine that the Node is being dragged below or above another Node only by using the client side API of the TreeView.

    Thank you for paying attention to these issues and letting us know about them. I will follow up in this thread with additional information as soon as I have it.

    Regards,
    Simon
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 17 Oct 2008 Link to this post

    Hi Thomas,

    I am following up with a workaround to the case.

    Besides canceling the dropping event when the dragged Node is dropped below or over a special Node, the cursor needs to be changed to indicate that dropping is not allowed.

    And here is the script:

        <script type="text/javascript"
            var dragging = false
            var lastHoveredNode = null
             
            function clientNodeDragging(sender, eventArgs) { 
                var node = sender._extractNodeFromDomElement(eventArgs.get_htmlElement()); 
                 
                if (node) { 
                    if((node.get_parent().get_allowDrop) &&  
                       (node.get_parent().get_allowDrop() == false)) { 
                        if(sender._draggingPosition != "over") { 
                            sender._dropClue.style.cursor = "not-allowed"
                            node.get_element().style.cursor = "not-allowed"
                             
                            if ((lastHoveredNode) && 
                                (lastHoveredNode != node)) { 
                                lastHoveredNode.get_element().style.cursor = "default"
                            } 
                             
                            lastHoveredNode = node; 
                        } 
                        else { 
                            node.get_element().style.cursor = "default"
                        } 
                    } 
                } 
            } 
             
            function clientNodeDropping(sender, eventArgs) { 
                var destNode = eventArgs.get_destNode(); 
     
                if((destNode.get_parent().get_allowDrop) &&  
                   (destNode.get_parent().get_allowDrop() == false) &&  
                   (eventArgs.get_dropPosition() != "over")) { 
                    eventArgs.set_cancel(true); 
                    if (lastHoveredNode) { 
                        lastHoveredNode.get_element().style.cursor = "default"
                    } 
                } 
            } 
        </script> 

    I hope this is useful.

    Kind regards,
    Simon
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  5. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 21 Oct 2008 Link to this post

    Hi again Thomas,

    We decided to implement this feature as a part of the default behavior of RadTreeView and logged it in our TODO list.

    Your Telerik points have been updated for bringing this to our attention.

    Sincerely yours,
    Simon
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. rajendra
    rajendra avatar
    1 posts
    Member since:
    Jan 2009

    Posted 28 Jan 2009 Link to this post

    hi,
    thanks for  your help  ,
    its works for me  . I had same problem as Thomas having but resolve using your example code .
    still i have  issue cursor
    node.get_element().style.cursor = "not-allowed";  is working for only node image and  moving to node text its changing to    Default  cursor .
    help me  to get  it out from this.


    Thanks.
    Rajnedra
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017