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