This is a migrated thread and some comments may be shown as answers.
Save button
13 Answers 225 Views
This is a migrated thread and some comments may be shown as answers.
Kjell
Top achievements
Rank 1
Kjell asked on 30 May 2012, 10:36 AM
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....

13 Answers, 1 is accepted

Sort by
0
Dobromir
Telerik team
answered on 31 May 2012, 11:43 AM
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.
0
Martin Roussel
Top achievements
Rank 1
answered on 08 Aug 2012, 06:12 PM
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
0
Rumen
Telerik team
answered on 13 Aug 2012, 09:30 AM
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.
0
Martin Roussel
Top achievements
Rank 1
answered on 17 Aug 2012, 12:06 PM
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
0
Niko
Telerik team
answered on 20 Aug 2012, 03:03 PM
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.
0
Martin Roussel
Top achievements
Rank 1
answered on 20 Aug 2012, 06:28 PM
Got it. Any idea regarding the console error I've mentioned?
0
Niko
Telerik team
answered on 21 Aug 2012, 08:40 AM
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.
0
Manoj
Top achievements
Rank 1
answered on 12 Jul 2013, 07:15 AM
<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 .... 
0
Niko
Telerik team
answered on 16 Jul 2013, 12:01 PM
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.aspxhttp://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.
0
Leo
Top achievements
Rank 2
answered on 23 Jul 2013, 08:00 PM
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
0
Vessy
Telerik team
answered on 26 Jul 2013, 01:45 PM
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.
0
Mark H
Top achievements
Rank 1
answered on 11 Nov 2014, 04:57 PM
Is there a way I can have the button click call my /server/-side function?

[quote]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>

[/quote]
0
Niko
Telerik team
answered on 14 Nov 2014, 03:27 PM
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 - 
  1. Server-side events - http://www.telerik.com/help/aspnet-ajax/imageeditor-server-side-events.html
  2. 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.

 
Asked by
Kjell
Top achievements
Rank 1
Answers by
Dobromir
Telerik team
Martin Roussel
Top achievements
Rank 1
Rumen
Telerik team
Niko
Telerik team
Manoj
Top achievements
Rank 1
Leo
Top achievements
Rank 2
Vessy
Telerik team
Mark H
Top achievements
Rank 1
Share this question
or