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

[Tech]

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...

[Rumen]

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

[Tech]

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.

[Rumen]

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

[Leandro]

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

best regards,
Leandro

[Marin Bratanov]

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

[Leandro]

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

[Marin Bratanov]

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