Table dialog customization

[Paul]

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.

[Rumen]

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.

[Paul]

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"}
},

 

[Rumen]

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.

[Paul]

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?

[Tervel]

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.

[Arte]

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

[Richard]

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!