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

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

7 Answers 129 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Tech
Top achievements
Rank 1
Tech asked on 07 Jan 2012, 11:42 PM
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...

7 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 09 Jan 2012, 04:30 PM
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
0
Tech
Top achievements
Rank 1
answered on 10 Jan 2012, 12:43 AM
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.
0
Rumen
Telerik team
answered on 10 Jan 2012, 01:00 PM
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
0
Leandro
Top achievements
Rank 1
answered on 10 Jan 2014, 06:16 PM
Is it possible to insert the listbox text in the mouse location?

best regards,
Leandro
0
Marin Bratanov
Telerik team
answered on 15 Jan 2014, 01:15 PM
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.
0
Leandro
Top achievements
Rank 1
answered on 22 Jan 2014, 07:47 PM
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
0
Marin Bratanov
Telerik team
answered on 23 Jan 2014, 11:25 AM
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.
Tags
Editor
Asked by
Tech
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Tech
Top achievements
Rank 1
Leandro
Top achievements
Rank 1
Marin Bratanov
Telerik team
Share this question
or