RadEditor content from HTML Table

5 posts, 1 answers
  1. Dan
    Dan avatar
    17 posts
    Member since:
    Oct 2010

    Posted 31 Jan 2012 Link to this post

    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
  2. Answer
    Rumen
    Admin
    Rumen avatar
    14351 posts

    Posted 01 Feb 2012 Link to this post

    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
    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 their blog feed now
  3. Dan
    Dan avatar
    17 posts
    Member since:
    Oct 2010

    Posted 01 Feb 2012 Link to this post

    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
  4. Ramkumar
    Ramkumar avatar
    12 posts
    Member since:
    Nov 2013

    Posted 09 Dec 2013 Link to this post

    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?
  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5460 posts

    Posted 11 Dec 2013 Link to this post

    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
    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.
Back to Top