Add custom buttons in addition to available buttons

4 posts, 0 answers
  1. Archana
    Archana avatar
    7 posts
    Member since:
    Nov 2015

    Posted 08 Jun 2018 Link to this post

    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.


  2.
  3. Rumen
    Admin
    Rumen avatar
    14098 posts

    Posted 08 Jun 2018 Link to this post

    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.
  5. Archana
    Archana avatar
    7 posts
    Member since:
    Nov 2015

    Posted 13 Jun 2018 in reply to Rumen Link to this post

     

    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.

     

  7. Rumen
    Admin
    Rumen avatar
    14098 posts

    Posted 13 Jun 2018 Link to this post

    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.
Back to Top