RadEditor content from HTML Table

[Dan]

Hi,
We are writing a new version of our software using C# and Telerik tools.  In this case we have HTML content stored in the database that is being migrated and read into a RadEditor.  The issue seems to be when the content was created as a HTML Table.  Is there   An example is below:

<TABLE style="WIDTH: 503pt; BORDER-COLLAPSE: collapse" cellSpacing=0 cellPadding=0 width=670 border=0 x:str>
<COLGROUP>
<COL style="WIDTH: 34pt; mso-width-source: userset; mso-width-alt: 1645" width=45>
<COL style="WIDTH: 469pt; mso-width-source: userset; mso-width-alt: 22857" width=625>
<TBODY>
<TR style="HEIGHT: 12.75pt" height=17>
<TD class=xl26 style="BORDER-RIGHT: #c0c0c0; BORDER-TOP: #c0c0c0; BORDER-LEFT: #c0c0c0; WIDTH: 503pt; BORDER-BOTTOM: #c0c0c0; HEIGHT: 12.75pt;

BACKGROUND-COLOR: transparent; mso-ignore: colspan" width=670 colSpan=2 height=17><STRONG><FONT face=Arial size=2>Roof Inspection, 1

Year:</FONT></STRONG></TD></TR>
<TR style="HEIGHT: 12.75pt" height=17>
<TD class=xl25 style="BORDER-RIGHT: #c0c0c0; BORDER-TOP: #c0c0c0; BORDER-LEFT: #c0c0c0; BORDER-BOTTOM: #c0c0c0; HEIGHT: 12.75pt;

BACKGROUND-COLOR: transparent" height=17><STRONG><FONT face=Arial size=2></FONT></STRONG></TD>
<TD class=xl24 style="BORDER-RIGHT: #c0c0c0; BORDER-TOP: #c0c0c0; BORDER-LEFT: #c0c0c0; BORDER-BOTTOM: #c0c0c0; BACKGROUND-COLOR:

transparent"><STRONG><FONT face=Arial size=2></FONT></STRONG></TD></TR>
<TR style="HEIGHT: 12.75pt" height=17>
<TD class=xl25 style="BORDER-RIGHT: #c0c0c0; BORDER-TOP: #c0c0c0; BORDER-LEFT: #c0c0c0; BORDER-BOTTOM: #c0c0c0; HEIGHT: 12.75pt;

BACKGROUND-COLOR: transparent" height=17><STRONG><FONT face=Arial size=2></FONT></STRONG></TD>
<TD class=xl24 style="BORDER-RIGHT: #c0c0c0; BORDER-TOP: #c0c0c0; BORDER-LEFT: #c0c0c0; BORDER-BOTTOM: #c0c0c0; BACKGROUND-COLOR:

transparent"><STRONG><FONT face=Arial size=2></FONT></STRONG></TD></TR>
<TR style="HEIGHT: 12.75pt" height=17>
<TD class=xl27 style="BORDER-RIGHT: #c0c0c0; BORDER-TOP: #c0c0c0; BORDER-LEFT: #c0c0c0; BORDER-BOTTOM: #c0c0c0; HEIGHT: 12.75pt;

BACKGROUND-COLOR: transparent; mso-ignore: colspan" colSpan=2 height=17><FONT face=Arial size=2>Note: Use caution whenever working on a

roof.<SPAN style="mso-spacerun: yes">  </SPAN>Ensure all fall arrest procedures are followed.</FONT></TD></TR>
<TR style="HEIGHT: 12.75pt" height=17>
<TD class=xl25 style="BORDER-RIGHT: #c0c0c0; BORDER-TOP: #c0c0c0; BORDER-LEFT: #c0c0c0; BORDER-BOTTOM: #c0c0c0; HEIGHT: 12.75pt;

BACKGROUND-COLOR: transparent" height=17><FONT face=Arial size=2></FONT></TD>
<TD class=xl24 style="BORDER-RIGHT: #c0c0c0; BORDER-TOP: #c0c0c0; BORDER-LEFT: #c0c0c0; BORDER-BOTTOM: #c0c0c0; BACKGROUND-COLOR:

transparent"><FONT face=Arial size=2></FONT></TD></TR>
<TR style="HEIGHT: 12.75pt" height=17>
<TD class=xl27 style="BORDER-RIGHT: #c0c0c0; BORDER-TOP: #c0c0c0; BORDER-LEFT: #c0c0c0; BORDER-BOTTOM: #c0c0c0; HEIGHT: 12.75pt;

BACKGROUND-COLOR: transparent" height=17 x:str="( ) "><FONT size=2><FONT face=Arial>( )<SPAN style="mso-spacerun:

yes"> </SPAN></FONT></FONT></TD>
<TD class=xl24 style="BORDER-RIGHT: #c0c0c0; BORDER-TOP: #c0c0c0; BORDER-LEFT: #c0c0c0; BORDER-BOTTOM: #c0c0c0; BACKGROUND-COLOR:

transparent"><FONT face=Arial size=2>Ensure the roof area is clean and free of debris, nails, scraps of metal and plant growth on the

roof.</FONT></TD></TR>
<TR style="HEIGHT: 12.75pt" height=17>
<TD class=xl27 style="BORDER-RIGHT: #c0c0c0; BORDER-TOP: #c0c0c0; BORDER-LEFT: #c0c0c0; BORDER-BOTTOM: #c0c0c0; HEIGHT: 12.75pt;

BACKGROUND-COLOR: transparent; mso-ignore: colspan" colSpan=2 height=17 x:str="( ) Examine metal flashings, cappings, and metal siding for

wind damage, corrosion, loose "><FONT size=2><FONT face=Arial>( ) Examine metal flashings, cappings, and metal siding for wind damage,

