Detecting DragEnd in treeview

3 posts, 0 answers
  1. Fergus Bown
    Fergus Bown avatar
    9 posts
    Member since:
    Dec 2008

    Posted 17 Mar 2009 Link to this post

    Hi,

    I've looked around, but I can't find the answer to this, so here gos.  Does anybody know how to detect that a drag operation has been ended, in the case where the ending isn't caused by dropping the node?  The two cases where I can get this to happen are (1) dragging the node outside the bounds of the browser window and (2) pressing escape while dragging.

    I am using the client side events OnClientNodeDragging and OnClientNodeDropping, but  OnClientNodeDropping doesn't fire in the above two cases, which seems correct since you haven't dropped the node.

    I need to know when the drag has ended, whether dropped or otherwise, so that I can revert the selected node back to whatever it was before the drag began.

    Thanks in advance

    Fergus  
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 18 Mar 2009 Link to this post

    Hi Fergus Bown,

    The NodeDropping event should fire always when you drop a node. However no event fires when the user aborts the drag operation by pressing the "ESC" key. The only workaround I can suggest is overriding an internal JavaScript method of RadTreeView:

            <telerik:RadTreeView runat="server" ID="RadTreeView1" EnableDragAndDrop="true" OnClientNodeDropping="nodeDropping"
                <Nodes> 
                    <telerik:RadTreeNode runat="server" Text="Root RadTreeNode1"
                        <Nodes> 
                            <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1"
                            </telerik:RadTreeNode> 
                            <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 2"
                            </telerik:RadTreeNode> 
                        </Nodes> 
                    </telerik:RadTreeNode> 
                    <telerik:RadTreeNode runat="server" Text="Root RadTreeNode2"
                        <Nodes> 
                            <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1"
                            </telerik:RadTreeNode> 
                            <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 2"
                            </telerik:RadTreeNode> 
                        </Nodes> 
                    </telerik:RadTreeNode> 
                </Nodes> 
            </telerik:RadTreeView> 
             
            <script type="text/javascript"
             
            function nodeDropping(sender, args) 
            { 
                alert("dropping"); 
            } 
             
            Telerik.Web.UI.RadTreeView.prototype._onDocumentKeyDown = function (e) 
            { 
                if(e.keyCode == this._escapeKeyCode && this._dragging) 
                { 
                    this._clearDrag(); 
                     
                     
                    //your code here 
                    alert("esc"); 
                } 
            } 
     
            </script> 


    Regards,
    Albert
    the Telerik team


    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. Fergus Bown
    Fergus Bown avatar
    9 posts
    Member since:
    Dec 2008

    Posted 23 Mar 2009 Link to this post

    Hi,

    Thanks for the reply.  I ended up using TreeView.get_draggingCueElement(), since that was the only way I could find to handle both of the cases I mentioned.  Its not elegent, but this is what I did (all javascript): 

    var dragEnded = true;

    function EndDrag()
    {
        dragEnded = true;
        //any work you need to do on drag ending, for example resetting cursor
    }

    function CheckForUnhandledDragEnd()
    {    
            //use appropriate client id below
            if ($find("TreeView1").get_draggingCueElement() != null)
                setTimeout("CheckForUnhandledDragEnd()", 1000);
            else if (!dragEnded)
                EndDrag(); 
    }

    //assign these to the appropriate events in the tree

    function OnClientNodeDragStart(sender, args)
    {
        dragEnded = false;
        setTimeout("CheckForUnhandledDragEnd()", 1000);
    }

    function OnClientNodeDragging(sender, args)
    {
        //dragging code here, for example setting allow/disallow cursor
    }

    function OnClientNodeDropping(sender, args)
    {
        EndDrag();
        //drop code here
    }
Back to Top