Hide Table Wizard option from InsertTable tool

10 posts, 1 answers
  1. Stefan N.
    Stefan N. avatar
    4 posts
    Member since:
    Oct 2008

    Posted 09 Sep 2010 Link to this post

    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
  2. Answer
    Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 14 Sep 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Stefan N.
    Stefan N. avatar
    4 posts
    Member since:
    Oct 2008

    Posted 18 Sep 2010 Link to this post

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

    Posted 22 Sep 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. Andreas
    Andreas avatar
    13 posts
    Member since:
    Sep 2004

    Posted 20 Sep 2011 Link to this post

    Hello

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

    BR
    Andreas
  6. Rumen
    Admin
    Rumen avatar
    14070 posts

    Posted 21 Sep 2011 Link to this post

    Hi Andreas,

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

    All the best,
    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
  7. Arte
    Arte avatar
    2 posts
    Member since:
    Dec 2011

    Posted 27 Jan 2012 Link to this post

    Hello
    can I  add a new tool (custom tool) in the "InsertTable tool dropdown?
    thanks
    Artemisa
  8. Rumen
    Admin
    Rumen avatar
    14070 posts

    Posted 30 Jan 2012 Link to this post

    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
    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
  9. Richard
    Richard avatar
    17 posts
    Member since:
    Dec 2008

    Posted 30 Jul 2013 Link to this post

    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);
            }
        }
  10. Ianko
    Admin
    Ianko avatar
    1896 posts

    Posted 02 Aug 2013 Link to this post

    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
    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 the blog feed now.
Back to Top