How to disable tool buttons?

4 posts, 0 answers
  1. Adrian
    Adrian avatar
    7 posts
    Member since:
    Jul 2012

    Posted 16 Aug 2012 Link to this post

    Hello,
    I've got an imageeditor with a mix of standard and custom toolbar buttons, and I want to disable them (or hide them) after the user saves the image. Any tips? Here's my code for the ToolGroup:
    <telerik:RadImageEditor ID="annotationImageEditor" runat="server"
                        OnImageLoading="annotationImageEditor_ImageLoading"                
                        OnDialogLoading="annotationImageEditor_DialogLoading"
                        Width="500px" Height="500px">
            <Tools>
                <telerik:ImageEditorToolGroup>
                    <telerik:ImageEditorTool CommandName="Reset" ToolTip="Clear" />
                    <telerik:ImageEditorToolSeparator />
                    <telerik:ImageEditorTool CommandName="AddText" ToolTip="Add text"/>                        
                    <telerik:ImageEditorTool CommandName="StampArrowDialog" ImageUrl="~/img/rightArrowIcon.png"/>
                    <telerik:ImageEditorTool CommandName="StampStatusDialog" mageUrl="~/img/stampicon.png" />
                    <telerik:ImageEditorTool CommandName="StampPatient" ImageUrl="~/img/patient.png" />
                </telerik:ImageEditorToolGroup>
            </Tools>
    </telerik:RadImageEditor>


    Thanks,
    Adrian

  2. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 17 Aug 2012 Link to this post

    Hi Adrian,

    One of the possible ways to achieve the desired disable or hide tools  functionality is to assign a handler to the OnClientSaved event. You could use the get_tools() method in order to get a reference to the ImageEditor's toolbar buttons and to set their state. RadImageEditor uses RadToolbar as a child control thus you could use its ClientSide functionality.

    A simple way for achieving the scenario is to use the disable() (or hide()) method and respectively the enable() (or show()) method after that:
    <telerik:RadImageEditor ID="annotationImageEditor" runat="server" OnImageLoading="annotationImageEditor_ImageLoading"
        OnDialogLoading="annotationImageEditor_DialogLoading"
        OnClientSaved="disableTools"
        Width="500px" Height="500px">
    ...
    </telerik:RadImageEditor>
    <script type="text/javascript">
        function disableTools() {
            var imgEditor = $find("<%=annotationImageEditor.ClientID%>");
            imgEditor.get_tools().StampArrowDialog.disable();
            imgEditor.get_tools().StampStatusDialog.disable();
            imgEditor.get_tools().StampPatient.disable();
        }
    </script>

    All the best,
    Veselina
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Adrian
    Adrian avatar
    7 posts
    Member since:
    Jul 2012

    Posted 20 Aug 2012 Link to this post

    Hi Veselina,
    I could probably do that, but was wondering if you can tell me how to do that server-side? I want to disable the tools after I save on server side.
    Thanks,
    Adrian
  5. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 22 Aug 2012 Link to this post

    Hi Adrian,

    RadImageEditor is using ClientSide Callbacks to perform its server-side operations and modifications applied inside the server-side event handler will to be applied to the control, thus the OnImageSaving server-side event cannot be used to achieve the required result.

    Nevertheless, if you still want to update the tools' state server-side, you will need an AjaxManager in order to update the ImageEdtitor when the image is saved. The desired changes should be declared in the handler of the OnAjaxRequest server event:

    ASPX:
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="annotationImageEditor" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
     
    <telerik:RadImageEditor ID="annotationImageEditor" runat="server"
        OnImageLoading="annotationImageEditor_ImageLoading"
        OnDialogLoading="annotationImageEditor_DialogLoading"
        OnClientSaved="hideTools"
        Width="500px" Height="500px" ImageUrl="Koala.jpg">
        <Tools>
            <telerik:ImageEditorToolGroup>
                <telerik:ImageEditorTool CommandName="Reset" ToolTip="Clear" />
                <telerik:ImageEditorTool CommandName="Save" ToolTip="Save Image" />
                <telerik:ImageEditorToolSeparator />
                <telerik:ImageEditorTool CommandName="AddText" ToolTip="Add text" />
                <telerik:ImageEditorTool CommandName="StampArrowDialog" ImageUrl="arrow-down-hover.png" />
                <telerik:ImageEditorTool CommandName="StampStatusDialog" ImageUrl="arrow-down-hover.png" />
                <telerik:ImageEditorTool CommandName="StampPatient" ImageUrl="arrow-down-hover.png" />
            </telerik:ImageEditorToolGroup>
        </Tools>
    </telerik:RadImageEditor>
    <telerik:RadScriptBlock runat="server">
    <script type="text/javascript">
        function hideTools() {
            $find("<%=RadAjaxManager1.ClientID%>").ajaxRequest("hideImageEditorTools");
        }
    </script>
    </telerik:RadScriptBlock>

    CS:
    protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
        {
            if (e.Argument == "hideImageEditorTools")
            {
                ImageEditorToolGroupCollection tools = annotationImageEditor.Tools;
                foreach (ImageEditorToolGroup group in tools)
                {
                    foreach (var tool in group.GetAllTools())
                    {
                        ImageEditorTool currentTool = tool as ImageEditorTool;
     
                        if (currentTool != null && (currentTool.CommandName == "StampArrowDialog" || currentTool.CommandName == "StampStatusDialog" || currentTool.CommandName == "StampPatient"))
                            group.Tools.Remove(tool);
                    }
                }
            }
        }

    For your convenience I am attaching my sample page demonstrating the mentioned scenario.

    Kind regards,
    Veselina
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top