Customize toolbar

4 posts, 0 answers
  1. Mat
    Mat avatar
    5 posts
    Member since:
    Jul 2017

    Posted 12 Oct 2020 Link to this post

    The documentation for the ImageEditor is somewhat lacking. Can you please explain how I can replace the 'Save As' button with a custom button that calls a function?

    Thanks

  2. Aleksandar
    Admin
    Aleksandar avatar
    267 posts

    Posted 15 Oct 2020 Link to this post

    Hi Mat,

    The ImageEditor is a component introduced with the latest release of Kendo UI, so we will be further improving the documentation of the component.

    To answer your question - you can define the items in the ImageEditor toolbar using the toolbar.items configuration option:

    https://docs.telerik.com/kendo-ui/api/javascript/ui/imageeditor/configuration/toolbar.items

    You can define a click handler for a button using the toolbar.items.click configuration option or implement a custom ImageEditor command, and specify it in the command toolbar.items.command configuration option:

    $("#imageEditor").kendoImageEditor({
            toolbar: {
              items: [
                //add default buttons
                "open",
                "crop",
                "resize",
                "undo",
                "redo",
                //add custom button
                {
                  type: "button",
                  text: "My Custom Save",
                  icon: "save",
                  enable: true,
                  click:function(){
                    alert('button clicked')
                  }
                }
              ]
            }
          });

    That said - it would be valuable for us if you can share areas of the ImageEditor documentation you would like to see improved. This would help us provide the details the community needs to use the ImageEditor widget seamlessly.

    Regards,
    Aleksandar
    Progress Telerik

    Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

  3. Mat
    Mat avatar
    5 posts
    Member since:
    Jul 2017

    Posted 15 Oct 2020 in reply to Aleksandar Link to this post

    Thanks. I actually figured this out after looking through the source code.

    As far as the documentation goes, I guess you'll get around to it eventually, but just a few examples scattered around would be helpful.

    Even the example on your post would be helpful.

    Note: the code in the Widgets section of your documentation is not quite right (https://docs.telerik.com/kendo-ui/controls/editors/imageeditor/tools) which is what confused me in the first place.

     

  4. Aleksandar
    Admin
    Aleksandar avatar
    267 posts

    Posted 19 Oct 2020 Link to this post

    Hi Mat,

    Thank you for the details. I will take care of the incorrect example and update it with a more detailed one.

    Regards,
    Aleksandar
    Progress Telerik

    Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

Back to Top