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

Disabling Toolbar buttons on the server

11 Answers 212 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Stuart Hemming
Top achievements
Rank 2
Stuart Hemming asked on 06 Mar 2012, 01:30 AM
When my user opts to send Plain Text mail, I want to disable all of the toolbar buttons on the ribbonbar with the exception of the Spell Check and Help buttons.

My Tools file is defined like this ...
<?xml version="1.0" encoding="utf-8" ?>
<root>
    <tools name="Clipboard">
        <tool name="PasteStrip" size="large"/>
        <tool name="Cut" shortcut="CTRL+X" />
        <tool name="Copy" shortcut="CTRL+C"/>
    </tools>
    <tools name="Basic Text">
        <tool name="FontName" shortcut="CTRL+SHIFT+F"/>
        <tool name="RealFontSize" shortcut="CTRL+SHIFT+P" width="80px"/>
        <tool name="ConvertToLower" strip="FontDropDowns" />
        <tool name="ConvertToUpper" strip="FontDropDowns" />
        <tool name="Bold" strip="FontBasicTools" shortcut="CTRL+B"/>
        <tool name="Italic" strip="FontBasicTools" shortcut="CTRL+I"/>
        <tool name="Underline" strip="FontBasicTools" shortcut="CTRL+U"/>
        <tool name="ForeColor" strip="FontBasicTools"/>
        <tool name="BackColor" strip="FontBasicTools"/>
        <tool name="Indent" strip="Indention"/>
        <tool name="Outdent" strip="Indention"/>
        <tool name="JustifyLeft" strip="Align"/>
        <tool name="JustifyCenter" strip="Align"/>
        <tool name="JustifyRight" strip="Align"/>
        <tool name="InsertParagraph" shortcut="CTRL+M" strip="other"/>
        <tool name="ToggleTableBorder" strip="other"/>
    </tools>
    <tools name="Include">
        <tool name="LinkManager" shortcut="CTRL+K" strip="EditingTools3"/>
        <tool name="Unlink" shortcut="CTRL+SHIFT+K" strip="EditingTools3"/>
        <tool name="InsertUnorderedList" strip="Lists"/>
        <tool name="InsertOrderedList" strip="Lists"/>
        <tool name="InsertDate" />
        <tool name="InsertTime" />
        <tool name="InsertHorizontalRule" />
        <tool name="InsertTable" />
        <tool name="InsertSymbol"  />
    </tools>
    <tools name="Proofing">
        <tool name="AjaxSpellCheck" size="large" showtext="false"/>
    </tools>
    <tools name="Help">
        <tool name="Help" showtext="false" size="large"/>
    </tools>
</root>

So, I'm doing this ...
foreach (EditorToolGroup toolGroup in Editor.Tools)
{
    if (new List<string> { "Clipboard", "Basic Text", "Include" }.Contains(toolGroup.Tag))
    {
        foreach (EditorToolBase tool in toolGroup.Tools)
        {
            if (tool is EditorTool)
            {
                (tool as EditorTool).Enabled = isHtmlMail;
            }
        }
    }
}
This doesn't work.

Well, none of the tools are disabled except RealFontSize and InsertSymbol and event then, the highligh still appears when you haver over InsertSymbol, it just does nothing when you click on it.

--
Stuart



11 Answers, 1 is accepted

Sort by
0
Stuart Hemming
Top achievements
Rank 2
answered on 06 Mar 2012, 01:51 AM
Trying to do something similar on the client-side doesn't work for me either!
var tools = ["PasteStrip", "Cut", "Copy", "FontName", "RealFontSize", "ConvertToUpper", "ConvertToLower", "Bold", "Italic", "Underline"];
for (var i = 0; i < tools.length; i++)
{
    var tool = sender.getToolByName(tools[i]);
    alert(i + " " + tools[i]);
    if (tool != null)
    {
        tool.setState(-1);
    }
}
First loop round, it doesn't find "PasteStrip", next loop round it finds "Cut" but reports "Object doesn't support this property or method" when trying to execute setState().

I think I'll go to bed.

--
Stuart


0
Rumen
Telerik team
answered on 07 Mar 2012, 04:43 PM
Hi,

The following code will disable the buttons only when the editor is loaded:

<telerik:RadEditor ID="RadEditor" runat="server" OnClientLoad="OnClientLoad"></telerik:RadEditor>
<script type="text/javascript">
    function OnClientLoad(sender) {
 
        var tools = ["PasteStrip", "Cut", "Copy", "FontName", "RealFontSize", "ConvertToUpper", "ConvertToLower", "Bold", "Italic", "Underline"];
        for (var i = 0; i < tools.length; i++) {
            var tool = sender.getToolByName(tools[i]);
            alert(i + " " + tools[i]);
            if (tool != null) {
                tool.setState(-1);
            }
        }
 
    }
</script>

However, they will be enabled when the selected elements has bold, italic, underline, etc formatting. You should implement your code to also works regarding of the current selection (editor.getSelectedElement().tagName) in the OnClientSelectionChange client event.

Greetings,
Rumen
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
Stuart Hemming
Top achievements
Rank 2
answered on 08 Mar 2012, 10:31 AM
Rumen,

Sorry mate, but you seemed to have missed the point of my last post...

First loop round, it doesn't find "PasteStrip", next loop round it finds "Cut" but reports "Object doesn't support this property or method" when trying to execute setState().

This jing video shows the result of running the following code as part of my OnClientLoad client-side script.
var tools = ["PasteStrip", "Cut", "Copy", "FontName", "RealFontSize", "ConvertToUpper", "ConvertToLower", "Bold", "Italic", "Underline"];
for (var i = 0; i < tools.length; i++)
{
    var tool = sender.getToolByName(tools[i]);
    alert(i + " " + tools[i]);
    if (tool != null)
    {
        alert("Setting state of " + tools[i] + " to '" + enabled + "'");
        tool.setState(enabled);
    }
}

