This is a migrated thread and some comments may be shown as answers.

ImageSaving doesn't update other controls on page

2 Answers 259 Views

ImageEditor

This is a migrated thread and some comments may be shown as answers.

Aaron Ford asked on 09 Aug 2012, 10:38 PM

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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 Answers, 1 is accepted

Accepted

answered on 14 Aug 2012, 03:22 PM

ImageEditor-imageSaving.zip

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.

answered on 14 Aug 2012, 04:46 PM

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!