This is a migrated thread and some comments may be shown as answers.

Customize toolbar

3 Answers 173 Views
ImageEditor
This is a migrated thread and some comments may be shown as answers.
Mat
Top achievements
Rank 1
Iron
Mat asked on 12 Oct 2020, 03:37 PM

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

Kevin
Top achievements
Rank 1
commented on 08 Aug 2021, 03:57 PM

I'm just looking into using the ImageEditor as well for the first time. The documentation is still really lacking...
Neli
Telerik team
commented on 11 Aug 2021, 04:05 PM

Hi Kevin,

Thank you for the feedback. Could you please share more information about the exact issue that you did not find information on how to solve or an example that you would like to have added to the documentation? If you have any specific questions about ImageEditor configuration or methods, please let us know. 

Regards,

Neli

3 Answers, 1 is accepted

Sort by
0
Aleksandar
Telerik team
answered on 15 Oct 2020, 09:47 AM

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).

0
Mat
Top achievements
Rank 1
Iron
answered on 15 Oct 2020, 11:33 AM

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.

 

0
Aleksandar
Telerik team
answered on 19 Oct 2020, 12:59 PM

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).

Tags
ImageEditor
Asked by
Mat
Top achievements
Rank 1
Iron
Answers by
Aleksandar
Telerik team
Mat
Top achievements
Rank 1
Iron
Share this question
or