Drag and drop RadTreeView node to RadEditor

[Themos]

Hello,

I've followed your example for dragging and dropping the contents of a RadTreeView node into an input box, like this:

function droppedOnInput(args) {
 var target = args.get_htmlElement();
 if (target.tagName == "INPUT") {
     target.style.cursor = "INPUT";
     target.value += args.get_sourceNode().get_text();
     args.set_cancel(true);
     return true;
 }

the target.value is the textbox's text field, and I'm able to append to it the name of the node using += .

Is there a similar way I can append it to the Content of a RadEditor??

Thanks in advance

[Themos]

any idea how this can be achieved? how hard could it be??

[Plamen]

Hi Themos,

RadTreeView uses iframe in its rendering so the drag and drop do not work.

Best wishes,
Plamen Zdravkov
the Telerik team

[Themos]

But you have been able to drag&drop an image from a radtreeview to a radeditor:
http://demos.telerik.com/aspnet-ajax/editor/examples/treeviewandeditor/defaultcs.aspx

Shouldn't the functionality the same??
ps: overwriting the editor's contents is also an acceptable choice, it doesn't have to paste the text in a specific location!

Another suggestion would be to double click (or keypress somehow) the tree node, and have its .text value be inserted into the editor's .content field? would that be possible?

Any help on this matter would be greatly appreciated, I know lots of people could use it!

Regards

[Themos]

Any ideas how we can get the radtreeview to interact with the radeditor from client-side?

[Plamen]

Hello Themos,

It looks that you can achieve this by using the RadEditor's method "pasteHtml".

Here is the code that I changed in the demo that you linked to achieve this:

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 imageSrc = args.get_sourceNode().get_text();
//              if (imageSrc && (imageSrc.indexOf(".gif") != -1 || imageSrc.indexOf(".jpg") != -1))
//              {
                    var imageSrc =  imageSrc ;
                    editor.setFocus();
                    editor.pasteHtml(imageSrc);
                //}
            }
            setOverlayVisible(false);
        }

Hope this is helpful.

All the best,
Plamen Zdravkov
the Telerik team

[Themos]

Thanks a lot, it worked great!! I didn't want to use the setOverlayVisible function so I removed it from the code, that's why it didn't work!

Do you happen to have any idea how can get it to drop the overlay and paste the contents in a textbox instead (depending on the user selection?)

I tried it like this (continuing from your code):

var result = isMouseOverEditor(editor, event);

if (result) {

    var quickText = args.get_sourceNode().get_text();

    editor.setFocus();

    editor.pasteHtml(quickText);

    setOverlayVisible(false);

}

else {

    setOverlayVisible(false);

    droppedOnInput(args);

}

and the droppedOnInput function like this:

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

but the alert(target.tagName) returns the <DIV> element of the overlay (even though I set it to false before calling the droppedOnInput function..) is there a way we can force the page to render as soon as we disable the overlay, so that the subsequent code can be executed correctly?

PS: your method refers to the RadEditor1 directly by name. Is there a way it could instead detect the name of the editor that the user's mouse is currently over (e.g. if there are more than one RadEditors in the page)?

Apologies for the long question, and thanks again for what you've done so far!

Regards

[Themos]

I finally got it to work with double clicking and JavaScript, and depending on the specific treenode's value I append it to the respective RadEditor!

I guess it's a decent solution, and I can still use drag&drop to textboxes, so that's a bonus! but it would be nice if we could get drag&drop to work on radeditors without having to specify the div thingy...

ps: your overlay function for determining the editor's position is not relative to the page moving up and down, it seems to be fixed to its original position? or am I not understanding it correctly?

[chiranjeevi]

Hi thomose,
i tried same from rad treeview node string  dragged to rad editor but its not pasted in to editor can u help me....
Hear is my code
<telerik:RadTreeView ID="RadTreeView2" runat="server" EnableDragAndDrop="True" OnClientNodeDragging="OnClientNodeDragging" OnClientNodeDropped="OnClientNodeDropping" Width="200px" Skin="Default">
   <Nodes>
     <telerik:RadTreeNode Text="1" Value="1">
          <Nodes>
        <telerik:RadTreeNode Text="11" Value="11"></telerik:RadTreeNode>
        <telerik:RadTreeNode Text="12" Value="12"></telerik:RadTreeNode>
        <telerik:RadTreeNode Text="13" Value="13"></telerik:RadTreeNode>
        <telerik:RadTreeNode Text="14" Value="14"></telerik:RadTreeNode>
        <telerik:RadTreeNode Text="15" Value="15"></telerik:RadTreeNode>
        <telerik:RadTreeNode Text="16" Value="16"></telerik:RadTreeNode>
        <telerik:RadTreeNode Text="17" Value="17"></telerik:RadTreeNode>
        <telerik:RadTreeNode Text="18" Value="18"></telerik:RadTreeNode>
        <telerik:RadTreeNode Text="19" Value="19"></telerik:RadTreeNode>
   </Nodes>
     </telerik:RadTreeNode>
     <telerik:RadTreeNode Text="2" Value="2">
         <Nodes>
            <telerik:RadTreeNode Text="21" Value="21"></telerik:RadTreeNode>
            <telerik:RadTreeNode Text="22" Value="22"></telerik:RadTreeNode>
            <telerik:RadTreeNode Text="23" Value="23"></telerik:RadTreeNode>
            <telerik:RadTreeNode Text="24" Value="24"></telerik:RadTreeNode>
            <telerik:RadTreeNode Text="25" Value="25"></telerik:RadTreeNode>
    </Nodes>
     </telerik:RadTreeNode>
   </Nodes>
