Hide Table Wizard option from InsertTable tool

[Stefan N.]

Hi,

I want to allow my users to insert HTML tables in the content they generate, but I don't want them to be able to fully control styles and formatting for the inserted table.  The only control users should have is over the number of rows and columns in the table.  We do this to preserve look-n-feel consistency through our content. 

The InsertTable tool in RadEditor is great except we want to hide the Table Wizard and Table Properties options from the drop-down (which give "full-control" over table properties).  Is there a way to achieve this?  Is InsertTable a Tool Strip that we could modify?

Alternatively, we could build our own tool strip from the "primary" buttons that show up on that drop-down, but I wasn't able to find the corresponding tool for the interactive "table grid" that you drag across to specify the number of columns and rows.  Thanks,

Stefan

[Dobromir]

Hi Stefan,

InsertTable is a complex RadEditor's tool and does not provide the functionality to be modified out-of-the-box. However, you can achieve the required functionality by manually hiding the TableWizard and TableProperties buttons using the following code:

<telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="OnClientLoad">
</telerik:RadEditor>

<script type="text/javascript">
    function OnClientLoad(editor, args)
    {
        var toolsElem = editor.get_toolAdapter().getToolByName("InsertTable").get_element();//get reference to the InsertTable's tool DOM element

        if ($telerik.isIE)
        {
            toolsElem.attachEvent("onclick", toolClickHandler);//attach click handler
        }
        else
        {
            toolsElem.addEventListener("click", toolClickHandler, false);//attach click handler
        }

        function toolClickHandler()
        {
            setTimeout(function ()//using setTimeout to ensure that the dropdown is displayed
            {
                var toolsLinks = $telerik.$(".reInsertTable")[0].getElementsByTagName("A"); //get reference to the button elements inside the dropdown
                for (var i = 0; i < toolsLinks.length; i++)
                {
                    var title = toolsLinks[i].getAttribute("Title");
                    if (title == "Table Wizard" || title == "Table Properties")
                        toolsLinks[i].style.display = "none";//hide the Table Wizard and Table Properties buttons
                }
            }, 0);
        }
    }
</script>

I hope this helps.

Greetings,
Dobromir
the Telerik team

[Stefan N.]

Thanks Dobromir, that works.  How secure is hiding UI elements?  Would a user be able to trigger that functionality through some other scripting means?

[Dobromir]

Hi Stefan,

In terms of security, it is possible to trigger the functionality of a hidden UI element with third party scripts executed on the page. The JavaScript is not compiled code and can be examined by any user. Using a third party tools a hacker can even modify the JavaScript to modify the submitted value. That is why it is highly recommended to examine the submitted content on the server to avoid such modifications.

Best wishes,
Dobromir
the Telerik team

[Andreas]

Hello

Is this still the only way to turn of the table wizard?

BR
Andreas

[Rumen]

Hi Andreas,

Yes, this is still the only way to hide options in the Insert Table dropdown.

All the best,
Rumen
the Telerik team

[Arte]

Hello
can I  add a new tool (custom tool) in the "InsertTable tool dropdown?
thanks
Artemisa

[Rumen]

Hi,

This option is not offered out-of-the box by RadEditor and this could be implemented only by using a DOM hack - get a reference to the DOM object of some element in the expanded dropdown in the OnClientCommandExecuting event and insert a new button in the dropdown body.

Since this is a hack, it does not guarantee that the desired effect will be accomplished and you could experience appearance problems. That is why my recommendation is to add a standard custom button to the toolbar instead of trying to customize the Insert Table dropdown.

All the best,
Rumen
the Telerik team

[Richard]

Hi, I'm trying to hide the table wizard option from InsertTable tool, below you can find the code I have and it's getting a null when getToolByName function, any ideas?

