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

Glossary Item Box

The provided scenario works smoothly only with Telerik RadEditor v4.x. Currently, the latest Telerik RadEditor v5.x supports Drag and Drop from Telerik RadTreeView but there are some limitations. The dragged node can be placed only at the beginning of the editor content.


editor DND


Telerik RadTreeView supports dragging a treenode onto any HTML Element and that includes Telerik RadEditor as well. Here is a common scenario you have a treeview structure with custom data (links, text, custom values). Simply dragging the nodes into the Telerik RadEditor content area would be very convenient in many cases. For example you may have a treeview with links of all your site pages and simply dragging the page name in the editor will result a link to the page in question. This may come in handy even in large scale systems. You can generate a treeview with all channel / posting links in MCMS (or Sharepoint) and simply drag the links into Telerik RadEditor thus avoiding the process of selecting a link from the links popup that comes built-in with these products.

Here is how this can be achieved. Simply define a page with a treeview and editor instances, for example:

ASPX Copy Code
<form id="Form1" method="post" runat="server">
 <table>
   <tr>
     <td valign="top">
       <br>
       <br>
       <rad:radtreeview
        DragAndDrop="True"
        BeforeClientDrop="MyDropHandler"
        AfterClientMove="MyMoveHandler"
        Width="200px"
        runat="server"
        id="RadTree1" />
     </td>
     <td valign="top">
       <rade:radeditor
        Editable="True"
        Height="200px"
        runat="server"
        id="RadEditor1" />
     </td>
   </tr>
 </table>
</form>
        

Make sure to populate the treeview with all data you need. You can store custom information like link URL in the Value property of treenodes. Set the DragAndDrop property of the tree-view to true and wire the BeforeClientDrop and AfterClientMove client-side event handlers of the treeview.

The easiest way to detect the HTML element the user drops a node to is to wire BeforeClientDrop. BeforeClientDrop 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 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.

Here is an example how to detect if the end-user drops a node onto our RadEditor instance (ID=RadEditor1). We define a JavaScript method that checks if the currently active Html Element is the editor in question, e.g.

  Copy Code
function IsMouseOverEditor(events)
{
 var target = (document.all) ? events.srcElement : events.target;
 parentNode = target;
 while (parentNode != null)
 {
   if (parentNode.id)
   if (parentNode.id == '<%= RadEditor1.ContainerClientID %>')
   return parentNode;
   parentNode = parentNode.parentNode;
 }
 return null;
}
        

Define the DropHandler body - if the mouse is over the editor, insert the node text into the editor area (at the mouse cursor) and set the cursor to point to the end of the inserted text. Please, take into account that you can actually insert anything in the editor - the Value attribute as URL link, etc. It really depends on your scenario:  

  Copy Code
function MyDropHandler(source, dest, events)
{
 document.body.style.cursor = "default";
 if (IsMouseOverEditor(events))
 {
   pasteTextInEditor(source.Text, events.x, events.y);
 }
}


function pasteTextInEditor(text, x,y)
{
 var editor = document.getElementById('<%= RadEditor1.ContainerClientID %>');
 editor.focus();
 var range = document.selection.createRange();
 range.moveToPoint(x,y);
 range.pasteHTML(text);
 range.select();
 range.collapse(false);
}
        

You can also wire the AfterClientMove handler of Telerik RadTreeView - executed each time the user moves the mouse while dragging the node. This comes handy if you want to change the mouse cursor so that end-users know where they can actually drag the node - only in the editor area, e.g.:

  Copy Code
function MyMoveHandler(events)
{
 if (!IsMouseOverEditor(events))
 {
   document.body.style.cursor = "no-drop";
 }
 else
 {
   document.body.style.cursor = "hand";
 }
}
        

See Also