HTML table with Border, cellspacing and cellpadding

1 posts, 0 answers
  1. Manish
    Manish avatar
    2 posts
    Member since:
    Feb 2013

    Posted 26 Feb 2013 Link to this post

    In my application i have to display a table with data by binding a string which contains the require html code. My html code contains css classes , which radrichtextbox was not able to pickup initially, but after changing there case(to lower case) most of the sytle tags are working fine except border , cellspacing and cellpadding tags which i am using for table.

    Xaml Code
    <telerik:HtmlDataProvider x:Name="HtmlProvider" RichTextBox="{Binding ElementName=SmpleRadRichTextBox}" Html={Binding Content, Mode=OneWay}" >
                    <telerik:HtmlDataProvider.FormatProvider>
                                <telerik:HtmlFormatProvider>                           
                                    <telerik:HtmlFormatProvider.ExportSettings>
                                <telerik:HtmlExportSettings DocumentExportLevel="Fragment"  StylesExportMode="Inline" />
                                    </telerik:HtmlFormatProvider.ExportSettings>
                                </telerik:HtmlFormatProvider>
                            </telerik:HtmlDataProvider.FormatProvider>
                </telerik:HtmlDataProvider>
                <telerik:RadRichTextBox  x:Name="SmpleRadRichTextBox" IsReadOnly="True" IsSpellCheckingEnabled="False"  >
                        </telerik:RadRichTextBox>

    ViewModel Code
    private string content;
     
    public string Content
            {
                get
                {
                    return this.content;
                }
     
                set
                {
                    this.content = value;
                    this.RaisePropertyChanged("Content");
                }
            }

    html code which i am assigning to "Content" property as a string
    <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
    <html xmlns='http://www.w3.org/1999/xhtml' lang='en' xml:lang='en'>
    <head>
    <title> Sample</title>
     <style type='text/css'>
    <!--
    th{font-weight: bold;font-size: 8pt; color: black; font-family: arial, sans-serif; text-align: center}
    td{ font-weight: normal; font-size: 8pt; color: black; font-family: 'ms sans serif', arial, sans-serif; text-decoration: none}
    td.text{ text-align: left}
     td.cas_num{ text-align: left}
    td.numeric{ text-align: right}
     td.indicator{ text-align: center}
    h2{font-weight: bold; font-size: 12pt; color: black; font-family: arial, sans-serif; text-align: center}
    h4{ font-weight: normal ; font-size: 10pt; color: black; font-family: arial, sans-serif; text-align: left}-->>
    </style>
     </head>
    <body>
    <h2>Sample Report</h2>
    <h4>For RadRichTextBox</h4><br/>
    <table border="2" cellpadding="2" cellspacing="2" width="100%">
    <tr><th align='center'>First</th>
    <th align='center'>Second</th>
    <th align='center'>Third</th>
    <th align='center'> Fourth</th>
    </tr>
    <tr><td class='TEXT'><b>Data1</b></td>
    <td class='NUMERIC'>100.0000000000</td>
    <td class='NUMERIC'>100.0000000000</td>
    <td class='TEXT'>Data2</td>
    </tr>
    <tr><td class='TEXT'>Data3</td>
    <td class='NUMERIC'>100.0000000000</td>
    <td class='NUMERIC'>100.0000000000</td>
    <td class='TEXT'>Data4</td>
    </tr>
    </table>
    </body>
    </html>

    i have attached screen shots of radrichtextbox's output and expected output for further reference. Please have a look and provide solution to get the expected result  ASAP. 
Back to Top