Save button

14 posts, 0 answers
  1. Kjell
    Kjell avatar
    203 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....
  2. Dobromir
    Admin
    Dobromir avatar
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Martin Roussel
    Martin Roussel avatar
    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
  5. Rumen
    Admin
    Rumen avatar
    12848 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.
  6. Martin Roussel
    Martin Roussel avatar
    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
  7. Niko
    Admin
    Niko avatar
    387 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.
  8. Martin Roussel
    Martin Roussel avatar
    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?
  9. Niko
    Admin
    Niko avatar
    387 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.
  10. Manoj
    Manoj avatar
    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 .... 
  11. Niko
    Admin
    Niko avatar
    387 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.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.
  12. Leo
    Leo avatar
    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
  13. Vessy
    Admin
    Vessy avatar
    1382 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.
  14. Mark H
    Mark H avatar
    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>

  15. Niko
    Admin
    Niko avatar
    387 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 - 
    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.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017