Aaron Ford
Top achievements
Rank 1
Rank 1
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
0
Accepted
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:
Server-Side:
Client-Side:
For your convenience I am attaching the whole test page.
Greetings,
Veselina
the Telerik team
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.
0
Aaron Ford
Top achievements
Rank 1
Rank 1
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!
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!