Image is not saved after rotation

[Chen Jun Ying]

Hi
I'm using RadImageEditor to edit an image. Every time when I rotate the image, it seems the image is not saved when I use imgEditor.GetEditableImage(). Any ideas?

[Dobromir]

Hi Chen,

By design, RadImageEditor collects all operations applied to the image before execute them, and then after saving is triggered all the operations are applied on the server following the order of the stack collected on the client. This is approach is used to be able to provide Undo / Redo functionality and to reduce the number of executed callbacks. Flip, Rotate and Resize are initially visually applied on the client and when the image is saved all client-side operations are applied on the server.

You can force image saving to apply client-side modifications using the applyChangesOnServer() client-side method of RadImageEditor, e.g.:

<telerik:RadImageEditorID="RadImageEditor1"runat="server"ImageUrl="~/ROOT/Sunset.jpg">
</telerik:RadImageEditor>

<asp:ButtonText="text" runat="server" OnClientClick="applyModifications();return false;"/>

<script type="text/javascript">
    function applyModifications()
    {
        $find("<%=RadImageEditor1.ClientID %>").applyChangesOnServer();
    }
</script>

Greetings,
Dobromir
the Telerik team

[Chen Jun Ying]

Thanks Dobromir.

The image is read from database in binary format. How client method applyChangesOnServer() can trigger a server method to update the image data?  
  
Just one more question. Is it possible to customize the popup dialogue when clicking the built-in 'Save' command? I would like to skip the dialogue and save any changes . 

[Dobromir]

Hi Chen,

Please accept my sincere apologies for not being clear enough in my previous answer.

RadImageEditor applies modifications made to the actual image file using callbacks. Most of the commands, except AddText, Crop and InsertImage, initially are only visualized on the client and are stored in a queue, and when a server-side Save event is triggered all the stored commands get applied to the actual image file.

The RadImageEditor's client-side method applyChangesOnServer() is triggering the ImageChanging server-side event and can be used to manually force the modifications that are only visualized at this point to be actually applied to the editableImage.

Now regarding your second question, you can modify the Save command to avoid the dialog and directly save the image on the server by handling the OnClientCommandExecuting client-side event of RadImageEditor, e.g.:

<telerik:RadImageEditor ID="RadImageEditor1" runat="server" ImageUrl="~/ROOT/SAM_0310.JPG" OnImageSaving="RadImageEditor1_ImageSaving" OnClientCommandExecuting="imageEditorCommandExecuting">
    <Tools>
        <telerik:ImageEditorToolGroup>
            <telerik:ImageEditorTool CommandName="Save" />
            <telerik:ImageEditorTool CommandName="RotateLeft" />
            <telerik:ImageEditorTool CommandName="RotateRight" />
        </telerik:ImageEditorToolGroup>
    </Tools>
</telerik:RadImageEditor>
<script type="text/javascript">
    function imageEditorCommandExecuting(imageEditor, args)
    {
        if (args.get_commandName() == "Save") {
            args.set_cancel(true);

            imageEditor.saveImageOnServer("ImageName", true);
        }

    }
</script>

You can find detailed information regarding the RadImageEditor's client-side API in our online documentation.

Kind regards,
Dobromir
the Telerik team

[Chen Jun Ying]

Dobromir,

Thanks for your detail explanation. It helps me a lot.
Just one more question. Does this OnClientCommandExecuting client method work with RadAjaxManager? Will it fire AjaxLoadingPanel?
Thanks

[Rumen]

Hello,

You can use the solution provided in the following demo Explicit Show/Hide to show the AjaxLoadingPanel in the OnClientCommandExecuting client side event of RadImageManager.

All the best,
Rumen
the Telerik team

[vab]

this is not working at my side

how this javascript function will get called

[Vessy]

Hi Vab,

If you are talking about the imageEditorCommandExecuting() function, it has to be assigned as a handler to the the OnClientCommandExecuting event:

<telerik:RadImageEditor ID="RadImageEditor1" runat="server" ImageUrl="~/ROOT/SAM_0310.JPG" OnClientCommandExecuting="imageEditorCommandExecuting">
...

If no - could you elaborate on which JavaScript function exactly do you want to call?

Kind regards,
Vesi
the Telerik team