RadTreeView for ASP.NET
Table of Contents
Drag and Drop to Any HTML Element Send comments on this topic.
See Also
Using the Drag and Drop Functionality > Drag and Drop to Any HTML Element

Glossary Item Box

Telerik RadTreeView exposes the client-side event BeforeClientDrop (called when the user drops a node onto the page), e.g.

Copy Code
<rad:radtreeview runat="server" ...
   BeforeClientDrop="DropHandler"/>

The easiest way to detect the HTML element, to which the user drops a node is by wiring the BeforeClientDrop event. It accepts 3 parameters:

Copy Code
function DropHandler(source, dest, events)
{
 ...
}

source - the instance of the node being dragged. It is always set to an instance of a node and cannot be null.

  • dest - set to the instance of the node where the source node is being dropped to. It can be null, since you can also drop a node to an HTML element, not necessarily to a treenode.
  • events - set to the instance of the current browser events and can be used to detect the HTML Element where the user is dropping the node to.

Basically, the element is detected by using the

  • events.srcElement for Internet Explorer
  • events.target for Netscape based browser 

It is set to the currently active HTML Element (the element where the mouse cursor is). However, it is possible that events.srcElement is set to a child of the element in question, so we should also scan parent nodes.

The following example show how to detect if the end-user drops a node onto a DataGrid. For the purpose, we add the DropID property to the Grid instance in our Page_Load function:

Copy Code
...
DataGrid1.Attributes.Add("DropID","Grid");
...

Then wire the BeforeClientDrop event and assign it the DropHandler JavaScript function. We also wire the OnNodeDrop event to specify which method will process the postback server-side:

Copy Code
<rad:radtreeview runat="server" ...
   BeforeClientDrop="DropHandler"
   OnNodeDrop="HandleDrop"
/>

Define a JavaScript method that checks if the currently active HTML Element is the grid in question, e.g.

Copy Code
function IsMouseOverGrid(events)
{
 var target = (document.all) ? events.srcElement : events.target;
 parentNode = target;
 while (parentNode != null)
 {
  if (parentNode.getAttribute)
   if (parentNode.getAttribute("DropID") == "Grid")
    return true;
  parentNode = parentNode.parentNode;
 }

 return false;
}

Finally define the DropHandler body - if the mouse is over the grid, set the HtmlElementID property of the treeview to "Grid" and return true so that the treeview postbacks to the server. Otherwise return false so that there's no postback.

Copy Code
function DropHandler(source, dest, events)
{
  if (IsMouseOverGrid(events))
  {
      source.TreeView.HtmlElementID = "Grid";
      return true;
  }
  return false;
}

Here's our (sample) C# code - we check if NodeEvent.HtmlElementID is set to Grid and if so we proceed with adding rows to the Grid (full code & example in our "What's new" example online ).

Copy Code
protected void HandleDrop(object sender, RadTreeNodeEventArgs NodeEvent)
{
   if (NodeEvent.HtmlElementID == "Grid")
   {
        DataTable dt = (DataTable) Session["DataTable"];
        if (sourceNode.TreeView.SelectedNodes.Count > 0)
        {
             foreach (RadTreeNode node in sourceNode.TreeView.SelectedNodes)
                AddRowToGrid(dt, node);
        }
        else
        {
             AddRowToGrid(dt, sourceNode);
        }
}

 

See live example at:
Drag And Drop To HTML Element

See Also