Drag and Drop dont work well on user control

1 posts, 0 answers
  1. Ryan
    Ryan avatar
    2 posts
    Member since:
    Aug 2012

    Posted 06 Sep 2012 Link to this post

    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

Back to Top