How to hide a toolbar icon on button click ?

[Sambasiva]

Hi,

I am displaying my data in radeditor after clicking the buttons placed out side the editor.  When i click first button, the editor will be loaded with text content and upon second button click, an image will be loaded into the editor. It is a client side functionality. The radeditor contains the icons Bold, Italic, Underline and Image Map editor in the toolbar.

My requirement is to hide "Image Map Editor" icon from the toolbar when i click first button because, only text content will be loaded into the editor in this case. Upon second button click event, editor should hide B, I and U icons.

Please provide me steps to acheive this functionality.

[Rumen]

Hi Sambasiva,

You can hide a toolbar button on the client using the getToolByName() method of the editor, e.g.

var oTool = editor.getToolByName("Bold"); //get a reference to the custom tool
oTool.get_element().style.display = "none";

Kind regards,
Rumen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Sambasiva]

Hi Rumen,

Thanks for your quick reply. The code given by you is not hiding the toolbar icon completely. It does hidden only the label on the icon i.e, B. But not whole icon itself. Image is still appearing.

[Rumen]

Hi Sambasiva,

The solution works properly on my side. You can see how it works in the attached video. Am I missing something?

This is the used code:

<telerik:radeditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoad">
<Tools>
      <telerik:EditorToolGroup >
          <telerik:EditorTool Name="Bold" />
          <telerik:EditorTool Name="Italic" />
          <telerik:EditorTool Name="Underline" />
      </telerik:EditorToolGroup>
  </Tools>            
</telerik:radeditor>
<script type="text/javascript">
   function OnClientLoad(editor, args)
   {
        var oTool = editor.getToolByName("Bold"); //get a reference to the tool
        oTool.get_element().style.border = "1px solid red";
   }
</script>

Best regards,
Rumen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[dharyl]

Hi,


How do I hide them all? in my case i already removed B, I, U buttons. But there is something left. It looked like a separator or something.

 

<td>

<telerik:RadEditor ID="rEditMailBody" runat="server" EditModes="Design" Height="370px" Width="921px" Skin="Vista">

   <Tools>

      <telerik:EditorToolGroup>

            //The Bold, Italic and Underline button are removed from here.
      </telerik:EditorToolGroup>

   </Tools>

</telerik:RadEditor>

</td>

 

 

[Rumen]

Hi,

To hide the whole toolbar just set the ToolsFile property to point to an empty toolsfile.xml file:

Default.aspx:
<telerik:RadEditor ID="rEditMailBody" runat="server" ToolsFile="~/ToolsFile.xml" ></telerik:RadEditor>

ToolsFile.xml:
<?xml version="1.0" encoding="utf-8" ?>
<root>
</root>


Best regards,
Rumen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.