Use RadImageEditor as a form element

9 posts, 1 answers
  1. Jan
    Jan avatar
    30 posts
    Member since:
    Mar 2014

    Posted 24 May Link to this post

    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?

  2. Vessy
    Admin
    Vessy avatar
    1678 posts

    Posted 25 May Link to this post

    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.
  3. Jan
    Jan avatar
    30 posts
    Member since:
    Mar 2014

    Posted 29 May in reply to Vessy Link to this post

    [...] 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).

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

  4. Jan
    Jan avatar
    30 posts
    Member since:
    Mar 2014

    Posted 29 May in reply to Jan Link to this post

    Jan said:

    [...] 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).

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

     

    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.        }
  5. Vessy
    Admin
    Vessy avatar
    1678 posts

    Posted 31 May Link to this post

    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.
  6. Jan
    Jan avatar
    30 posts
    Member since:
    Mar 2014

    Posted 01 Jun in reply to Vessy Link to this post

    That might work, but what about a custom button to Save, then the "ClientImageSaved" Method is never called...
  7. Answer
    Vessy
    Admin
    Vessy avatar
    1678 posts

    Posted 05 Jun Link to this post

    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.
  8. Jan
    Jan avatar
    30 posts
    Member since:
    Mar 2014

    Posted 07 Jun Link to this post

    Works perfectly, thanks!!
  9. Vessy
    Admin
    Vessy avatar
    1678 posts

    Posted 07 Jun Link to this post

    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.
Back to Top