RADEditor: drag and drop from radlistbox not appending to the end of the editor

8 posts, 0 answers
  1. Tech
    Tech avatar
    3 posts
    Member since:
    Nov 2011

    Posted 07 Jan 2012 Link to this post

    Hi,

       I am trying to drag and drop the radlistbox items to the radEditor control. It works fine but when I already have a text into editor and trying to drop the listbox item it pastes the text at the beginning of the editor control. I want to append at the end of the editor. I used pasteHTML method to paste the text.

    Please help....

    Thanks...

  2. Rumen
    Admin
    Rumen avatar
    14351 posts

    Posted 09 Jan 2012 Link to this post

    Hi,

    For your convenience I prepared an example demonstrating the requested solution. Here it is:
    <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>



    I used as a base the code from the Drag-and-drop Images in RadEditor demo.


    All the best,
    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
  3. Tech
    Tech avatar
    3 posts
    Member since:
    Nov 2011

    Posted 09 Jan 2012 Link to this post

    Thanks for your reply. but I'm doing the same thing but its not working and even it's returning false in this condition

    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;
          }

    mouseY is less than editoryRect.y. I dont know why it's making it false. 


    here is my html code

     <table cellpadding="0" cellspacing="0" border="0">
                        <tr>
                            <td>
                                <telerik:RadEditor runat="server" OnClientLoad="OnClientLoad" ID="radBody">
                                  
                                </telerik:RadEditor>
                                  
                            </td>
                            <td style="width: 20px">
                            </td>
                            <td valign="top">
                                Tag Names<br />
                                <telerik:RadListBox ID="radTagNames" runat="server" Width="200px" Height="200px"
                                    AllowTransfer="true" AllowReorder="true" AutoPostBackOnReorder="true" EnableDragAndDrop="true"
                                    OnClientDragging="OnClientNodeDragging" OnClientDropping="OnClientNodeDropping"
                                    OnClientDragStart="OnClientNodeDragStart">
                                </telerik:RadListBox>
                            </td>
                        </tr>
                    </table>

    RadEditor's default content comes from database. and RadListBox's items comes from database too.

    Don't know where I'm doing wrong. Please advise.

    Thanks.
  4. Rumen
    Admin
    Rumen avatar
    14351 posts

    Posted 10 Jan 2012 Link to this post

    Hi,

    Did you make unselectable the listbox items via the makeUnselectable(tree.get_element()); function? If they are selectable the selection will be lost.

    You can see how the solution works in the following video: http://screencast.com/t/q7vsA2ysa.
    For your convenience I have also attached my test project.

    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
  5. Leandro
    Leandro avatar
    7 posts
    Member since:
    Apr 2011

    Posted 10 Jan 2014 Link to this post

    Is it possible to insert the listbox text in the mouse location?

    best regards,
    Leandro
  6. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5459 posts

    Posted 15 Jan 2014 Link to this post

    Hi Leandro,

    I am afraid there is no suitable way of monitoring what is the element below the mouse where the drop is attempted, in order to modify it. There are numerous limitations for that, to name a few:
    - usually the document in the RadEditor is in an iframe, which makes it a separate context, so events cannot bubble as expected
    - even if ContentAreaMode is Div so the documents are the same, it is not easy to determine which is the node over which the cursor is, and more precisely - where over that node (i.e., where exactly amongst all the HTML inside the node) the cursor is.
    - if there is no actual node (i.e., only text) this will be even harder

    Perhaps the closest possible option is to append the value of the dragged node to the HTML currently at the given node. Note that also the modal overlay will need to be removed.
    Here is a small example of this, based on the previous code, so I am adding only the modifications:
        <telerik:RadEditor ContentAreaMode="div" ID="RadEditor1" OnClientLoad="OnClientLoad" runat="server">
        <ImageManager ViewPaths="~/Images" UploadPaths="~/Images" />
        <Content>
        <p>i am a paragraph</p>
        line one
        <br />
        line two</Content>
    </telerik:RadEditor>

    function OnClientNodeDropping(sender, args) {
        var editor = $find("<%=RadEditor1.ClientID%>");
        var event = args.get_domEvent();
        event.target.innerHTML += sender.get_selectedItem().get_value();
        document.body.style.cursor = "default";
    }

    function setOverlayVisible(toShow)
    {
        //this can be removed as functionality entirely
        //for demonstration I only remove the function contents
    }

    Note how the lines that are outside of the paragraph get the text added at their end always.

    If you can modify this further to make it closer to your original idea, and post it as a code library project we will gladly award your efforts with Telerik points. Note that this entire concept is not supported by the controls and I cannot guarantee my sample will always work as expected or even that your requirement is even possible. This should be thoroughly tested (for starters, because ContentAreaMode=div is not the recommended mode of the editor and may have issues) and implemented by the developer.

    Best Regards,
    Marin Bratanov
    Telerik
    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 the blog feed now.
  7. Leandro
    Leandro avatar
    7 posts
    Member since:
    Apr 2011

    Posted 22 Jan 2014 Link to this post

    Hello, 

    I saw this video: http://screencast.com/t/q7vsA2ysa
    when the mouse is hovering over the editor the cursor is set to "no-drop" how can I change it to "hand" only when the mouse is hovering over the editor?

    Thanks,
    Leandro
  8. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5459 posts

    Posted 23 Jan 2014 Link to this post

    Hello Leandro,

    If you examine the OnClientNodeDragging function you will see the logic that changes the cursor, so you can remove or modify it. I am attaching here the original demo with some suggestions and improvements. You can examine it to see how the cursor position is calculated, and you can choose whatever cursor you like.


    Regards,
    Marin Bratanov
    Telerik
    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 the blog feed now.
Back to Top