Disabling Toolbar buttons on the server

12 posts, 0 answers
  1. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 05 Mar 2012 Link to this post

    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



  2. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 05 Mar 2012 Link to this post

    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


  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Rumen
    Admin
    Rumen avatar
    12849 posts

    Posted 07 Mar 2012 Link to this post

    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.
  5. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 08 Mar 2012 Link to this post

    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

  6. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 08 Mar 2012 Link to this post

    And I'd really like to know why the server-side code I posted in my first post doesn't work.

    --
    Stuart
  7. Rumen
    Admin
    Rumen avatar
    12849 posts

    Posted 12 Mar 2012 Link to this post

    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.
  8. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 12 Mar 2012 Link to this post

    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
  9. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 12 Mar 2012 Link to this post

    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

  10. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 12 Mar 2012 Link to this post

    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
  11. Rumen
    Admin
    Rumen avatar
    12849 posts

    Posted 15 Mar 2012 Link to this post

    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.
  12. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 15 Mar 2012 Link to this post

    Rumen,

    Thanks for that.

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

    --
    Stuart
  13. Rumen
    Admin
    Rumen avatar
    12849 posts

    Posted 16 Mar 2012 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017