Save button in UI for ASP.NET AJAX ImageEditor

Kjell

223 posts

Member since:
May 2011

Posted 30 May 2012 Link to this post

How can I avoid the dialog box to save?
I want to save the image directly (AllowedSavingLocation="Server") without the dialog.
I'm saving my edited image to the database....

Dobromir

Admin

1633 posts

Posted 31 May 2012 Link to this post

Hi,

RadImageEditor does not offer built-in functionality to suppress the Save dialog to be show. However, you can remove the default Save button with custom one and manually save the image on the server using RadImageEditor's Client-Side API, e.g.:

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

<Tools>

<telerik:ImageEditorToolGroup>

<telerik:ImageEditorTool Text="customSave" CommandName="customSave" />

</telerik:ImageEditorToolGroup>

</Tools>

</telerik:RadImageEditor>

<script type="text/javascript">

Telerik.Web.UI.ImageEditor.CommandList["customSave"] = function (imageEditor, commandName, args)

{

imageEditor.saveImageOnServer("Sunset", true);

}

</script>

Greetings,
Dobromir
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

Martin Roussel

246 posts

Member since:
Jan 2010

Posted 08 Aug 2012 Link to this post

I would like to know how to put this javascript code into an external .js file. Usually, it works by just adding the "function {...}" in the file but this time, it wont.

Telerik.Web.UI.ImageEditor.CommandList["customSave"] = function (imageEditor, commandName, args)

{

imageEditor.saveImageOnServer("Sunset", true);

}

The only difference from my working external scripts is the "Telerik.Web.UI.ImageEditor.CommandList["customSave"] =" at the beginning of this one.

TIA

Rumen

Admin

13804 posts

Posted 13 Aug 2012 Link to this post

Hi,

To fix the problem you should import the external JavaScript file under the RadImageEditor declaration:

<telerik:RadImageEditor id="RadImageEditor1" runat="server" ImageUrl="~/Images/bird.jpg">
        <Tools>
            <telerik:ImageEditorToolGroup>
                <telerik:ImageEditorTool Text="customSave" CommandName="customSave" />
            </telerik:ImageEditorToolGroup>
        </Tools>
    </telerik:RadImageEditor>
    <script src="external.js" type="text/javascript"></script>

Greetings,
Rumen
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

Martin Roussel

246 posts

Member since:
Jan 2010

Posted 17 Aug 2012 Link to this post

Thanks. It works, but what's strange is I get a console error in my browser: Error: ReferenceError: Telerik is not defined. Is there something I have to add in the file to reference the Telerik library or something?

Also, can you please tell me how come it should be under the RadImageEditor declaration and not within the <head> HTML tag (like I used to do for all other client-side code)?

TIA

Niko

Admin

404 posts

Posted 20 Aug 2012 Link to this post

Hi,

When adding external JS resources as a means of improving/extending the functionality of current code or current control you should make sure the definition is below the script manager. This is the only thing that you should pay attention to. It should not be within the <head> tag since the scripts of the ImageEditor controls still haven't been initialized, thus the Telerik.Web.UI.ImageEditor.CommandList object will still not exist.

Hope this helps.

Kind regards,
Niko
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

Martin Roussel

246 posts

Member since:
Jan 2010

Posted 20 Aug 2012 Link to this post

Got it. Any idea regarding the console error I've mentioned?

Niko

Admin

404 posts

Posted 21 Aug 2012 Link to this post

Hi,

If there is a visible ImageEditor on the page and the external script is positioned below the script manager, having such an error is strange. In order to investigate it I should advise you to open a support ticket and attach a sample page setup there so that we can run it on our side and investigate what may be causing it.

Regards,
Niko
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

Manoj

4 posts

Member since:
May 2012

Posted 12 Jul 2013 Link to this post

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

<Tools>

<telerik:ImageEditorToolGroup>

<telerik:ImageEditorTool Text="customSave" CommandName="customSave" />

</telerik:ImageEditorToolGroup>

</Tools>

</telerik:RadImageEditor>

<script type="text/javascript">

Telerik.Web.UI.ImageEditor.CommandList["customSave"] = function (imageEditor, commandName, args)

{

imageEditor.saveImageOnServer("Sunset", true);

}

