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

Use RadImageEditor as a form element

8 Answers 209 Views
ImageEditor
This is a migrated thread and some comments may be shown as answers.
Jan
Top achievements
Rank 1
Jan asked on 24 May 2017, 01:22 PM

I'm currently trying to build a form using several input fields and a RadImageEditor. The problem is the only way to save the picture is to call the client-side function "saveImageOnServer". This function though is called asynchronously, so sometimes the picture is hold in my Session, sometimes the button onSave - servermethod is called first and the Session is empty.

 

Is there any possiblity to ensure the image-save function is called first or to get the edited image inside the postback?

8 Answers, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 25 May 2017, 01:03 PM
Hi Jan,

All editing applied to the image edited in RadImageEditor used in Canvas mode are stored on the client, so it is no way to get the Edited image on a Postback. In order to ensure that the edited image is successfully sent to the server, I would advice that you disable the AutoPostback functionality of the saving button and move the logic of its server-side click handler to the ImageSaving event (called after the edited image is passed to the server).

A similar approach is demonstrated in the following live demo:
http://demos.telerik.com/aspnet-ajax/imageeditor/examples/customsaving/defaultcs.aspx?show-source=true


Regards,
Vessy
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Jan
Top achievements
Rank 1
answered on 29 May 2017, 06:54 AM

[quote][...] I would advice that you disable the AutoPostback functionality of the saving button and move the logic of its server-side click handler to the ImageSaving event (called after the edited image is passed to the server).
[/quote]

I already did this, the problem is still that I need to submit the form values after saving the Image successfully. In the OnImageSaving Method there are no postback values though...

0
Jan
Top achievements
Rank 1
answered on 29 May 2017, 07:35 AM
[quote]Jan said:

[quote][...] I would advice that you disable the AutoPostback functionality of the saving button and move the logic of its server-side click handler to the ImageSaving event (called after the edited image is passed to the server).
[/quote]

I already did this, the problem is still that I need to submit the form values after saving the Image successfully. In the OnImageSaving Method there are no postback values though...

[/quote]

 

I managed to misuse the filename parameter for my form values. However, how can I get back a status if my saving was successful to the client?

01.<asp:ImageButton ID="ib_save" ImageUrl="/pics_new/32x32/save.png" runat="server" AutoPostBack="False"
02.                         OnClientClick="buttonclick();" ToolTip="Speichern" Text="Speichern" />
03. 
04. 
05. function buttonclick(sender, args) {
06.                    $find("<%= rie.ClientID %>")
07.                        .saveImageOnServer(
08.                        $find("<%= rdptErstellung.ClientID %>").get_selectedDate().toISOString() + "-!#"
09.                        + document.getElementById("cbProtokollStatus").checked + "-!#"
10.                        + $find("<%= rddlSchicht.ClientID %>").get_selectedItem().get_value() + "-!#"
11.                        + $find("<%= rddlAfo.ClientID %>").get_selectedItem().get_value() + "-!#"
12.                        + $find("<%= rtbBemerkung.ClientID %>").get_value() + "-!#"
13.                        + $find("<%= rddlAbarbStatus.ClientID %>").get_selectedItem().get_value() + "-!#"
14.                        + $find("<%= rdtpRueck.ClientID %>").get_selectedDate().toISOString() + "-!#"
15.                        , true);
16.}
17. 
18. 
19. protected void rie_OnImageSaving(object sender, ImageEditorSavingEventArgs e)
20.        {
21.            using (var stream = new MemoryStream())
22.            {
23.                e.Image.Image.Save(stream, ImageFormat.Png);
24.                Session["Bild"] = stream.ToArray();
25.                SaveProtokoll(e.FileName);
26.            }
27.        }
0
Vessy
Telerik team
answered on 31 May 2017, 02:38 PM
Hi Jan,

The ImageEditor updates itself on a Callback thus it is not possible to update other controls on the page (or perform a full Postback) while the edited image is being saved.

A possible approach you can consider is attaching a handler to the client-side Saved event of the control, that is called just after the image has been successfully saved and perform a postback manually in it. You can either call the __doPostback() function are click() of a hidden button, assigning the needed server-side logic to its server-side click handler.

For example you can have a similar implementation:
<telerik:RadImageEditor ID="RadImageEditor1" runat="server" ImageUrl="~/image.png" OnClientSaved="onImageSaved" OnImageSaving="RadImgEdt_ImageSaving" Skin="Default">
</telerik:RadImageEditor>
<div style="display:none">
    <telerik:RadButton ID="hiddenButton" runat="server" OnClick="hiddenButton_Click"></telerik:RadButton>
</div>
<script>
    function onImageSaved(imageEditor, args) {
        $find("hiddenButton").click();
        //or
        //__doPostBack();
    }
</script>
protected void RadImgEdt_ImageSaving(object sender, Telerik.Web.UI.ImageEditorSavingEventArgs args)
{
    //Save the image to a custom location
    args.Cancel = true;
}
 
protected void hiddenButton_Click(object sender, EventArgs e)
{
    //the desired post-image-saving logic here
    Response.Write("Server-side logic after the image is successfully saved");
}


Regards,
Vessy
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Jan
Top achievements
Rank 1
answered on 01 Jun 2017, 05:20 AM
That might work, but what about a custom button to Save, then the "ClientImageSaved" Method is never called...
0
Accepted
Vessy
Telerik team
answered on 05 Jun 2017, 04:38 PM
Hi Jan,

Can you verify that you have disabled the AutoPostback of the custom save button? The triggering of the ClientSaved event should be the same both when using the the Save tool, or a custom button:
<telerik:RadImageEditor ID="RadImageEditor1" runat="server" ImageUrl="~/image.png" OnClientSaved="onImageSaved" OnImageSaving="RadImgEdt_ImageSaving" Skin="Default">
</telerik:RadImageEditor>
<telerik:RadButton ID="CustomSaveBtn" runat="server" Text="Save" AutoPostBack="false" OnClientClicked="saveImage"></telerik:RadButton>
<div style="display:none">
    <telerik:RadButton ID="hiddenButton" runat="server" OnClick="hiddenButton_Click"></telerik:RadButton>
</div>
<script>
    function saveImage() {
        $find("RadImageEditor1").saveImageOnServer("", true);
    }
    function onImageSaved(imageEditor, args) {
        alert("saved");
        $find("hiddenButton").click();
        //or
        //__doPostBack();
    }
</script>
protected void RadImgEdt_ImageSaving(object sender, Telerik.Web.UI.ImageEditorSavingEventArgs args)
{
    //Save the image to a custom location
    args.Cancel = true;
}
  
protected void hiddenButton_Click(object sender, EventArgs e)
{
    //the desired post-image-saving logic here
    Response.Write("Server-side logic after the image is successfully saved");
}


Regards,
Vessy
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Jan
Top achievements
Rank 1
answered on 07 Jun 2017, 09:53 AM
Works perfectly, thanks!!
0
Vessy
Telerik team
answered on 07 Jun 2017, 10:39 AM
Hi,

You are welcome, Jan - I am happy to know the proposed solution is working for you.

Regards,
Vessy
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
ImageEditor
Asked by
Jan
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Jan
Top achievements
Rank 1
Share this question
or