<telerik:RadEditor ID="txtItemDesc" runat="server"
Skin="Default" EnableResize="False"
    Width="590" Height="110"
    EditModes="Design"
    StripFormattingOnPaste="AllExceptNewLines"
    SpellCheckSettings-AllowAddCustom="false"
    SpellCheckSettings-DictionaryLanguage="en-US"
    SpellCheckSettings-SpellCheckProvider="TelerikProvider"
    ContentAreaMode="Div"
    OnClientLoad="OnRadEditorClientLoad">
    <Tools>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="Bold" />
            <telerik:EditorTool Name="Italic" />
            <telerik:EditorTool Name="Underline" />
            <telerik:EditorSeparator Visible="true" />
            <telerik:EditorTool Name="Undo" />
            <telerik:EditorTool Name="Redo" />
            <telerik:EditorSeparator Visible="true" />
            <telerik:EditorTool Name="Copy" />
            <telerik:EditorTool Name="Cut" />
            <telerik:EditorTool Name="Paste" />
            <telerik:EditorSeparator Visible="true" />
            <telerik:EditorTool Name="InsertOrderedList" />
            <telerik:EditorTool Name="InsertUnorderedList" />
            <telerik:EditorTool Name="InsertSymbol" />
            <telerik:EditorTool Name="AjaxSpellCheck" />
            <telerik:EditorSeparator Visible="false" />
            <telerik:EditorTool Name="Expand" ShowIcon="true" />
            <telerik:EditorTool Name="ForeColor" />
            <telerik:EditorTool Name="InsertTable" />
        </telerik:EditorToolGroup>
    </Tools>
</telerik:RadEditor>

function

function OnRadEditorClientLoad(editor, args) {
    var insertTableTool = editor.get_toolAdapter().getToolByName("InsertTable");
    if (insertTableTool != null) {
        var toolsElem = editor.get_toolAdapter().getToolByName("InsertTable").get_element();
        if ($telerik.isIE) {
            toolsElem.attachEvent("onclick", toolClickHandler); //attach click handler
        } else {
            toolsElem.addEventListener("click", toolClickHandler, false); //attach click handler
        }

        function toolClickHandler() {
            setTimeout(function()//using setTimeout to ensure that the dropdown is displayed
            {
                var toolsLinks = $telerik.$(".reInsertTable")[0].getElementsByTagName("A"); //get reference to the button elements inside the dropdown
                for (var i = 0; i < toolsLinks.length; i++) {
                    var title = toolsLinks[i].getAttribute("Title");
                    if (title == "Table Wizard" || title == "Table Properties")
                        toolsLinks[i].style.display = "none"; //hide the Table Wizard and Table Properties buttons
                }
            }, 10);
        }
    }

[Ianko]

Hello Richard,

As Rumen mentioned in the previous message adding or removing buttons to the built-in dropdown menu is done by manipulating the DOM of the document.

This could be done with CSS, JavaScript or jQuery and finding the appropriate selectors with the browser inspector could be useful.

This is a jQuery example that shows how to hide the Table Wizard button:

<script>
    function OnClientLoad(editor, args) {
        $("a[title='Insert Table']").on("click", function () {
            setTimeout(function () {
                $("a[title='Table Wizard']").hide();
            }, 0);
        })
    }
</script>

<telerik:RadEditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoad">
    <Tools>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="Bold" />
            <telerik:EditorTool Name="Italic" />
            <telerik:EditorTool Name="Underline" />
            <telerik:EditorSeparator Visible="true" />
            <telerik:EditorTool Name="Undo" />
            <telerik:EditorTool Name="Redo" />
            <telerik:EditorSeparator Visible="true" />
            <telerik:EditorTool Name="Copy" />
            <telerik:EditorTool Name="Cut" />
            <telerik:EditorTool Name="Paste" />
            <telerik:EditorSeparator Visible="true" />
            <telerik:EditorTool Name="InsertOrderedList" />
            <telerik:EditorTool Name="InsertUnorderedList" />
            <telerik:EditorTool Name="InsertSymbol" />
            <telerik:EditorTool Name="AjaxSpellCheck" />
            <telerik:EditorSeparator Visible="false" />
            <telerik:EditorTool Name="Expand" ShowIcon="true" />
            <telerik:EditorTool Name="ForeColor" />
            <telerik:EditorTool Name="InsertTable" />
        </telerik:EditorToolGroup>
    </Tools>
</telerik:RadEditor>

Note that this is only an example and such customization should be used with further investigation of it's behavior and due to the reason that it is a hack it does not guarantee the normal appearance of the customized element from the DOM.

As mentioned in the message from Rumen, implementing a custom tool is recommended.

Regards,
Ianko
Telerik