13 Answers, 1 is accepted
0
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.:
Greetings,
Dobromir
the Telerik team
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
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.
The only difference from my working external scripts is the "Telerik.Web.UI.ImageEditor.CommandList["customSave"] =" at the beginning of this one.
TIA
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
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
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
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
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
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
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
Rank 1
answered on 20 Aug 2012, 06:28 PM
Got it. Any idea regarding the console error I've mentioned?
0
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 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
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
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
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.
0
Leo
Top achievements
Rank 2
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
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
Hello Long,
The are two possible approaches you can use in order to use different icon for your CustomSave command:
Regards,
Veselina Raykova
Telerik
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:RadImageEditorID="RadImageEditor1"runat="server"ImageUrl="imageName.jpeg"><Tools><telerik:ImageEditorToolGroup><telerik:ImageEditorToolText="customSave"CommandName="Save"/></telerik:ImageEditorToolGroup></Tools></telerik:RadImageEditor><scripttype="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:RadImageEditorID="RadImageEditor1"runat="server"ImageUrl="imageName.jpeg"><Tools><telerik:ImageEditorToolGroup><telerik:ImageEditorToolText="customSave"CommandName="customSave"/></telerik:ImageEditorToolGroup></Tools></telerik:RadImageEditor>.riecustomSave .rtbIcon{background-image:url("../Images/icon.png")!important;background-position:center!important;}
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
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,
[/quote]
[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
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 -
Hope this helps.
Regards,
Niko
Telerik
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.