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

Add custom buttons in addition to available buttons

3 Answers 261 Views
ImageEditor
This is a migrated thread and some comments may be shown as answers.
Archana
Top achievements
Rank 1
Archana asked on 08 Jun 2018, 10:05 AM

Hi,

How do I add custom buttons that  can call my functions in addition to the buttons available in Image Editor? I tried to add this way:

<telerik:RadImageEditor ID="imgEditor" runat="server" OnImageLoading="RadImgEdt_ImageLoading"
            OnImageSaving="RadImgEdt_ImageSaving" OnClientSaved="disableTools">
            <Tools>
                <telerik:ImageEditorToolGroup>
                    <telerik:ImageEditorTool CommandName="Custom1" />
                    <telerik:ImageEditorTool CommandName="Custom2" />
                </telerik:ImageEditorToolGroup>
            </Tools>
        </telerik:RadImageEditor>

But this removed the standard default buttons.


3 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 08 Jun 2018, 12:31 PM
Hello Archana,

You can copy the declarations of the default tools from the following article: Full Set of Tools:

<telerik:ImageEditorToolGroup>
    <telerik:ImageEditorTool Text="Print" CommandName="Print" />
    <telerik:ImageEditorTool Text="Save" CommandName="Save" />
    <telerik:ImageEditorTool Text="Export" CommandName="Export" />
</telerik:ImageEditorToolGroup>
<telerik:ImageEditorToolGroup>
    <telerik:ImageEditorToolStrip Text="Undo" CommandName="Undo" />
    <telerik:ImageEditorToolStrip Text="Redo" CommandName="Redo" />
    <telerik:ImageEditorTool Text="Reset" CommandName="Reset" />
</telerik:ImageEditorToolGroup>
<telerik:ImageEditorToolGroup>
    <telerik:ImageEditorTool Text="Crop" CommandName="Crop" IsToggleButton="true" />
    <telerik:ImageEditorTool Text="Resize" CommandName="Resize" IsToggleButton="true" />
    <telerik:ImageEditorTool Text="Zoom" CommandName="Zoom" />
    <telerik:ImageEditorTool Text="ZoomIn" CommandName="ZoomIn" />
    <telerik:ImageEditorTool Text="ZoomOut" CommandName="ZoomOut" />
    <telerik:ImageEditorTool Text="Opacity" CommandName="Opacity" IsToggleButton="true" />
    <telerik:ImageEditorTool Text="Rotate" CommandName="Rotate" IsToggleButton="true" />
    <telerik:ImageEditorTool Text="Rotate Right" CommandName="RotateRight" />
    <telerik:ImageEditorTool Text="Rotate Left" CommandName="RotateLeft" />
    <telerik:ImageEditorTool Text="Flip" CommandName="Flip" IsToggleButton="true" />
    <telerik:ImageEditorTool Text="Flip Vertical" CommandName="FlipVertical" />
    <telerik:ImageEditorTool Text="Flip Horizontal" CommandName="FlipHorizontal" />
    <telerik:ImageEditorTool Text="Add Text" CommandName="AddText" IsToggleButton="true" />
    <telerik:ImageEditorTool Text="Insert Image" CommandName="InsertImage" IsToggleButton="true" />
</telerik:ImageEditorToolGroup>


Regards,
Rumen
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Archana
Top achievements
Rank 1
answered on 13 Jun 2018, 09:23 AM

 

Hello Rumen,

I was able to add a custom button in addition to the standard set of buttons. But how do I point to my custom function on that button click? I tried the following which did not work:

   <script type="text/javascript">
Telerik.Web.UI.ImageEditor.CommandList["myCustomButton"] = function (imageEditor, commandName, args)
{
    alert("custom button click");
}
</script>

I would like to know if I can call the button click event in the server side instead of using javascript.

 

0
Rumen
Telerik team
answered on 13 Jun 2018, 11:26 AM
Hi Archana,

Put the script tag with the command under the ImageEditor declaration and make sure that the command name corresponds to the button name as shown below:

<telerik:RadImageEditor ID="imgEditor" runat="server" _OnImageLoading="RadImgEdt_ImageLoading"
    _OnImageSaving="RadImgEdt_ImageSaving" _OnClientSaved="disableTools">
    <Tools>
        <telerik:ImageEditorToolGroup>
            <telerik:ImageEditorTool CommandName="Custom1" />
            <telerik:ImageEditorTool CommandName="Custom2" />
        </telerik:ImageEditorToolGroup>
        <telerik:ImageEditorToolGroup>
            <telerik:ImageEditorTool Text="Print" CommandName="Print" />
            <telerik:ImageEditorTool Text="Save" CommandName="Save" />
            <telerik:ImageEditorTool Text="Export" CommandName="Export" />
        </telerik:ImageEditorToolGroup>
        <telerik:ImageEditorToolGroup>
            <telerik:ImageEditorToolStrip Text="Undo" CommandName="Undo" />
            <telerik:ImageEditorToolStrip Text="Redo" CommandName="Redo" />
            <telerik:ImageEditorTool Text="Reset" CommandName="Reset" />
        </telerik:ImageEditorToolGroup>
        <telerik:ImageEditorToolGroup>
            <telerik:ImageEditorTool Text="Crop" CommandName="Crop" IsToggleButton="true" />
            <telerik:ImageEditorTool Text="Resize" CommandName="Resize" IsToggleButton="true" />
            <telerik:ImageEditorTool Text="Zoom" CommandName="Zoom" />
            <telerik:ImageEditorTool Text="ZoomIn" CommandName="ZoomIn" />
            <telerik:ImageEditorTool Text="ZoomOut" CommandName="ZoomOut" />
            <telerik:ImageEditorTool Text="Opacity" CommandName="Opacity" IsToggleButton="true" />
            <telerik:ImageEditorTool Text="Rotate" CommandName="Rotate" IsToggleButton="true" />
            <telerik:ImageEditorTool Text="Rotate Right" CommandName="RotateRight" />
            <telerik:ImageEditorTool Text="Rotate Left" CommandName="RotateLeft" />
            <telerik:ImageEditorTool Text="Flip" CommandName="Flip" IsToggleButton="true" />
            <telerik:ImageEditorTool Text="Flip Vertical" CommandName="FlipVertical" />
            <telerik:ImageEditorTool Text="Flip Horizontal" CommandName="FlipHorizontal" />
            <telerik:ImageEditorTool Text="Add Text" CommandName="AddText" IsToggleButton="true" />
            <telerik:ImageEditorTool Text="Insert Image" CommandName="InsertImage" IsToggleButton="true" />
        </telerik:ImageEditorToolGroup>
    </Tools>
</telerik:RadImageEditor>
<script type="text/javascript">
    Telerik.Web.UI.ImageEditor.CommandList["Custom1"] = function (imageEditor, commandName, args) {
        alert("Custom 1 button click");
    }
    Telerik.Web.UI.ImageEditor.CommandList["Custom2"] = function (imageEditor, commandName, args) {
        alert("Custom 2 button click");
    }
</script>

The custom buttons offers click events on the client side. If you want to execute a server click event, you can put a hidden asp:button on the page and in the custom command function to click it programmatically. This programmatic click will execute the server click event of the button where you can execute your logic. Another approach is explained in the documentation Custom Server-side Operations.


Best regards,
Rumen
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
ImageEditor
Asked by
Archana
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Archana
Top achievements
Rank 1
Share this question
or