As you can see from the reported output, getToolByName doesn't even find "PasteStrip" and when it does find "Cut" the call to .setState() fails (that is what's on line #615, see attached screenshot).

--
Stuart

0
Stuart Hemming
Top achievements
Rank 2
answered on 08 Mar 2012, 10:40 AM
And I'd really like to know why the server-side code I posted in my first post doesn't work.

--
Stuart
0
Rumen
Telerik team
answered on 12 Mar 2012, 01:34 PM
Hi,

The tools are initialized on the client and they cannot be disabled on the server.

You did not mentioned that you are using the Ribbonbar toolbar and I provided a solution for the classic default toolbar mode. For the Ribbonbar you can use the following code to disable the PasteStrip split ribbonbar button:

editor.get_toolAdapter()._ribbonBarSplitButtons[0].set_enabled(true);

Here is more information about the RibbonBar private client-side API:
editor.get_toolAdapter()._ribbonBarButtons - returns an array of all ribbonbar buttons
editor.get_toolAdapter()._ribbonBarSplitButtons - returns an array of all split buttons
editor.get_toolAdapter()._ribbonBarItems - returns an array of all buttons and all splitbuttons

As you have noticed the getToolByName method of RadEditor does not work with the SplitButtons of RadRibbonBar. Our developers will enhance the getToolByName method to work with splitbuttons as well for the next service pack release.


Kind regards,
Rumen
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
Stuart Hemming
Top achievements
Rank 2
answered on 12 Mar 2012, 05:08 PM
Rumen,

Thanks for the update, that's great.

Can you tell me if there are any client-side properties I can use to get info about individual items returned by ._ribbonBarItems?

Specifically, I need to get at either the name of the tool or the text associated with the button so I can avoid disabling the Spell check and Help buttons.

--
Stuart
0
Stuart Hemming
Top achievements
Rank 2
answered on 12 Mar 2012, 06:58 PM
Rumen,

You are, by now I'm sure, coming to believe that I'm not nearly as bright as I like to think I am.

I've got this code...
function SetEditorTools(editor)
{
    setTimeout(function ()
    {
        var font = "";
        if (!IsHtmlMail())
        {
            font = "Courier New";
            var tools = editor.get_toolAdapter()._ribbonBarItems;
            for (var i = 0; i < tools.length; i++)
            {
                var tool = tools[i];
                if (tool.get_text() != "Help" && tool.get_text() != "Spellcheck")
                {
                    tool.set_enabled(false);
                }
            }
        }
        editor.get_contentArea().style.fontFamily = font;
        editor.fire('FontName', { value: font });
    }, 0);
}

This function is being called from the OnClientLoad handler.

Sadly, although I can confirm that the editor believes all of the buttons are disabled, this is actually only true for
  • Paste
  • ConvertToUpperCase
  • ConvertToLowerCase
  • InsertParagraph
  • ToggleTableBorder
  • InsertDate
  • InsertTime
  • InsertHorizontalRule
  • Spellcheck
  • Help

Everythig is still functional.

If I switch to Preview mode then you (meaning the editor control) happily disable the entire ribbonbar. Is there access to the function that does that? If there is then all I eed to do is try and figure out a way of re-enabling the Spellcheck and Help buttons.

--
Stuart

0
Stuart Hemming
Top achievements
Rank 2
answered on 12 Mar 2012, 07:30 PM
To take some of the pressure off myself, I've cheated and opted to create a separate tools file with just Cut, Copy, PastePlainText, Spellcheck and Help tools in it and, when I postback to make the server-side changes necessary for switching between HTML and PlainText editing, I set the editor's toolsfile property to the appropriate value.

This isn't ideal, so I would be interested to discovering the proper solution.

--
Stuart
0
Rumen
Telerik team
answered on 15 Mar 2012, 01:17 PM
Hi,

I am glad that you were able to find a solution. I just want to share the following code with you which could be also helpful for your scenario:
<script type="text/javascript">
    function SetEditorTools(editor) {
        //disable all standard and split buttons of RadRibbonbar
        editor.get_toolAdapter()._setRibbonBarItemsEnabled(false);
        editor.get_toolAdapter()._setEditorToolsEnabled(false);
 
        //enable a standard ribbonbar button
        editor.get_toolAdapter()._setToolEnabled(editor.getToolByName("Bold"), true);
 
        //enable a standard ribbonbar split button
        editor.get_toolAdapter()._ribbonBarSplitButtons[0].set_enabled(true);
        Sys.UI.DomElement.removeCssClass(editor.get_toolAdapter()._ribbonBarSplitButtons[0].get_element(), "rrbImagePlaceholderDisabled");
                 
    }
</script>
<telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="SetEditorTools" ToolbarMode="RibbonBar">
</telerik:RadEditor>


Best regards,
Rumen
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
Stuart Hemming
Top achievements
Rank 2
answered on 15 Mar 2012, 05:38 PM
Rumen,

Thanks for that.

Do the DropDowns like "RealFontSize" get properly disabled by
editor.get_toolAdapter()._setToolEnabled(editor.getToolByName("RealFontSize"), false);
?

--
Stuart
0
Rumen
Telerik team
answered on 16 Mar 2012, 02:39 PM
Hi,

Yes, the _setToolEnabled method fully disabled the RealFontSize tool on my end: http://screencast.com/t/2p6KhyT6v.

Best regards,
Rumen
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
Editor
Asked by
Stuart Hemming
Top achievements
Rank 2
Answers by
Stuart Hemming
Top achievements
Rank 2
Rumen
Telerik team
Share this question
or