Add custom buttons in addition to available buttons

[Archana]

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.

[Rumen]

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

[Archana]

 

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.

 

[Rumen]

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