PROBLEM Dragging node from RadTreeView into RadEditor's content area (RadEditor 4.x only)
RadTreeView 3.0 supports dragging a treenode onto any Html Element and that of course includes RadEditor as well. Imagine a common scenario - you have a treeview structure with custom data (links, text, custom values) - simply dragging the nodes into the 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 tree-view with all channel / posting links in MCMS (or Sharepoint) and simply drag the links into RadEditor thus avoiding the tedious and error prone process of selecting a link from the links popup that comes built-in with these products.
Here's how this can be achieved. Simply define a page with a treeview and editor instances, for example:
<form id="Form1" method="post" runat="server">
Make sure you 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.
BeforeClientDrop accepts 3 parameters:
function DropHandler(source, dest, events)
The first parameter (source) is the instance of the node being dragged. It is always set to an instance of a node and cannot be null.
The second parameter (dest) is 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 tree-node.
The third parameter (events) is set to the instance of the current browser events and can be used to detect the Html Element which the user is dropping the node to.
Basically, the element is detected by using the events.srcElement (for Explorer, events.target for Netscape based browser) property - 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's an example - we want to detect if the end-user drops a node onto our RadEditor instance (ID=RadEditor1). We define a java-script method that checks if the currently active Html Element is the editor in question, e.g.
var target = (document.all) ? events.srcElement : events.target;
parentNode = target;
while (parentNode != null)
if (parentNode.id == '<%= RadEditor1.ContainerClientID %>')
parentNode = parentNode.parentNode;
and finally 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:
function MyDropHandler(source, dest, events)
document.body.style.cursor = "default";
pasteTextInEditor(source.Text, events.x, events.y);
function pasteTextInEditor(text, x,y)
var editor = document.getElementById('<%= RadEditor1.ContainerClientID %>');
var range = document.selection.createRange();
You can also wire the AfterClientMove handler of 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.:
document.body.style.cursor = "no-drop";
document.body.style.cursor = "hand";
You can find a project demonstrating the aforementioned functionality in action attached to this ticket thread.