Table dialog customization

8 posts, 0 answers
  1. Paul
    Paul avatar
    49 posts
    Member since:
    Dec 2008

    Posted 26 Jan 2009 Link to this post

    I would like to customize the InsertTable dropdown tool by removing much of the functionality. I just want the tool to allow users to add a table, and add/delete rows and columns. I want to remove the table wizard and all the formatting capabilities (fonts, sizes, colors, backgrounds, borders, etc.).

    I see the dialog code for each of the details (Table Wizard, Table Properties, Cell Properties) but I don't see anywhere that I can change the dropdown. Is that possible?


    OK, I made progress on this. The InsertTable item is a button, so there isn't any dialog and it's not a dropdown, so I can't remove child items. I edited the TableWizard dialog, set the whole table to display:none, and added a div above the table with text that says these features are not available. So that meets my immediate need, because all the settings I don't want are in the TableWizard dialog.

    So now the question is less urgent, because I have most of a solution. Does anyone know if there's any way to remove the Table Wizard, Table Properties and Cell Properties links from the InsertTable button? It would be better if the user could not make an invalid choice. But this doesn't seem likely to be something I can modify.
  2. Rumen
    Admin
    Rumen avatar
    14431 posts

    Posted 29 Jan 2009 Link to this post

    Hi Paul,

    All you need to do hide the TableWizard tool from the Insert Table dropdown is to declare the following class on the page with the editor:

    <style type="text/css"> 
    .rade_InsertTable .rade_tlbVertical 

        display:none; 
    }     
    </style>

    Greetings,
    Rumen
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. Paul
    Paul avatar
    49 posts
    Member since:
    Dec 2008

    Posted 29 Jan 2009 Link to this post

    Thank you. That almost does what I want, and it's nice and clean. But I want to include the rest of the tools on that popup button (insert row above, insert row below, etc.), and just remove the Table Wizard, Cell Properties and Table Properties. Setting that style to display:none hides all of them.

    If I look at the page's source in the browser, I see the tool is specified as below. Is there any way for me to modify this script, omitting just the Table Wizard, Cell Properties and Table Properties?

    {"type":16,"name":"InsertTable",
    "tools":
     [
     {"name":"TableWizard","text":"Table Wizard"},
     {"name":"InsertRowAbove","text":"Insert Row Above"},
     {"name":"InsertRowBelow","text":"Insert Row Below"},
     {"name":"DeleteRow","text":"Delete Row"},
     {"name":"InsertColumnLeft","text":"Insert Column to the Left"},
     {"name":"InsertColumnRight","text":"Insert Column to the Right"},
     {"name":"DeleteColumn","text":"Delete Column"},
     {"name":"MergeColumns","text":"Merge Cells Horizontally"},
     {"name":"MergeRows","text":"Merge Cells Vertically"},
     {"name":"SplitCell","text":"Split Cell"},
     {"name":"DeleteCell","text":"Delete Cell"},
     {"name":"SetCellProperties","text":"Set Cell Properties"},
     {"name":"SetTableProperties","text":"Set Table Properties"}
     ],
    "attributes":
     {"popupclassname":"rade_InsertTable","itemsperrow":"8","sizetofit":"true"}
    },

     

  4. Rumen
    Admin
    Rumen avatar
    14431 posts

    Posted 30 Jan 2009 Link to this post

    Hi Paul,

    You can hide the requested button icons with the following styles:

        <style type="text/css"
        .rade_InsertTable .rade_tlbVertical .rade_tool_text, 
        .rade_InsertTable .SetCellProperties, 
        .rade_InsertTable .SetTableProperties 
        { 
            display:none !important; 
        } 
        </style> 


    You can also hide these buttons with the following javascript code:

     <script type="text/javascript">   
        function OnClientLoad(editor, args)   
        {   
            var oTool = editor.getToolByName("InsertTable");    
            oTool._element.onclick = function(){   
                window.setTimeout(function()   
                    {   
                        var elemCol = document.getElementsByTagName("SPAN");   
                        for(i=0; i< elemCol.length; i++)   
                        {   
                            var elem = elemCol[i];   
                            if(elem.className=="TableWizard")   
                            {   
                                elem.parentNode.parentNode.parentNode.style.visibility = "hidden";   
                            }   
                            if(elem.className=="SetCellProperties" || elem.className=="SetTableProperties")   
                            {   
                                elem.parentNode.parentNode.style.visibility = "hidden";   
                            }   
                        }   
                    },50);   
            }    
        }   
    </script>   
    <telerik:RadEditor id="RadEditor1" OnClientLoad="OnClientLoad" runat="server"></telerik:RadEditor>  


    All the best,
    Rumen
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  5. Paul
    Paul avatar
    49 posts
    Member since:
    Dec 2008

    Posted 30 Jan 2009 Link to this post

    Thank You! That's perfect. One last question on this topic. Can I find this kind of detailed information about the styles somewhere in the documentation? Or can you suggest a way for me to find the correct style hierarchy?
  6. Tervel
    Admin
    Tervel avatar
    1337 posts

    Posted 02 Feb 2009 Link to this post

    Hi Paul,

    The easiest approach for such advanced tasks would be to use either the FireBug plugin for FireFox, or the IEDevToolbar for Internet Explorer. Both of these tools provide the ability to examine HTML elements on the page by clicking on them - and all information about their content, structure, css and styles is displayed in editable property grids.

    Best wishes,
    Tervel
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  7. Arte
    Arte avatar
    2 posts
    Member since:
    Dec 2011

    Posted 21 Dec 2011 Link to this post

    I want to know if it is possible de changer le title(text)  of the tools on that popup button (insert row above, insert row below, etc.). i tried to do this but it doesn't work

               Dim ToolInsertRowAbove As New Telerik.Web.UI.EditorTool("InsertRowAbove")
                ToolInsertRowAbove.Text = "insertar abajo"
                Dim ToolInsertRowBelow As New Telerik.Web.UI.EditorTool("InsertRowBelow")
                ToolInsertRowBelow.Text = "insertar arriba"
                Dim ToolDeleteRow As New Telerik.Web.UI.EditorTool("DeleteRow")
                ToolDeleteRow.Text = "Eliminar Celda"
    thanks for your reponse

  8. Richard
    Richard avatar
    479 posts
    Member since:
    Nov 2011

    Posted 23 Dec 2011 Link to this post

    Arte:

    It looks like you want to translate the tooltip popup text to Spanish? Correct? If so, there is a simple and quick modification that will easily allow you to do this.

    See the Modify tooltip text for default buttons in RadEditor? forum thread for information on how to reference the RadEditor localization files.

    Also, the Spanish support is not built into the standard installation. But, you can download and install the required file from the attachment that is at the bottom of the RadEditor : Languages forum post.

    Hope this helps.

    Cheer!
Back to Top