Drag and Drag from RadTreeView inside user control to RadEditor don't work well.
I was able to do drag and drop but all items from tree view always paste at the beginning not on the cursor. This works w/o a problem when my treeview is in the same page with the editor. Also I cant do drag and drop to both textbox and radEditor, and lastly how can I do double click to paste items to both controls? My InsertNode don't work well.
Any help would be greatly appreciated.
Here's my code:
My User Control
<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="ucTreeView.ascx.vb" Inherits="MyPage.ucTreeView" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<
telerik:RadTreeView
ID
=
"RadTreeView1"
runat
=
"server"
EnableDragAndDrop
=
"true"
OnClientNodeDragging
=
"OnClientNodeDragging"
OnClientNodeDropping
=
"OnClientNodeDropping"
OnClientNodeDragStart
=
"OnClientNodeDragStart" OnClientDoubleClick="InsertNode"
>
<
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
>
</
Nodes
>
</
telerik:RadTreeNode
>
<
telerik:RadTreeNode
runat
=
"server"
Text
=
"Root RadTreeNode3"
>
</
telerik:RadTreeNode
>
</
Nodes
>
</
telerik:RadTreeView
>
My Page:
<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/MyPage/HomePage.master" CodeBehind="DragDrop1.aspx.vb" Inherits="Mypage.DragDrop1" %>
<%@ Register Src="~/MyPage/ucTreeView.ascx" TagName="ucTreeView" TagPrefix="ucTV" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<
asp:Content
ID
=
"Content1"
ContentPlaceHolderID
=
"MasterHeadArea"
runat
=
"server"
>
<
style
type
=
"text/css"
>
.TelerikModalOverlay
{
z-index: 100000 !important;
}
</
style
>
<
telerik:RadCodeBlock
ID
=
"RadCodeBlock1"
runat
=
"server"
>
<
script
type
=
"text/javascript"
>
function OnClientLoad(editor) {
var tree = document.getElementById("ctl00_BodyContentPlaceHolder_UcTreeView1_RadTreeView1");
makeUnselectable(tree.get_element());
}
function OnClientNodeDragStart() {
setOverlayVisible(true);
}
function OnClientNodeDropping(sender, args) {
var editor = $find("<%=RadEditor1.ClientID%>");
var event = args.get_domEvent();
document.body.style.cursor = "default";
var result = isMouseOverEditor(editor, event);
if (result) {
var itemValue = args.get_sourceNode().get_text();
editor.setFocus();
editor.pasteHtml(itemValue);
setOverlayVisible(false);
}
setOverlayVisible(false);
droppedOnInput(args);
}
function OnClientNodeDragging(sender, args) {
var editor = editor = $find("<%=RadEditor1.ClientID%>");
var event = args.get_domEvent();
if (isMouseOverEditor(editor, event)) {
document.body.style.cursor = "hand";
}
else {
var target = args.get_htmlElement();
if (target.tagName == "INPUT" || target.tagName == "TEXTAREA") {
target.style.cursor = "hand";
} else {
document.body.style.cursor = "no-drop";
}
}
}
function droppedOnInput(args) {
var target = args.get_htmlElement();
alert(target.tagName);
if (target.tagName == "INPUT") {
target.style.cursor = "INPUT";
target.value += args.get_sourceNode().get_text();
args.set_cancel(true);
return true;
}
}
function insertNode(sender, args) {
var target = args.get_htmlElement();
if (target.tagName == "INPUT") {
var obj = $find("<%=TextBox1.ClientID%>");
var string = args.get_sourceNode().get_text();
if (typeof (document.selection) != 'undefined') {
if (obj.createTextRange && obj.caretPos) {
var caretPos = obj.caretPos;
caretPos.text =
caretPos.text.charAt(caretPos.text.length - 1) == ' ' ?
string + ' ' : string;
}
else {
obj.value = string;
}
}
else
if (typeof (obj.selectionStart) != 'undefined') {
var start = obj.selectionStart;
obj.value = obj.value.substr(0, start)
+ string
+ obj.value.substr(obj.selectionEnd, obj.value.length);
start += string.length;
obj.setSelectionRange(start, start);
}
else
obj.value += string;
obj.focus();
} else {
var obj = $find("<%=RadEditor1.ClientID%>");
var string = args.get_sourceNode().get_text();
obj.setFocus();
obj.pasteHtml(string);
}
}
/* ================== Utility methods needed for the Drag/Drop ===============================*/
//Make all treeview nodes unselectable to prevent selection in editor being lost
function makeUnselectable(element) {
var nodes = element.getElementsByTagName("*");
for (var index = 0; index <
nodes.length
; index++) {
var
elem
=
nodes
[index];
elem.setAttribute("unselectable", "on");
}
}
//Create and display an overlay to prevent the editor content area from capturing mouse events
var
shimId
=
null
;
function setOverlayVisible(toShow) {
if (!shimId) {
var
div
=
document
.createElement("DIV");
document.body.appendChild(div);
shimId
=
new
Telerik.Web.UI.ModalExtender(div);
}
if (toShow) shimId.show();
else shimId.hide();
}
//Check if the image is over the editor or not
function isMouseOverEditor(editor, events) {
var
editorFrame
= editor.get_contentAreaElement();
var editorRect = $telerik.getBounds(editorFrame);
var
mouseX
=
events
.offsetX;
var
mouseY
=
events
.offsetY;
if (mouseX < (editorRect.x + editorRect.width) &&
mouseX > editorRect.x &&
mouseY < (editorRect.y + editorRect.height) &&
mouseY > editorRect.y) {
return true;
}
return false;
}
</
script
>
</
telerik:RadCodeBlock
>
</
asp:Content
>
<
asp:Content
ID
=
"Content2"
ContentPlaceHolderID
=
"ContentPlaceHolder1"
runat
=
"server"
>
</
asp:Content
>
<
asp:Content
ID
=
"Content3"
ContentPlaceHolderID
=
"BodyContentPlaceHolder"
runat
=
"server"
>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
runat
=
"server"
>
</
telerik:RadScriptManager
>
<
ucTV:ucTreeView
id
=
"UcTreeView1"
runat
=
"server"
>
</
ucTV:ucTreeView
>
<
asp:TextBox
ID
=
"TextBox1"
runat
=
"server"
Width
=
"312px"
></
asp:TextBox
>
<
br
/>
<
br
/>
<
telerik:RadEditor
ID
=
"RadEditor1"
OnClientLoad
=
"OnClientLoad"
runat
=
"server"
>
</
telerik:RadEditor
>
</
asp:Content
>
Thanks,
Ryan