This is a migrated thread and some comments may be shown as answers.

Default Table Style in RadEditor

8 Answers 353 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Trygve
Top achievements
Rank 2
Trygve asked on 10 Mar 2009, 10:31 AM
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?

8 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 12 Mar 2009, 05:54 PM
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.
0
Trygve
Top achievements
Rank 2
answered on 13 Mar 2009, 07:03 AM
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!


0
Accepted
Rumen
Telerik team
answered on 16 Mar 2009, 07:14 PM
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.
0
Trygve
Top achievements
Rank 2
answered on 17 Mar 2009, 06:48 AM
Thanks! That does exactly what I need :)
0
Trygve
Top achievements
Rank 2
answered on 18 Mar 2009, 12:49 PM
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); 
                } 
            } 

0
Rumen
Telerik team
answered on 18 Mar 2009, 01:01 PM
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.
0
Raghu R
Top achievements
Rank 2
answered on 08 Jan 2014, 09:35 AM
Hello Rumen,

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

Could you please help me out ?

Thanks
Raghu R
0
Marin Bratanov
Telerik team
answered on 10 Jan 2014, 03:47 PM
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
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.
Tags
Editor
Asked by
Trygve
Top achievements
Rank 2
Answers by
Rumen
Telerik team
Trygve
Top achievements
Rank 2
Raghu R
Top achievements
Rank 2
Marin Bratanov
Telerik team
Share this question
or