Default Table Style in RadEditor

[Trygve]

Hi,
We want to have the default style for tables set to style="border: 1px solid black;". We know how to attain this from manipulating the stylesheet, but this will not add the tag to HTML mode. So when storing to the DB it will not store the border properties, and when retrieving the data for a report it will not have any borders.

We are now using OnClientCommandExecuting and OnClientCommandExecuted to manipulate the table border formatting. But this way of doing it is causing our pages with many radeditor controls to load extremely slow.

Code used for JS function call manipulation;

        <telerik:RadEditor
                ID="RadEditor1"
                runat="server"
                Width="100%"
                ToolsFile="../RadControls/Editor/BasicTools.xml"
                skin="Vista"
                EditModes="Design"
                EnableResize="False"
                EnableTheming="True"
                StripFormattingOptions="AllExceptNewLines"
                ToolbarMode="Default"
                OnClientCommandExecuting="OnClientCommandExecuting"
                OnClientCommandExecuted="OnClientCommandExecuted">
        </telerik:RadEditor>

var curTables = [];
var curTds = [];
            function IsObjectInArray(elem, array)
            {
                if (!array || !array.length) return false;
                for (var i=0; i < array.length; i++)
                {
                    if (elem == array[i]) return true;
                }
                return false;
            }

            function OnClientCommandExecuting(editor, args) {
                var commandName = args.get_commandName();
                if ("InsertTable" == commandName) {
                    var cArea = editor.get_contentArea();
                    var tables = cArea.getElementsByTagName("TABLE");
                    var tds = cArea.getElementsByTagName("TD");
                    for (var i = 0; i < tables.length; i++) {
                        curTables[curTables.length] = tables[i];
                    }
                    for (var j = 0; j < tds.length; j++) {
                        curTds[curTds.length] = tds[j];
                    }
                }
            }
            function OnClientCommandExecuted(editor, args) {
                var commandName = args.get_commandName();
                if ("InsertTable" == commandName) {

                    var cArea = editor.get_contentArea();
                    var tables = cArea.getElementsByTagName("TABLE");
                    var tds = cArea.getElementsByTagName("TD");
                    for (var i = 0; i < tables.length; i++) {
                        var oTable = tables[i];
                        if (!IsObjectInArray(oTable, curTables)) {
                            oTable.style.borderCollapse = "collapse";
                            oTable.style.border = "Black 1px solid";
                            oTable.style.width = "100%";
                        }
                    }
                    for (var j = 0; j < tds.length; j++) {
                        var oTd = tds[j];
                        if (!IsObjectInArray(oTd, curTds)) {
                            oTd.style.border = "1px solid black";
                        }
                    }
                }
            }

Is there any other way of attaining the desired behaviour?

[Rumen]

Hello Trygve,

My suggestion is to use the OnClientPasteHtml event property of RadEditor which is fired when the InsertTable command is executed. This event is useful in scenarios where the developers need to examine or modify the HTML to be pasted by an editor tool before it is inserted in the editor content area. You can obtain the content pasted via the TableWizard and InsertTable tools via the args.get_value() method, modify it and paste it in the editor. This operation will be faster that you current approach.

Greetings,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Trygve]

Hi and thanks for your answer, however I can not get this to work yet. I think I might be keeping to much of the old code when trying to implement the new way of solving it. Below is my new code:

            var curTables = [];
            var curTds = [];

            function IsObjectInArray(elem, array) {
                if (!array || !array.length) return false;
                for (var i = 0; i < array.length; i++) {
                    if (elem == array[i]) return true;
                }
                return false;
            }

            function OnClientPasteHtml(sender, args) {
                var commandName = args.get_commandName();
                var value = args.get_value();

                if ("InsertTable" == commandName) {
                    var cArea = sender.get_contentArea();
                    var tables = cArea.getElementsByTagName("TABLE");
                    var tds = cArea.getElementsByTagName("TD");
                    for (var i = 0; i < tables.length; i++) {
                        curTables[curTables.length] = tables[i];
                        var oTable = tables[i];
                        if (!IsObjectInArray(oTable, curTables)) {
                            oTable.style.borderCollapse = "collapse";
                            oTable.style.border = "Black 1px solid";
                            oTable.style.width = "100%";
                        }
                    }
                    for (var j = 0; j < tds.length; j++) {
                        curTds[curTds.length] = tds[j];
                        var oTd = tds[j];
                        if (!IsObjectInArray(oTd, curTds)) {
                            oTd.style.border = "1px solid black";
                        }
                    }
                }
            }

RadEditor declaration:

<telerik:RadEditor ID="RadEditor1" runat="server" OnClientPasteHtml="OnClientPasteHtml" EditModes="All" EnableResize="False"
EnableTheming="True" Skin="Vista" StripFormattingOptions="AllExceptNewLines" ToolbarMode="Default" ToolsFile="RadControls/Editor/BasicTools.xml" Width="100%" Height="300px">
<Modules>
<telerik:EditorModule Name="RadEditorStatistics" Enabled="true" Visible="true" />
</Modules>
</telerik:RadEditor>

Any help is appreciated. Thanks!

[Rumen]

Hello Trygve,

Indeed, the solution is much simple. Here is how to implement the solution:

<script type="text/javascript">

function OnClientPasteHtml(sender, args)

{

var commandName = args.get_commandName();

var value = args.get_value(); //here is the content that will be inserted via the InsertTable dialog

if ("InsertTable" == commandName || "TableWizard" == commandName)

{

var div = document.createElement("DIV");

div.innerHTML = value;

var table = div.firstChild;

table.style.border = "1px solid red";

args.set_value(div.innerHTML);

}

}

</script>

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

I hope this helps.

Kind regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Trygve]

Thanks! That does exactly what I need :)

[Trygve]

I modified the provided example a bit to include table cells. It now sets borders for the whole table including cells.

            function OnClientPastehtml(sender, args) {
                var commandName = args.get_commandName();
                var value = args.get_value(); //here is the content that will be inserted via the InsertTable dialog

                if ("InsertTable" == commandName || "TableWizard" == commandName) {
                    var div = document.createElement("DIV");

                    div.innerhtml = value;
                    //Sets the border around the table
                    var table = div.firstChild;
                    table.style.border = "1px solid black";
                    table.style.width = "100%";
                    table.style.borderCollapse = "collapse";
                    //Sets the border around the cells
                    var vTD = div.getElementsByTagName("TD");
                    for (var j = 0; j < vTD.length; j++) {
                        var oTd = vTD[j];
                        oTd.style.border = "1px solid black";
                    }

                    args.set_value(div.innerhtml);
                }
            }

[Rumen]

Hi Trygve,

I am glad that you have achieved your goal. If you would like you can post the whole solution in our code library system. I will also add you 1000 Telerik points for this.

Greetings,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Raghu R]

Hello Rumen,

I need to achieve the same with <telerik:RadRichTextBox /> control.

Could you please help me out ?

Thanks
Raghu R

[Marin Bratanov]

Hello Raghu,

There is no RadRichTextBox control in the RadControls for ASP.NET AJAX suite, so I can only assume that you are looking for help with one of other bundles. If so, I would advise that you post in the respective forum for the control:
http://www.telerik.com/community/forums/silverlight/richtextbox.aspx
http://www.telerik.com/community/forums/winforms/richtextbox.aspx
http://www.telerik.com/community/forums/wpf/richtextbox.aspx

Regards,
Marin Bratanov
Telerik