Save Button

[DogBizPro]

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.

[Vessy]

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

[DogBizPro]

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

[Vessy]

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

[DogBizPro]

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. 

[DogBizPro]

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.

[Vessy]

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