This is a migrated thread and some comments may be shown as answers.

Drag and Drop dont work well on user control

0 Answers 53 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Ryan
Top achievements
Rank 1
Ryan asked on 07 Sep 2012, 01:04 AM

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

No answers yet. Maybe you can help?

Tags
TreeView
Asked by
Ryan
Top achievements
Rank 1
Share this question
or