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

RadRichTextBox - importing HTML with tables not displaying correctly

3 Answers 112 Views
RichTextBox
This is a migrated thread and some comments may be shown as answers.
Bob
Top achievements
Rank 2
Iron
Iron
Veteran
Bob asked on 20 Dec 2019, 03:54 PM

I have a web application that is using your Kendo editor.  The HTML output of the Kendo editor is saved in a database and can be opened in another WPF application to be edited in a RadRichTextBox.  The HTML is imported as follows, where "editor" is a RadRichTextBox:

private void ImportHtml(string HTML)
{
    HtmlFormatProvider _provider = new HtmlFormatProvider();
    HtmlImportSettings settings = new HtmlImportSettings();
 
    _provider.ImportSettings = settings;
    settings.UseDefaultStylesheetForFontProperties = true;
   editor.Document = _provider.Import(HTML);
}

 

When tables are created in the Kendo editor and imported to the RadRichTextBox, several issues are seen:

  1. Table, row, and cell heights are not maintained.  All rows and cells become the same height.
  2. Cell padding is not correct.  I can see the padding in the imported HTML as <td style="padding:5px;", but after import the padding is changed to padding: 5px 0px 0px 0px; (Padding="0,5,0,0" in the XAML).
  3. Table borders are not visible.  The borders are still in the HTML and can be seen in the Table Borders properties dialog, but are not visible in the editor and seem to not always work correctly if modified in the Table Borders properties dialog.  If cell spacing is added to the table in Kendo, then the borders will display in WPF.  Therefore, it appears as if the outer cell borders are covering the table borders.

Please let me know if there is anything I am missing here that will provide proper display of the tables in the RadRichTextBox.

Thanks!

3 Answers, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 25 Dec 2019, 02:02 PM

Hi Bob,

After taking a look, I was able to reproduce the issue with the incorrectly applied padding shorthand property. I have logged an item in our feedback portal: Padding value is imported incorrectly when shorthand property, where you can subscribe to be notified for any status updates. I am afraid that I couldn't find any workaround other than applying the padding values for all sides. For example:

padding: 5px 5px 5px 5px;

In appreciation for pointing out this to our attention, I have increased your Telerik points.

Regarding the issues with table borders and row height, I couldn't reproduce the result you are currently encountering. I tried reproducing the issues by importing the following HTML:

<html>
    <bod>
        <table border="5">
            <tr height="100px">
                <td>1.1</td>
                <td>1.2</td>
            </tr>
            <tr>
                <td>2.1</td>
                <td>2.2</td>
            </tr>
        </table>
    </bod>
</html>

Can you modify the HTML in that way that it reproduces the issues with table borders and row height? This way we can debug it on our site and try to provide you with a solution.

Looking forward to hearing from you.

Regards,
Georgi
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Bob
Top achievements
Rank 2
Iron
Iron
Veteran
answered on 31 Dec 2019, 06:40 PM

Thank you Georgi for investigating this issue.  Please try this HTML that was produced from the Kendo editor.

<table class='k-table' style='width:300px;height:110px;text-align:center;border-top:1px solid rgb(0, 0, 0);border-right:1px solid rgb(0, 0, 0);border-left:1px solid rgb(0, 0, 0);border-bottom:1px solid rgb(0, 0, 0);' cellspacing='0'><tbody><tr style='height:50%;'><td style='width:45%;height:75px;text-align:center;vertical-align:middle;padding:5px;border-top:1px solid rgb(0, 0, 0);border-right:1px solid rgb(0, 0, 0);border-left:1px solid rgb(0, 0, 0);border-bottom:4px double rgb(0, 0, 0);' align='left' valign='top'><span style='font-family:Helvetica;font-size:14pt;'>Centered P5</span></td><td style='width:25%;height:75px;text-align:center;vertical-align:top;padding:3px;border-top:1px solid rgb(0, 0, 0);border-right:1px solid rgb(0, 0, 0);border-left:1px solid rgb(0, 0, 0);border-bottom:4px double rgb(0, 0, 0);' align='left' valign='top'><span style='font-family:Arial;font-size:10pt;'>Top P3</span></td><td style='width:25%;height:75px;text-align:right;vertical-align:middle;margin:4px;padding:18px;border-top:1px solid rgb(0, 0, 0);border-right:1px solid rgb(0, 0, 0);border-left:1px solid rgb(0, 0, 0);border-bottom:4px double rgb(0, 0, 0);' align='left' valign='top' colspan='2'><span style='font-family:TimesNewRoman;font-size:10pt;'>Right P4</span></td></tr><tr style='height:50%;'><td style='width:25%;height:35px;text-align:left;vertical-align:top;padding:20px;border-top:4px none rgb(0, 0, 0);border-right:1px solid rgb(0, 0, 0);border-left:1px solid rgb(0, 0, 0);border-bottom:1px solid rgb(0, 0, 0);' align='left' valign='top'><span style='font-family:Verdana;font-size:10pt;'>P20</span></td><td style='width:25%;height:35px;text-align:left;vertical-align:top;padding:2px;border-top:4px none rgb(0, 0, 0);border-right:1px solid rgb(0, 0, 0);border-left:1px solid rgb(0, 0, 0);border-bottom:1px solid rgb(0, 0, 0);' align='left' valign='top'>P2</td><td style='width:25%;height:35px;text-align:left;vertical-align:top;border-top:4px none rgb(0, 0, 0);border-right:1px solid rgb(0, 0, 0);border-left:1px solid rgb(0, 0, 0);border-bottom:1px solid rgb(0, 0, 0);' align='left' valign='top'> </td><td style='width:25%;height:35px;text-align:left;vertical-align:top;border-top:4px none rgb(0, 0, 0);border-right:1px solid rgb(0, 0, 0);border-left:1px solid rgb(0, 0, 0);border-bottom:1px solid rgb(0, 0, 0);' align='left' valign='top'> </td></tr></tbody></table>

 

In Kendo, this table is formatted correctly like the attached image KendoTable.png, in WPF it looks like the attached image WPFTable.png where the center double border is gone and the heights are lost.

Thanks, Bob

0
Accepted
Georgi
Telerik team
answered on 03 Jan 2020, 06:21 PM

Hi Bob,

Thank you for sharing the sample HTML. It helped me to reproduce the issues you are currently encountering.

The borders disappear from the document due to unsupported shorthand declaration of the properties. We have already logged a request to introduce support for this type of declarations and you can vote for its implementation as well as follow the public feedback item to receive emails when its status changes: Extend the support for CSS shorthand properties applied to table and table cell borders.

What I can suggest as a workaround here is to preprocess the HTML and ensure that the properties are applied using a declaration similar to border: 1px solid rgb(0, 0, 0);.

After taking a look at the HTML you have provided, I noticed that the cell height property is not taken into account when imported. We have logged this in our feedback portal: Add support for table cell height CSS property. As a possible workaround, you can apply the height property of the table row.

In appreciation for pointing out this to our attention, I have increased your Telerik points.

Regards,
Georgi
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
RichTextBox
Asked by
Bob
Top achievements
Rank 2
Iron
Iron
Veteran
Answers by
Georgi
Telerik team
Bob
Top achievements
Rank 2
Iron
Iron
Veteran
Share this question
or