Table rendering issue

2 posts, 0 answers
  1. Konrad Sikorski
    Konrad Sikorski avatar
    23 posts
    Member since:
    Jul 2010

    Posted 30 Aug 2013 Link to this post

    Hi,

    Here is html which I try to render in richTextBox:
    <div class="ExternalClass3F788EAFC18E425B888E369D765BDE16"><html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Generator" content="Microsoft SafeHTML" /><style>
    .ExternalClass3F788EAFC18E425B888E369D765BDE16 p.MsoNormal, .ExternalClass3F788EAFC18E425B888E369D765BDE16 li.MsoNormal, .ExternalClass3F788EAFC18E425B888E369D765BDE16 div.MsoNormal
    {margin:0in;margin-bottom:.0001pt;font-size:11.0pt;font-family:"Calibri","sans-serif";}
    .ExternalClass3F788EAFC18E425B888E369D765BDE16 a:link, .ExternalClass3F788EAFC18E425B888E369D765BDE16 span.MsoHyperlink
    {color:blue;text-decoration:underline;text-underline:single;}
    .ExternalClass3F788EAFC18E425B888E369D765BDE16 a:visited, .ExternalClass3F788EAFC18E425B888E369D765BDE16 span.MsoHyperlinkFollowed
    {color:purple;text-decoration:underline;text-underline:single;}
    .ExternalClass3F788EAFC18E425B888E369D765BDE16 span.EmailStyle17
    {font-family:"Calibri","sans-serif";color:windowtext;}
    .ExternalClass3F788EAFC18E425B888E369D765BDE16 .MsoChpDefault
    {font-family:"Calibri","sans-serif";}
    @page WordSection1
    {size:8.5in 11.0in;margin:1.0in 1.0in 1.0in 1.0in;}
    .ExternalClass3F788EAFC18E425B888E369D765BDE16 div.WordSection1
    {page:WordSection1;}
     
    </style></head><body lang="EN-US" link="blue" vlink="purple" style="tab-interval:.5in"><div class="WordSection1"><table class="MsoTableLightListAccent1" border="1" cellspacing="0" cellpadding="0" style="border-collapse:collapse;border:none"><tr style=""><td width="213" valign="top" style="width:159.6pt;border-top:solid #4F81BD 1.0pt;border-left:solid #4F81BD 1.0pt;border-bottom:none;border-right:none;background:#4F81BD;padding:0in 5.4pt 0in 5.4pt"><p class="MsoNormal" style=""><b><span style="color:white">A</span></b></p></td><td width="213" valign="top" style="width:159.6pt;border:none;border-top:solid #4F81BD 1.0pt;background:#4F81BD;padding:0in 5.4pt 0in 5.4pt"><p class="MsoNormal" style=""><b><span style="color:white">B</span></b></p></td><td width="213" valign="top" style="width:159.6pt;border-top:solid #4F81BD 1.0pt;border-left:none;border-bottom:none;border-right:solid #4F81BD 1.0pt;background:#4F81BD;padding:0in 5.4pt 0in 5.4pt"><p class="MsoNormal" style=""><b><span style="color:white">C</span></b></p></td></tr><tr style=""><td width="213" valign="top" style="width:159.6pt;border:solid #4F81BD 1.0pt;border-right:none;padding:0in 5.4pt 0in 5.4pt"><p class="MsoNormal" style=""><b>1</b></p></td><td width="213" valign="top" style="width:159.6pt;border-top:solid #4F81BD 1.0pt;border-left:none;border-bottom:solid #4F81BD 1.0pt;border-right:none;padding:0in 5.4pt 0in 5.4pt"><p class="MsoNormal" style="">2</p></td><td width="213" valign="top" style="width:159.6pt;border:solid #4F81BD 1.0pt;border-left:none;padding:0in 5.4pt 0in 5.4pt"><p class="MsoNormal" style="">3</p></td></tr><tr style=""><td width="213" valign="top" style="width:159.6pt;border-top:none;border-left:solid #4F81BD 1.0pt;border-bottom:solid #4F81BD 1.0pt;border-right:none;padding:0in 5.4pt 0in 5.4pt"><p class="MsoNormal" style=""><b>4</b></p></td><td width="213" valign="top" style="width:159.6pt;border:none;border-bottom:solid #4F81BD 1.0pt;padding:0in 5.4pt 0in 5.4pt"><p class="MsoNormal">5</p></td><td width="213" valign="top" style="width:159.6pt;border-top:none;border-left:none;border-bottom:solid #4F81BD 1.0pt;border-right:solid #4F81BD 1.0pt;padding:0in 5.4pt 0in 5.4pt"><p class="MsoNormal">6</p></td></tr></table><p class="MsoNormal"> </p></div></body></html></div>

    This Html was generated by Outlook for some HTML message. And it should render like it is in "email" attachment. The result of rendering it by RichTextBox you can see in "email in RichTextBox" attachment.

    What is missing:
     - background for table cells
     - table width (in RTB the table is straeached to fill the page width)

    I am using version: 2012.3.1129.1050. When I was try to use the newest version, the result was even wars ("email in NEWEST version RichTextBox"). The table with in this version is correct.

    The code which I use:
    var provider = new Telerik.Windows.Documents.FormatProviders.Html.HtmlFormatProvider();
    var document = provider.Import(emailAsHtml);
    document.ParagraphDefaultSpacingAfter = 0;
    ucRadRichTextBox.Document = document;

    Questions:
     1. Is it any workaround to fix the tables cells background
     2. Why the new version render it so badly?
  2. Mihail
    Admin
    Mihail avatar
    192 posts

    Posted 04 Sep 2013 Link to this post

    Hello Konrad,

    Unfortunately RadRichTextBox does not fully support the HTML standard. That's why the style property "border-top" will only be imported if in certain order: width style color. Here is an example:

    border-top: 1.0pt solid #4F81BD;
    Another limitation is that HtmlFormatProvider does not support he shorthand property "background". What is supported is "background-color":
    background-color: #4F81BD;

    If you fix those properties the document will be imported as desired.

    More on what is supported by HtmlFormatProvider you can read in this help article: http://www.telerik.com/help/silverlight/radrichtextbox-features-html-support.html

    Regards,
    Mihail
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  3. DevCraft banner
Back to Top