How to get Image manager's upload button's click event.

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

    Posted 22 Jun 2011 Link to this post

    HI,
           I have a Rad editor and a Rad rotator on a page. Whenever anybody uploads an image using image manager and closes it, I want to refresh the rad rotator to show the newly uploaded images. The images for a each users are saved in user specific folder.i.e. viewpath,uploadpath is set to this folder. How can I do this?
  2. Slav
    Admin
    Slav avatar
    1359 posts

    Posted 23 Jun 2011 Link to this post

    Hi Anand,

    The implementation of the requested scenario will be not trivial.
    The contents of the RadEditor's dialogs along with the Upload control, reside in an iframe, which is another document. In order to upload a file to the server, the behavior of the upload control is to refresh (update) the page. This is visible inside the Image Manager dialog. However, this process will not update the parent page where RadRotator resides and the rotator will still show its predefined set of images after the upload.

    It is important to know that you need to initiate Postback of the page if you want to update the RadRotator when new image is uploaded in RadEditor. It is up to you to decide how to update the parent page. The following KB article shows how to get a reference to the Upload control:
    http://www.telerik.com/support/kb/aspnet-ajax/editor/displaying-single-upload-control-in-the-filebrowser-upload-manager.aspx, e.g.

       protected void Page_Load(object sender, System.EventArgs args)  
        {  
            Telerik.Web.UI.RadFileExplorer rfe = (Telerik.Web.UI.RadFileExplorer)this.FindRadControl(this.Page);  
            if (rfe != null)  
            { 
                Telerik.Web.UI.RadUpload upload =  rfe.Upload;
            }  
        }  


    You can also postback the parent page when closing the Image manager. This is achievable with client-side code. In this case OnClientLoad and OnClientPasteHtml events will do the job:
    <script type="text/javascript">
                function dialogClosed(sender, args) {
                    if (args.get_navigateUrl().indexOf("ImageManager")) {
                        __doPostBack();
                    }
                }
     
                function editorClientLoad(editor) {
                    editor.get_dialogOpener().add_close(dialogClosed);
                }
                // OnClientLoad handler
     
     
                function OnClientPasteHtml(editor, args) {
                    if (args.get_commandName() == "ImageManager") {
                        __doPostBack();
                    }
                }
                // OnClientPasteHtml handler
    </script>

    Finally you should define DataSource for the RadRotator:
    protected void Page_Load(object sender, EventArgs e)
        {
            RadRotator1.DataSource = GetFilesInFolder("~/Images");// Set datasource
            RadRotator1.DataBind();
        }
    The method GetFilesInFolder, used above, returns a List collection containing paths to the images. 



    Best wishes,
    Slav
    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 24 Jun 2011 Link to this post

    Thank you very much Slav the solution worked perfectly fine.

    I have another problem with the two controls:-
       
    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. I have implemented the OnItemClicked event and that works perfectly fine but now I need a way to handle this for client side drag drop. How do I do this?
  4. Slav
    Admin
    Slav avatar
    1359 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.
    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.

    Kind regards,
    Slav
    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 28 Jun 2011 Link to this post

    Hi,
    Thanks Slav, solution for the second issue worked.
    But i found an issue in first post.
    If I do a postback in the dialogClosed or OnClientPasteHtml event then, the image that is being inserted by the image manager is lost after the postback.
    What can be done for this?
  6. Answer
    Slav
    Admin
    Slav avatar
    1359 posts

    Posted 29 Jun 2011 Link to this post

    Hello Anand,

    The issue you mentioned occurs because on dialogClosed and OnClientPasteHtml events full page postback is initiated before the content of RadEditor is saved, as this content is saved when the form is submitted and not when a postback is initiated through code. This is why I recommend updating only the RadRotator through Ajax request, which will also lead to less page loading.

    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" OnAjaxRequest="OnAjaxRequest">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadRotator1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
    </telerik:RadAjaxManager>

    Replace __doPostBack() with the function call, marked below:
    <script type="text/javascript">
                function dialogClosed(sender, args) {
                    if (args.get_navigateUrl().indexOf("ImageManager")) {
                        $find("<%=RadAjaxManager1.ClientID %>").ajaxRequest("updateRotator"); // innitiate AJAX request
                    }
                }
     
                function editorClientLoad(editor) {
                    editor.get_dialogOpener().add_close(dialogClosed);
                }
    </script>
    The OnClientPasteHtml event handler is not needed, as dialogClosed event is executed even when HTML is inserted in the content of the editor, so you should remove it.

    In code-behind rebind the data source of RadRotator when AJAX request occurs:
    protected void OnAjaxRequest(object sender, AjaxRequestEventArgs e)
        {
            if (e.Argument == "updateRotator")
            {
                RadRotator1.DataSource = GetFilesInFolder("~/Images");// Set datasource
                RadRotator1.DataBind();
            }
        }

    I have also attached a sample project, demonstrating the solution, explained above.

    Greetings,
    Slav
    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.

Back to Top