RadListBox drag and drop into a RadEditor in IE

2 posts, 0 answers
  1. Ricard Bertran Vall
    Ricard Bertran Vall avatar
    18 posts
    Member since:
    Sep 2009

    Posted 09 Nov 2011 Link to this post

    I'm using a RadListBox to drag and drop some values into a RadEditor, when I used it inFirefox it inserts de value where i have the cursor, but in IE it inserts the Radlistbox value always in the beginnig of the RadEditor content, i'm using the function: editor.pasteHtml("..."); as you have in the sample of emoticons, but no works for me..

    Here I write me code lines:
    <telerik:RadListBox ID="RadListbox1" runat="server" EnableDragAndDrop="True"  OnClientDragStart="OnClientDragStart" OnClientDragging="OnClientDragging" OnClientDropping="OnClientDropping"
            Width="250px" Height="100px" SelectionMode="Single" AllowDelete="false" >
            <ButtonSettings ReorderButtons="Common"></ButtonSettings>
        </telerik:RadListBox>
     
        <telerik:RadEditor OnClientLoad="OnClientLoad" ID="RadEditor1" runat="server" SkinID="DefaultSetOfTools" Visible="true" EditModes="Design"
            Height="500px" Width="650px" StripFormattingOnPaste="All" ToolsFile="~/App_GlobalResources/ToolsFile.xml"
            SpellCheckSettings-AllowAddCustom="false" SpellCheckSettings-DictionaryLanguage="es-ES"
            SpellCheckSettings-DictionaryPath="~/App_Data/RadSpell/" ContentAreaCssFile="EditorContentAreaStyles.css"  >
            <ImageManager EnableImageEditor="false" ViewPaths="" MaxUploadFileSize="512000" >
            </ImageManager>
            <Modules>
                <telerik:EditorModule Name="RadEditorStatistics" Visible="false" Enabled="true" />
                <telerik:EditorModule Name="RadEditorDomInspector" Visible="false" Enabled="true" />
                <telerik:EditorModule Name="RadEditorNodeInspector" Visible="false" Enabled="true" />
                <telerik:EditorModule Name="RadEditorHtmlInspector" Visible="false" Enabled="true" />                   
            </Modules>               
       

    <script type="text/javascript">
    //<![CDATA[
     
         function OnClientLoad(editor) {
             var list = $find("<%= RadListbox1.ClientID %>");
             makeUnselectable(list.get_element());
         }

         function OnClientDragStart() {         
             setOverlayVisible(true);
         }

         function OnClientDropping(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 span_value = args.get_sourceItem().get_text();

                 if (span_value) {                                 
                     editor.setFocus();
                     editor.pasteHtml("{" + span_value + "}");
                     args.set_cancel(true);
                 }
             }
             setOverlayVisible(false);
         }

         function OnClientDragging(sender, args) {
             var editor = editor = $find("<%=RadEditor1.ClientID%>");
             var event = args.get_domEvent();
             
             if (isMouseOverEditor(editor, event)) {
                 document.body.style.cursor = "hand";
             }
             else {
                 document.body.style.cursor = "no-drop";
             }
         }

         /* ================== Utility methods needed for the Drag/Drop ===============================*/
         
         function makeUnselectable(element) {         
             var nodes = element.getElementsByTagName("li");
             
             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.clientX;
             var mouseY = events.clientY;         

             if (mouseX < (editorRect.x + editorRect.width) &&
                 mouseX > editorRect.x &&
                    mouseY < (editorRect.y + editorRect.height) &&
                 mouseY > editorRect.y) {
                 return true;
             }
             return false;
         }

    </script>


    And I want to know if I can have another icon when I drag one item to the RadEditor, not the forbidden icon.

    Thanks,

  2. Rumen
    Admin
    Rumen avatar
    14431 posts

    Posted 10 Nov 2011 Link to this post

    Hello Ricard,

    Using the code below I was able to drag and drop an item from RadListBox to RadEditor in IE and Firefox on cursor position:
    <telerik:RadEditor ID="RadEditor1" OnClientLoad="OnClientLoad" runat="server">
        <ImageManager ViewPaths="~/Images" UploadPaths="~/Images" />
    </telerik:RadEditor>
      
    <script type="text/javascript">
        function OnClientLoad(editor) {
            var tree = $find("<%= RadListBox1.ClientID %>");
            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 = sender.get_selectedItem().get_value();
                editor.setFocus();
                editor.pasteHtml(itemValue);
            }
            setOverlayVisible(false);
        }
     
     
        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 {
                document.body.style.cursor = "no-drop";
            }
        }
     
     
        /* ================== 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.clientX;
            var mouseY = events.clientY;
     
            if (mouseX < (editorRect.x + editorRect.width) &&
             mouseX > editorRect.x &&
                mouseY < (editorRect.y + editorRect.height) &&
             mouseY > editorRect.y) {
                return true;
            }
            return false;
        }
    </script>
         
        <telerik:RadListBox ID="RadListBox1" runat="server" Width="200px" Height="200px"
             AllowTransfer="true" AllowReorder="true" AutoPostBackOnReorder="true" EnableDragAndDrop="true"
             OnClientDragging="OnClientNodeDragging"
             OnClientDropping="OnClientNodeDropping"
             OnClientDragStart="OnClientNodeDragStart"
             >
            <Items>
                <telerik:RadListBoxItem Text="Argentina" />
                <telerik:RadListBoxItem Text="Australia" />
                <telerik:RadListBoxItem Text="Brazil" />
                <telerik:RadListBoxItem Text="Canada" />
                <telerik:RadListBoxItem Text="Chile" />
                <telerik:RadListBoxItem Text="China" />
                <telerik:RadListBoxItem Text="Egypt" />
                <telerik:RadListBoxItem Text="England" />
                <telerik:RadListBoxItem Text="France" />
                <telerik:RadListBoxItem Text="Germany" />
                <telerik:RadListBoxItem Text="India" />
                <telerik:RadListBoxItem Text="Indonesia" />
                <telerik:RadListBoxItem Text="Kenya" />
                <telerik:RadListBoxItem Text="Mexico" />
                <telerik:RadListBoxItem Text="New Zealand" />
                <telerik:RadListBoxItem Text="South Africa" />
            </Items>
        </telerik:RadListBox>

    You can download a sample project from here.

    The drag icon can be changed from this code:
     document.body.style.cursor = "no-drop"; 
    The available in CSS cursors are listed in this article: http://www.echoecho.com/csscursors.htm.

    Best regards,
    Rumen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top