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:
- Table, row, and cell heights are not maintained. All rows and cells become the same height.
- 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).
- 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
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
Rank 3
Iron
Iron
Veteran
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
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