corrosion, loose<SPAN style="mso-spacerun: yes"> </SPAN></FONT></FONT></TD></TR>
<TR style="HEIGHT: 12.75pt" height=17>
<TD class=xl27 style="BORDER-RIGHT: #c0c0c0; BORDER-TOP: #c0c0c0; BORDER-LEFT: #c0c0c0; BORDER-BOTTOM: #c0c0c0; HEIGHT: 12.75pt;

BACKGROUND-COLOR: transparent; mso-ignore: colspan" colSpan=2 height=17><FONT face=Arial size=2>joints or defective caulking.</FONT></TD></TR>
<TR style="HEIGHT: 12.75pt" height=17>
<TD class=xl27 style="BORDER-RIGHT: #c0c0c0; BORDER-TOP: #c0c0c0; BORDER-LEFT: #c0c0c0; BORDER-BOTTOM: #c0c0c0; HEIGHT: 12.75pt;

BACKGROUND-COLOR: transparent; mso-ignore: colspan" colSpan=2 height=17><FONT face=Arial size=2>( ) Check pitch pockets and machinery bases

for damage.</FONT></TD></TR>
<TR style="HEIGHT: 12.75pt" height=17>
<TD class=xl27 style="BORDER-RIGHT: #c0c0c0; BORDER-TOP: #c0c0c0; BORDER-LEFT: #c0c0c0; BORDER-BOTTOM: #c0c0c0; HEIGHT: 12.75pt;

BACKGROUND-COLOR: transparent; mso-ignore: colspan" colSpan=2 height=17><FONT face=Arial size=2>( ) Examine roof surface for deterioration,

water infiltration, or cracking.</FONT></TD></TR>
<TR style="HEIGHT: 12.75pt" height=17>
<TD class=xl27 style="BORDER-RIGHT: #c0c0c0; BORDER-TOP: #c0c0c0; BORDER-LEFT: #c0c0c0; BORDER-BOTTOM: #c0c0c0; HEIGHT: 12.75pt;

BACKGROUND-COLOR: transparent; mso-ignore: colspan" colSpan=2 height=17><FONT face=Arial size=2>( ) Check that all roof drains are

clear.</FONT></TD></TR>
<TR style="HEIGHT: 12.75pt" height=17>
<TD class=xl27 style="BORDER-RIGHT: #c0c0c0; BORDER-TOP: #c0c0c0; BORDER-LEFT: #c0c0c0; BORDER-BOTTOM: #c0c0c0; HEIGHT: 12.75pt;

BACKGROUND-COLOR: transparent; mso-ignore: colspan" colSpan=2 height=17><FONT face=Arial size=2>( ) Check for poor drainage.</FONT></TD></TR>
<TR style="HEIGHT: 12.75pt" height=17>
<TD class=xl27 style="BORDER-RIGHT: #c0c0c0; BORDER-TOP: #c0c0c0; BORDER-LEFT: #c0c0c0; BORDER-BOTTOM: #c0c0c0; HEIGHT: 12.75pt;

BACKGROUND-COLOR: transparent; mso-ignore: colspan" colSpan=2 height=17><FONT face=Arial size=2>( ) Check all roof anchors.</FONT></TD></TR>
<TR style="HEIGHT: 12.75pt" height=17>
<TD class=xl27 style="BORDER-RIGHT: #c0c0c0; BORDER-TOP: #c0c0c0; BORDER-LEFT: #c0c0c0; BORDER-BOTTOM: #c0c0c0; HEIGHT: 12.75pt;

BACKGROUND-COLOR: transparent; mso-ignore: colspan" colSpan=2 height=17><FONT face=Arial size=2>( ) Check parapets for open mortar joints,

capping.</FONT></TD></TR>
<TR style="HEIGHT: 12.75pt" height=17>
<TD class=xl27 style="BORDER-RIGHT: #c0c0c0; BORDER-TOP: #c0c0c0; BORDER-LEFT: #c0c0c0; BORDER-BOTTOM: #c0c0c0; HEIGHT: 12.75pt;

BACKGROUND-COLOR: transparent; mso-ignore: colspan" colSpan=2 height=17><FONT face=Arial size=2>( ) Check all skylights for cracks, damaged

flashing or caulking.</FONT></TD></TR></TBODY></TABLE>

When this is put into a htm file, it looks fine, but in the editor it looks like the attached Roof Inspection.jpg file.

The Editor (leaving out Tools and Modules) is defined as below:

<telerik:RadEditor ID="DescriptionEditor" Runat="server"
                    Width="650px" Height="355px"
                    EditModes="Design, Preview"
                    EnableResize="false"
                    StripFormattingOnPaste="All"
                    SkinID="DefaultSetOfTools"
                    OnClientCommandExecuting="OnClientCommandExecuting"
                    >

Thanks for your help,
Dan Norton

[Rumen]

Hello,

Please, set the CssFiles property to point to some empty css file and test the table content again.
You can find more information how to solve this CSS problem in the following article: Content Area Appearance Problems.

All the best,
Rumen
the Telerik team

[Dan]

Thanks Rumen,
That did the trick.  I pointed the ContentAreaCssFile to an empty css file and it cleared up the format issue completely.
Thanks again for your help,
Dan

[Ramkumar]

Hi,
   I need to place the table inside the radeditor content in code behind. I can able to give the table inside the content property of radeditor.
But I need to do the same in code behing in C#. can anyone help me?

[Marin Bratanov]

Hi Ramkumar,

You can use the server-side Content property RadEditor offers. It lets you get or set the current HTML string that is shown in RadEditor. You can create the tables as desired and insert them in the content.


Regards,
Marin Bratanov
Telerik