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

How to disable tool buttons?

3 Answers 247 Views
ImageEditor
This is a migrated thread and some comments may be shown as answers.
Adrian
Top achievements
Rank 1
Adrian asked on 16 Aug 2012, 03:29 PM
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

3 Answers, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 17 Aug 2012, 04:16 PM
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.
0
Adrian
Top achievements
Rank 1
answered on 20 Aug 2012, 04:59 PM
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
0
Vessy
Telerik team
answered on 22 Aug 2012, 04:36 PM
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.
Tags
ImageEditor
Asked by
Adrian
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Adrian
Top achievements
Rank 1
Share this question
or