Save Button

7 posts, 0 answers
  1. Stephanie
    Stephanie avatar
    139 posts
    Member since:
    Aug 2013

    Posted 28 Jun Link to this post

    How do I use my own save button vs the save in the toolbar? The save button in the toolbar works perfectly but does not fit the theme of our application as we have save button on all other areas and want to make this one the same. The toolbar save button can remain there too.
  2. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 29 Jun Link to this post

    Hi Stephanie,

    There are two possible ways to achieve the described scenario, depending on the way you want the image to be saved:
    • if you want to show the image saving dialog when an external button is clicked, you an use the ImageEditor's fire() method
    • if you want to directly save the image when the external button is clicked, you can use saveImageOnServer() method of the control

    For example:

    <telerik:RadButton ID="SaveBtn" runat="server" AutoPostBack="false" Text="Save" OnClientClicked="onClicked"></telerik:RadButton>
     <telerik:RadImageEditor ID="ImageEditor1" runat="server"></telerik:RadImageEditor>
     <script>
         function onClicked(e) {
             //fire the Save command dialog
             $find("ImageEditor1").fire("Save");
     
             //directly save the image
             //$find("ImageEditor1").saveImageOnServer("", true)
         }
     </script>

    Regards,
    Vessy
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Stephanie
    Stephanie avatar
    139 posts
    Member since:
    Aug 2013

    Posted 05 Jul in reply to Vessy Link to this post

    Thanks. I was doing something very similar already. I am still not able to get the RadButton to work even trying your code. Here is what I currently have.

     

                                    <telerik:RadAjaxPanel runat="server">
                                        <telerik:RadImageEditor ID="radImage" runat="server" ToolsFile="/App_Themes/ImageEditor.xml" ExternalDialogsPath="/App_Themes/ImageEditorDialogs" OnImageLoading="RadImageEditor1_ImageLoading" OnImageSaving="RadImageEditor1_ImageSaving" OnClientSaved="OnClientSaved" OnClientImageLoad="onClientImageLoad" AllowedSavingLocation="Server" Width="400px" Height="400px" LowerZoomBound="10">
                                            <EditableImageSettings MaxJsonLength="2147483640" />
                                        </telerik:RadImageEditor>
                                            <script>
                                                Telerik.Web.UI.ImageEditor.CommandList["Save"] = saveImage;
                                            </script>
                                    </telerik:RadAjaxPanel>

     

    <telerik:RadButton SingleClick="true" SingleClickText="Saving..." ButtonType="LinkButton" runat="server" ID="btnSave" CssClass="btnY" Width="90" Text="Save" OnClick="lnbSave_Click" ToolTip="Save Dog Photo" CommandArgument='<%#Eval("ID")%>' OnClientClicked="saveImageBTN" /> 

     

            function saveImageBTN() {
                alert("saving");
                $find("radImage").saveImageOnServer("\\App_Data\\RadUploadTemp\\", true);
            }
            function saveImage(imgEditor, commandName, args) {
                alert("saving");
                imgEditor.saveImageOnServer("\\App_Data\\RadUploadTemp\\", true);
            }

     

    It still works perfectly fine with the toolbar save button. I am at a loss as to what I am missing for the button to work. When I click the RadButton it is displaying the "Saving" from the alert, just not actually saving the image....

  5. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 06 Jul Link to this post

    Hi Stephanie,

    The edited image is not saved successfully though the external button in your code as it is making a PostBack, preventing the ImageEditor to finilize its saving logic successfully. As you can see in the provided by me sample, the AutoPostBack of the button is stopped explicitly. Setting AutoPostBack="False" of your external saving button and moving the logic from its server-side click event to the ImageEditor's ImageSaving event handler will allow you to save the image properly:
    <telerik:RadImageEditor ID="radImage" runat="server" OnImageLoading="radImage_ImageLoading" OnImageSaving="radImage_ImageSaving" AllowedSavingLocation="Server" Width="400px" Height="400px" LowerZoomBound="10">
        <EditableImageSettings MaxJsonLength="2147483640" />
    </telerik:RadImageEditor>
    <telerik:RadButton SingleClick="true" SingleClickText="Saving..." ButtonType="LinkButton" runat="server" ID="btnSave" CssClass="btnY" Width="90" Text="Save" ToolTip="Save Dog Photo" OnClientClicked="saveImageBTN" AutoPostBack="false" />
    <script>
        Telerik.Web.UI.ImageEditor.CommandList["Save"] = saveImage;
     
        function saveImageBTN() {
            $find("radImage").saveImageOnServer("", true);
        }
     
        function saveImage(imgEditor, commandName, args) {
            imgEditor.saveImageOnServer("", true);
        }
    </script>


    Please note, that the saveImageOnServer() method expects an image name as a first argument, but not a path. In case you want to save the image into a different location, you can follow the approach used here:
    http://demos.telerik.com/aspnet-ajax/imageeditor/examples/customsaving/defaultcs.aspx


    Regards,
    Vessy
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  6. Stephanie
    Stephanie avatar
    139 posts
    Member since:
    Aug 2013

    Posted 06 Jul Link to this post

    Thanks. I knew youbwere going to say that. I was going to include that I tried it with the postback="false" as well and that didn't work either. 
  7. Stephanie
    Stephanie avatar
    139 posts
    Member since:
    Aug 2013

    Posted 06 Jul Link to this post

    I got it working. I had to change what you had in the javascript to:

    $find("<%= radImage.ClientID %>").saveImageOnServer("", true);

    It was getting 'null' for your example even with the correct control name.

  8. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 07 Jul Link to this post

    Hi Stephanie,

    Yes, if you are using the ImageEditor inside a naming container (like a master page) you will need to use its ClientID. I am glad you managed to resolve the problem and the saving button is working properly now.

    Regards,
    Vessy
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017