Drag drop images into radeditor from radrotator

7 posts, 0 answers
  1. anand
    anand avatar
    8 posts
    Member since:
    Mar 2011

    Posted 22 Jun 2011 Link to this post

    HI,
        I am showing thumbnails of images(stored in ~\images\thumbnails\xyz_thumbnail.jpg) in RadRotator and when anybody drags and drops the thumbnail from the rotator into radeditor, then I need the main image(~\images\xyz.jpg) to be placed into the rad editor and not the thumbnail. Can anybody suggest the event in which I can do this and how?
  2. Rumen
    Admin
    Rumen avatar
    14028 posts

    Posted 24 Jun 2011 Link to this post

    Hello Anand,

    You could capture the drop event of the content area of RadEditor in order to achieve this.
    Below is a simple demo for implementing drag and drop using the OnClientLoad client-side handler from the example in my previous post.
    Copy Code
    function editorClientLoad(editor, args) {
                    editor.get_dialogOpener().add_close(dialogClosed);
                                                     var element = document.all ? editor.get_document().body : editor.get_document();
                    $telerik.addExternalHandler(element, "drop", function (e) {
                        setTimeout(function () {
                            var currentElement = editor.getSelectedElement(); //get reference to the selected element
                            if (currentElement.tagName == "IMG")//check if the element is a IMG
                            {
                                currentElement.parentNode.innerHTML = currentElement.outerHTML; // paste the image
                            }
                        }, 0);
     
                    });
     
    }
    // OnClientLoad handler

    Note that the above is just an example how to attach a function to the drop event, but not a fully functional solution for your scenario. Keep in mind that there might be other HTML elements dragged into the editor along with the image - you can't control this behavior of the browser.

    I hope the provided solution gives answer to your question.

    Best wishes,
    Rumen
    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.

  3. anand
    anand avatar
    8 posts
    Member since:
    Mar 2011

    Posted 27 Jun 2011 Link to this post

    Hello Rumen,

    Thanks for the reply. I implemented the below mentioned code and I successfully got the drag/drop event for rad editor.

    <telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="OnClientLoad">
            </telerik:RadEditor>

            <script type="text/javascript">
                function OnClientLoad(editor, args)
                {
                    var element = document.all ? editor.get_document().body : editor.get_document();
                    var eventHandler = $telerik.isSafari ? "dragend" : "drop";

                    $telerik.addExternalHandler(element, eventHandler, function (e)
                    {
                        setTimeout(function ()
                        {
                            var currentElement = editor.getSelectedElement(); //get reference to the selected element

                            if (currentElement.tagName == "IMG")//check if the element is a IMG
                            {
                                currentElement.parentNode.innerHTML = currentElement.outerHTML; // paste the image
                            }

                        }, 300);
                    });

                    //attach handler to the page's document
                    if ($telerik.isSafari) {
                        document.addEventListener("dragend", function ()
                        {
                            setTimeout(function ()
                            {
                                alert("OnDragEnd fired for the page document");
                            }, 300);
                        }, false);
                    }
                }
            </script>

    In above code the problem is with getSelectedElement() which returns wrong element for nested element, I get "BODY" as the nodename. I was expecting "IMG".  So could you please suggest some solution on this.

    Also if instead of using thumbnail images if we just resize the origion image's size of the rad rotator, then I think it will also work but only we need to resize the radrotator height and width dynamically. So could you please suggest me a way, how to set the values to its Width and Height properties based on image's count in the rad rotator?

    Thanks once again :-)

  4. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4819 posts

    Posted 29 Jun 2011 Link to this post

    Hello Anand,

    I am not sure how exactly you implement this drag and drop functionality, but I would suggest that you examine the following online demo: http://demos.telerik.com/aspnet-ajax/editor/examples/treeviewandeditor/defaultcs.aspx. It shows another way of pasting an image in the RadEditor - by simply creating a new img element, setting is src attribute accordingly and pasting it as html content. This is done in the OnClientNodeDropping function. You can try to implement this approach in your current scenario.

      As for changing the RadRotator's dimensions dynamically - this is only possible in the code-behind, as it requires many calculations and settings to be taken into account. If you wish to do this on the client I would recommend performing an AJAX request to make the change on the server and update the rotator only.:
    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" OnAjaxRequest="OnAjaxRequest">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadRotator1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadRotator runat="server" ID="RadRotator1"......></telerik:RadRotator>
    Call this function when you need to change the size:
    function changeRotatorSize()
    {
        $find("<%=RadAjaxManager1.ClientID %>").ajaxRequest("resizeRotator");
    }
    And in the code behind
    protected void OnAjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
    {
        if (e.Argument == "resizeRotator")
        {
            //use your custom values, these are only for demonstration
            RadRotator1.Width = Unit.Pixel(300);
            RadRotator1.Height = Unit.Pixel(100);
            RadRotator1.ItemWidth = Unit.Pixel(300);
            RadRotator1.ItemHeight = Unit.Pixel(100);
            //set the desired item as initial, since it will otherwise start from the first
            RadRotator1.InitialItemIndex = 3;
        }
    }

    You can also have the original items in the RadRotator and simply reduce the Item's size to make them look like thumbnails instead of resizing the rotator. Please note that the RadRotator requires all the items to have the same sizes and for this size to correspond with the Rotator's size.

    Kind regards,
    Marin
    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. anand
    anand avatar
    8 posts
    Member since:
    Mar 2011

    Posted 29 Jun 2011 Link to this post

    Hello Marin,

    Thanks for the reply. We have decided to disable drag/drop event of radeditor control instead of resizing the images of radrotator.

    Thanks once again :-)
  6. Rashim
    Rashim avatar
    7 posts
    Member since:
    Sep 2011

    Posted 19 Sep 2011 Link to this post

    Hi , I am new with that technology. I am facing one problem when i am going to work with that editor.

    What i need actually is given below:
    1. Need to add a Button on Editor Header Which name should be "Insert layer"
    2. When We Click this Button a fixed size Div will be added to the Editor Text Area.
    3. And We should able to drag/drop the div in any where of the Text area of Editor.

    Could you please give any idea and sample code or any link to do functionality as i have explained.

    Thanks,
    Rashim
  7. Rumen
    Admin
    Rumen avatar
    14028 posts

    Posted 21 Sep 2011 Link to this post

    Hello Rashim,

    The drag and drop event in the content area is supported by IE and Firefox only and it occurs when style="position: absolute" is applied to the DIV element. For your convenience I implemented a custom toolbar button InsertDiv which inserts a draggable DIV in the content area:

    Copy Code
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
    <title></title>
    <style type="text/css">
    .reTool .InsertDiv
    {
    background-image: url(http://demos.telerik.com/aspnet-classic/RadControls/Editor/Skins/Default/buttons/CustomDialog.gif);
    }
    </style>
    </head>
    <body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="Scriptmanager1" runat="server" />
    <telerik:RadEditor ID="RadEditor1" runat="server" ToolsFile="ToolsFile.xml"></telerik:RadEditor>
    <script type="text/javascript">
    Telerik.Web.UI.Editor.CommandList["InsertDiv"] = function (commandName, editor, args) {
    editor.pasteHtml("<div style=\"position:absolute;width:150px;height:150px;border: 1px solid red;\">sample content</div>");
    };
    </script>
    </form>
    </body>
    </html>

    You can see the following video for more information: http://screencast.com/t/WvoKCP2MtE.


    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
Back to Top