Drag and drop RadTreeView node to RadEditor

18 posts, 0 answers
  1. Themos
    Themos avatar
    18 posts
    Member since:
    Jul 2011

    Posted 26 Jul 2011 Link to this post

    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
  2. Themos
    Themos avatar
    18 posts
    Member since:
    Jul 2011

    Posted 28 Jul 2011 Link to this post

    any idea how this can be achieved? how hard could it be??
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Plamen
    Admin
    Plamen avatar
    2731 posts

    Posted 29 Jul 2011 Link to this post

    Hi Themos,

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

    Best wishes,
    Plamen Zdravkov
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  5. Themos
    Themos avatar
    18 posts
    Member since:
    Jul 2011

    Posted 30 Jul 2011 Link to this post

    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
  6. Themos
    Themos avatar
    18 posts
    Member since:
    Jul 2011

    Posted 01 Aug 2011 Link to this post

    Any ideas how we can get the radtreeview to interact with the radeditor from client-side?
  7. Plamen
    Admin
    Plamen avatar
    2731 posts

    Posted 02 Aug 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  8. Themos
    Themos avatar
    18 posts
    Member since:
    Jul 2011

    Posted 02 Aug 2011 Link to this post

    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
  9. Themos
    Themos avatar
    18 posts
    Member since:
    Jul 2011

    Posted 04 Aug 2011 Link to this post

    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?
  10. chiranjeevi
    chiranjeevi avatar
    2 posts
    Member since:
    May 2011

    Posted 10 Nov 2011 Link to this post

    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
  11. Plamen
    Admin
    Plamen avatar
    2731 posts

    Posted 15 Nov 2011 Link to this post

    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
    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
  12. Ahmed
    Ahmed avatar
    6 posts
    Member since:
    Sep 2011

    Posted 14 Mar 2012 Link to this post

    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.
  13. Plamen
    Admin
    Plamen avatar
    2731 posts

    Posted 19 Mar 2012 Link to this post

    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
    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.
  14. RJ
    RJ avatar
    386 posts
    Member since:
    Oct 2006

    Posted 05 Sep 2012 Link to this post

    @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

  15. RJ
    RJ avatar
    386 posts
    Member since:
    Oct 2006

    Posted 18 Sep 2012 Link to this post

    Anybody home?
  16. Plamen
    Admin
    Plamen avatar
    2731 posts

    Posted 21 Sep 2012 Link to this post

    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
    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.
  17. RJ
    RJ avatar
    386 posts
    Member since:
    Oct 2006

    Posted 21 Sep 2012 Link to this post

    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
  18. Plamen
    Admin
    Plamen avatar
    2731 posts

    Posted 26 Sep 2012 Link to this post

    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
    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.
  19. RJ
    RJ avatar
    386 posts
    Member since:
    Oct 2006

    Posted 27 Sep 2012 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017