</telerik:RadTreeView>
<telerik:RadEditor  Width="500" Height="500" ID="RadEditor2" runat="server">
</telerik:RadEditor>
<script language="javascript" type="text/javascript">
    function OnClientNodeDragging(sender, args) {


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


        document.body.style.cursor = "default";
        var result = isMouseOverEditor(editor, event);
        if (result) {
            var imageSrc = args.get_sourceNode().get_text();
            var imageSrc = imageSrc;
            editor.setFocus();
            editor.pasteHtml(imageSrc);
            setOverlayVisible(false);           
        }
    }
    function call() {
        var editor = $find("<%=RadEditor2.ClientID%>");
        alert(editor.get_Text);
        alert(editor.get_Node);
    }
    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();
    }
</script>
///i tried so ways but i didn't get the result and the draaged value doesn't paste to editor

[Plamen]

Hello Chiranjeevi,

In order to drop an item over the iframe-based content area of RadEditor, we create an overlay drop area over RadEditor. The drop area must have a z-index higher than that of the modal popup extender. So
you need to add the following css fix:

.TelerikModalOverlay
{ 
     z-index: 100001 !important;
} 

Here is a video capture of our test using the local examples and the above css -http://screencast.com/t/0KxdP8FqSgN

Greetings,
Plamen Zdravkov
the Telerik team

[Ahmed]

Hello everybody,

I am facing a couple of problems:

1) This demo link (http://www.telerik.com/community/forums/aspnet-ajax/treeview/drag-and-drop-radtreeview-node-to-radeditor.aspx) does not do the drag and drop functionality when viewed in IE 8, however it works perfectly fine in Chrome.

2) I have modified the code on the above link and when I drag a node I want the text of the node to be placed in the editor where the cursor is. Again, its working fine in Chrome but in IE it always adds the text at the very beginning. Can you help me as I want it to add the text at cursor location instead of beginning.

Thanks.

[Plamen]

Hello Ahmed,

 
I have tested the issue locally and it worked as expected at my side. Here you can see a video of the test. In IE8 the javascript code is handled much slowly than in Chrome and sometimes this may cause different behavior in similar scenarios.

Hope this will be helpful.

Kind regards,
Plamen Zdravkov
the Telerik team

[RJ]

@Themos
How were you able to do drag and drop to both Textbox and RadEditor? Whenever I use  setOverlayVisible(true); it makes my whole page equal to DIV using "arg.get_htmlElement().tagname"  so there's no way for me to be able to make drop to INPUT or any control aside from RadEditor, and if I don't use setOverlayVisible(true); I can no longer drop node to RadEditor but can drop node to Texboxes/Textareas.
Is there a way to just make the setOverlayVisible(true); be the same size of the RadEditor not the whole page? So that I can also drop nodes to other controls.

Thanks in advance...
RJ

[RJ]

Anybody home?

[Plamen]

Hi RJ,

 
You can add this css to the on-line demo and refer to the Drag and Drop RadTreeView demo where is shown how to drop on other HTML elements:

.TelerikModalOverlay {
           z-index: 100000 !important;
           height: 300px !important;
           width: 300px !important;
           top: 500px !important;
           left: 800px !important;
       }

Hope this will be helpful.

Regards,
Plamen
the Telerik team

[RJ]

Thank you so much Plamen, I thought no one will ever look into this. Though I still have 1 question left and 1 bug found, doubleclicking the radtreeview item will put the item on either textbox or radeditor on where the cursor is. (I just dont know how to start or cant find any sample)..  Bug found is when my treeview is inside a user control. the dragged items are always on the start, not on the cursor.  Im having JS error also on this item..


function OnClientLoad(editor) {
            var tree = $find("<%= RadTreeView1.ClientID %>");              <-- This dont work on page master thats why I change this to 
            makeUnselectable(tree.get_element());
}

function OnClientLoad(editor) {
            var tree = document.getElementById("ctl00_BodyContentPlaceHolder_Uc1_RadTreeView1");    <-- this
            makeUnselectable(tree.get_element());  <--  Error on this : Object doesnt support propery or method... get_element
}

Thanks again so much

[Plamen]

Hello,

 
In this case you can try finding the object with jQuery first and after that with $find as in the code below:

function pageLoad() {
           var $ = $telerik.$;
           var jQueryTreeObject = $("[id$='RadTreeView1']");
           var tree = $find(jQueryTreeObject.attr("id"));
       }

Hope this will help you.

All the best,
Plamen
the Telerik team

[RJ]

Thanks Plamen, but it seems that I cant make it work with pages with Masterpage. Seems like I just have to settle with treeview included in my page, not inside usercontrols and just been added to the page.