ImageSaving doesn't update other controls on page

3 posts, 1 answers
  1. Aaron Ford
    Aaron Ford avatar
    4 posts
    Member since:
    Nov 2008

    Posted 09 Aug 2012 Link to this post

    In my RadImageEditor declaration, I use the OnClientCommandExecuting attribute to prevent the save dialog from appearing.  I also use the OnImageLoading and OnImageSaving attributes so I can load/save the image to a database.  In the ImageSaving routine, I am trying to provide a success/fail confirmation on the screen by setting a label's text property to "File Saved".

    When I click the Save button in the RadImageEditor, the file is saved but the label text is never updated.

    I found a work around by adding my own asp.button on the form and calling the SaveEditableImage("",true) method.  But I'm hoping I can get the RadImageEditor save button to work.  In case is makes an difference, I'm currently using dll version 2011.3.1305.35.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="RadTest1._Default" %>
     
    <%@ 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>
        <telerik:RadCodeBlock ID="codeblock1" runat="server">
     
            <script type="text/javascript">
                function OnClientCommandExecuting(sender, eventArgs) {
                    if (eventArgs.get_commandName() == 'Save') {
                        var imEditor = $find("<%= RadImgEdt.ClientID %>");
                        imEditor.saveImageOnServer('', true);
                        imEditor.setToggleState('Save', false);
                        eventArgs.set_cancel(true);
                    }
                }
            </script>
     
        </telerik:RadCodeBlock>
    </head>
    <body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI"
                    Name="Telerik.Web.UI.Common.Core.js">
                </asp:ScriptReference>
                <asp:ScriptReference Assembly="Telerik.Web.UI"
                    Name="Telerik.Web.UI.Common.jQuery.js">
                </asp:ScriptReference>
                <asp:ScriptReference Assembly="Telerik.Web.UI"
                    Name="Telerik.Web.UI.Common.jQueryInclude.js">
                </asp:ScriptReference>
            </Scripts>
        </telerik:RadScriptManager>
        <div>
            <asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" />
            <asp:Button ID="btnClose" runat="server" Text="Close" />
            <asp:Label ID="lblError" runat="server" EnableViewState="false" style="color: Red; margin-left: 5px;" />
        </div>
        <div style="margin-top: 50px;">
            <telerik:RadImageEditor ID="RadImgEdt" runat="server"
                OnImageLoading="RadImgEdt_ImageLoading"
                OnImageSaving="RadImgEdt_ImageSaving"
                OnClientCommandExecuting="OnClientCommandExecuting"
                Width="95%" Height="600px" style="top: 0px; left: 0px">
            </telerik:RadImageEditor>
        </div>
    </form>
    </body>
    </html>

    protected void RadImgEdt_ImageLoading(object sender, Telerik.Web.UI.ImageEditorLoadingEventArgs args)
    {
        //TODO - Get image from imaging database
        string filename = Server.MapPath("TestImages");
        filename = Path.Combine(filename, "FatCat.jpg");
        MemoryStream mstream = new MemoryStream(File.ReadAllBytes(filename));
     
        Telerik.Web.UI.ImageEditor.EditableImage img = new Telerik.Web.UI.ImageEditor.EditableImage(mstream);
        args.Image = img;
        args.Cancel = true;
    }
     
    protected void RadImgEdt_ImageSaving(object sender, Telerik.Web.UI.ImageEditorSavingEventArgs args)
    {
        //TODO - Save image to imaging database
        string filename = Server.MapPath("TestImages");
        filename = Path.Combine(filename, string.Format("FatCat-{0}.jpg", DateTime.Now.ToString("yyyyMMdd-hhmmss")));
     
        Telerik.Web.UI.ImageEditor.EditableImage img = args.Image;
        img.Image.Save(filename);
        lblError.Text = "File Saved";
        args.Cancel = true;
    }
     
    protected void btnSave_Click(object sender, EventArgs e)
    {
        RadImgEdt.SaveEditableImage("", true);
    }
  2. Answer
    Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 14 Aug 2012 Link to this post

    Hi Aaron,

    The reason for this behavior is that ImageEditor updates itself on a CallBack, while the page renders itself on a PostBack. In order to overcome this situation, you can set the desired text as an arg's argument in the  OnImageSaving event server method and to use its value in the OnClientSaved event handler:

    ASP:
    <telerik:RadImageEditor ID="RadImgEdt" runat="server"
        OnImageLoading="RadImgEdt_ImageLoading"
        OnImageSaving="RadImgEdt_ImageSaving"
        OnClientSaved="imgEditorSavedHandler"
        OnClientCommandExecuting="OnClientCommandExecuting"
        Width="95%" Height="600px" style="top: 0px; left: 0px">
    </telerik:RadImageEditor>

    Server-Side:
    protected void RadImgEdt_ImageSaving(object sender, Telerik.Web.UI.ImageEditorSavingEventArgs args)
    {
        ...
        //lblError.Text = "File Saved";
        args.Argument = "File Saved";
     
        args.Cancel = true;
    }

    Client-Side:
    <script type="text/javascript">
        function imgEditorSavedHandler(imgEditor, args) {
            $get("<%=lblError.ClientID %>").innerHTML = args.get_argument();
        }
    </script>

    For your convenience I am attaching the whole test page.

    Greetings,
    Veselina
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Aaron Ford
    Aaron Ford avatar
    4 posts
    Member since:
    Nov 2008

    Posted 14 Aug 2012 Link to this post

    Thanks, that's exactly what I was hoping for!

    This sample code might be a helpful addition to the ImageEditor sample library or to the ImageEditor Demo pages.  I saw a number of posts where people were trying to suppress the Save dialog and load/save the image to a database.  If had started with this sample, I would have been done in 10 minutes instead of playing around with the control for a couple days.

    But, I'm not complaining.  I still saved a lot of time using the control instead of making my own .aspx page to do something similar.  Awesome control!
Back to Top