Detecting DragEnd in treeview

[Fergus Bown]

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  

[Atanas Korchev]

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.

[Fergus Bown]

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
}