Disable/Hide ToolStrip Buttons

[Phil]

Hi

I have a toolstrip in my editor toolbar which contains several items.  When my editor looses focus I want to disable (or hide) some of the toolstrip sub options subject to misc business logic (e.g. in scenario below say I want to disable the "Do That" option)

My tools file is something like :

<root>
    <tools IsRibbon="true">
        <EditorToolStrip Name="MyToolStrip" PopupHeight="90px">
            <EditorTool Name="DoThis" Text="Do This" />
            <EditorTool Name="DoThat" Text="Do That" />
            <EditorTool Name="DoOther" Text="Do Other" />
        </EditorToolStrip>
    </tools>
</root>

I was expecting to be able to write some javascript similar to that below but the editor API doesn't seem to allow me to do it and i cannot figure it out :

editor.getToolByName("MyToolStrip").getToolByName("DoThis").setState(-1)

I have noticed that there is a .getTools() method but all this seems to return me is an array of name/value pairs thus I cannot hide/disable my toolstrip suboptions.

Can you adivise on how to achieve this ?

Thanks in advance

[Dobromir]

Hi Stephen,

In order to achieve the required functionality you need to use the toolstrip's items collection. You can get reference to the items collection using the get_items() method of the toolstrip object, e.g.:

<telerik:RadEditor ID="RadEditor1" runat="server">
 <Tools>
     <telerik:EditorToolGroup >
         <telerik:EditorToolStrip Name="MyToolStrip">
             <telerik:EditorTool Name="DoThis" />
             <telerik:EditorTool Name="DoThat" />
             <telerik:EditorTool Name="DoOther" />
         </telerik:EditorToolStrip>
     </telerik:EditorToolGroup>
 </Tools>
 </telerik:RadEditor>

 <input type="button" value="doSomething" onclick="doSomething()" />

 <script type="text/javascript">
     function doSomething()
     {
         var editor = $find("RadEditor1");//get reference to the RadEditor

         var toolstripTools = editor.get_toolAdapter().getToolByName("MyToolStrip").get_items();//get reference to the toolstip items

         for (var i = 0; i < toolstripTools.length; i++)
         {
             var tool = toolstripTools[i];
             if (tool.get_name() == "DoThat")
                 tool.setState(-1);//disable the tool
         }
     }
 </script>

Kind regards,
Dobromir
the Telerik team

[Phil]

Hi Dobromir

Thanks for the code.  It almost works but I have noticed that in your example (and in the code implemented in my own solution) that the .get_items() call only returns toolbar items if the toolstrip has previously been expanded.

To see what I mean run the code then :

• without clicking anything else, first of all click the "doSomething" button. 
• Now expand the toolstrip - all options should still be enabled
• click "doSomething" button again
• Now the toolstrip has been updated as expected and middle option is disabled

It looks like the items collection is only being created on demand when the list is expanded ?  How can the code be made to work without having to manually expand the toolstrip ?

Thanks

[Stanimir]

Hello Stephen,

Check if the following code will the thing for you:

function doSomething()
{
    var editor = $find("RadEditor1"); //get reference to the RadEditor

    var toolstrip = editor.get_toolAdapter().getToolByName("MyToolStrip");
    var toolstripTools = toolstrip.get_items();
    if (toolstripTools.length == 0)
    {
        toolstrip.show();
        toolstrip.hide();
        toolstripTools = toolstrip.get_items();
    }

    for (var i = 0, l = toolstripTools.length; i < l; i++)
    {
        var tool = toolstripTools[i];
        if (tool.get_name() == "DoThat")
            tool.setState(-1); //disable the tool
    }
}

Regards,
Stanimir
the Telerik team