</script>

Hi, after executing the above code it is saving images in my root directory of my project but i want it to save to particular folder in my project. And i also save image name dynamically And i want to assign image name as it is dynamic.
please provide solutions for it ....

Niko

Admin

404 posts

Posted 16 Jul 2013 Link to this post

Hi,

You can easily save the image in a different location by handling the server-side event OnImageSaving. Please, check the following help article on the topic - http://www.telerik.com/help/aspnet-ajax/imageeditor-server-side-events.html. In the OnImageSaving event handler you can force a Cancel of the event propagation through the event arguments and manually save the image to a location of your choosing. Another option is to use a custom content provider - http://demos.telerik.com/aspnet-ajax/imageeditor/examples/customcontentprovider/defaultcs.aspx, http://www.telerik.com/help/aspnet-ajax/imageeditor-using-custom-content-provider.html.
As far as the naming of the image is concerned, it should be handled according to your own requirements and provided to the saveImageOnServer method as a first parameter.

Hope this helps.

Regards,
Niko
Telerik

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.

Leo

6 posts

Member since:
Jun 2013

Posted 23 Jul 2013 Link to this post

Hi Dobromir,

I followed your instructions here and it worked perfectly. There's only one minor problem: the "CustomSave" icon looked kind of bad; so I wonder if there's any way to change the icon using CSS or Javascript. Thank you!

Best,

Long

Vessy

Admin

1929 posts

Posted 26 Jul 2013 Link to this post

Hello Long,

The are two possible approaches you can use in order to use different icon for your CustomSave command:

you can rewrite the built-in Save command, so you will be able to use the original save icon:

<telerik:RadImageEditor ID="RadImageEditor1" runat="server" ImageUrl="imageName.jpeg">

    <Tools>

        <telerik:ImageEditorToolGroup>

            <telerik:ImageEditorTool Text="customSave" CommandName="Save" />

        </telerik:ImageEditorToolGroup>

    </Tools>

</telerik:RadImageEditor>

<script type="text/javascript">

    Telerik.Web.UI.ImageEditor.CommandList["Save"] = function (imageEditor, commandName, args) {

        imageEditor.saveImageOnServer("", true);

    }

</script>
you can use you own icon, by setting the path to it with CSS styles. For example, if your custom command name is "customSave", the css class generated for it will be riecustomSave:

<telerik:RadImageEditor ID="RadImageEditor1" runat="server" ImageUrl="imageName.jpeg">

    <Tools>

        <telerik:ImageEditorToolGroup>

            <telerik:ImageEditorTool Text="customSave" CommandName="customSave" />

        </telerik:ImageEditorToolGroup>

    </Tools>

</telerik:RadImageEditor>

.riecustomSave .rtbIcon

{

    background-image: url("../Images/icon.png") !important;

    background-position: center !important;

}

I hope you will find this information helpful. Should you experience any further difficulties do not hesitate to contact us again.

Regards,
Veselina Raykova
Telerik

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.

Mark H

38 posts

Member since:
Aug 2008

Posted 11 Nov 2014 in reply to Dobromir Link to this post

Is there a way I can have the button click call my /server/-side function?

Dobromir said:Hi,

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

    <Tools>

        <telerik:ImageEditorToolGroup>

            <telerik:ImageEditorTool Text="customSave" CommandName="customSave" />

        </telerik:ImageEditorToolGroup>

    </Tools>

</telerik:RadImageEditor>

<script type="text/javascript">

Telerik.Web.UI.ImageEditor.CommandList["customSave"] = function (imageEditor, commandName, args)

{

    imageEditor.saveImageOnServer("Sunset", true);

}

</script>

Niko

Admin

404 posts

Posted 14 Nov 2014 Link to this post

Hello Mark,

You can handle the OnImageSaving server-side event. The client-side method saveImageOnServer will initiate a server-side callback that will go through that event handler. There you can implement your custom server-side logic. Please, check these resources for more information -

Server-side events - http://www.telerik.com/help/aspnet-ajax/imageeditor-server-side-events.html
Save to a custom location - http://demos.telerik.com/aspnet-ajax/imageeditor/examples/customsaving/defaultcs.aspx

Hope this helps.

Regards,
Niko
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.