How to disable tool buttons?

[Adrian]

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

[Vessy]

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

[Adrian]

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

[Vessy]

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