This is a migrated thread and some comments may be shown as answers.
Html to PDF - table does not have borders
3 Answers 3 Views
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 1
Daniel asked on 11 Feb 2021, 02:04 PM

Hello,

I need to add HTML content to my RadFlowDocument and then export it to PDF. 

The problem is when the HTML text contains a table with borders. Then the borders are not visible in the exported PDF.

C# code - import HTML text:

01.InsertDocumentOptions options = new InsertDocumentOptions
02.{
03.    ConflictingStylesResolutionMode = ConflictingStylesResolutionMode.UseTargetStyle,
04.    InsertLastParagraphMarker = false
05.};
06.var firstPageText = myPdfModel.FirstPageText.ToString();
07.if (firstPageText != null)
08.{
09.    editor.InsertDocument(htmlFormatProvider.Import(firstPageText), options);
10.}

I use Kendo Editor to obtain HTML code. The generated HTML is:

01.<table>
02.   <tbody>
03.      <tr style="height:50%;">
04.         <td style="width:50%;border-width:2px;border-style:solid;border-color:#cc3333;">a</td>
05.         <td style="width:50%;border-width:2px;border-style:solid;border-color:#cc3333;">b</td>
06.      </tr>
07.      <tr style="height:50%;">
08.         <td style="width:50%;border-width:2px;border-style:solid;border-color:#cc3333;">c</td>
09.         <td style="width:50%;border-width:2px;border-style:solid;border-color:#cc3333;">d</td>
10.      </tr>
11.   </tbody>
12.</table>

In Kendo Editor the table looks fine (see screenshot) but in PDF there are no borders.

Is it a bug or do I have to set some options somewhere?

 

If it is a bug, suggest me some workaround please.

 

Best Regards,

Daniel

3 Answers, 1 is accepted

Sort by
0
Daniel
Top achievements
Rank 1
answered on 11 Feb 2021, 02:06 PM
I would also like to note that when I set for example the background color, so it is displayed correctly in PDF...
0
Accepted
Martin
Telerik team
answered on 12 Feb 2021, 01:07 PM

Hi Daniel,

Thank you for the feedback and for sharing the code snippets with us.

I am sorry to hear you are experiencing issues due to inconsistency between shorthand and longhand properties. We have an item logged in our backlog to unify their support: WordsProcessing: Unify the support of CSS shorthand/longhand properties. You can cast your vote for the implementation as well as subscribe to the task by clicking the Follow button so you can receive updates when its status changes.

Until this item is developed I could suggest using the shorthand property for setting borders, or in this case:

<table>
    <tbody>
        <tr style="height:50%;">
            <td style="width:50%;border: 2px solid #cc3333;">a</td>
            <td style="width:50%;border: 2px solid #cc3333;">b</td>
        </tr>
        <tr style="height:50%;">
            <td style="width:50%;border: 2px solid #cc3333;">c</td>
            <td style="width:50%;border: 2px solid #cc3333;">d</td>
        </tr>
    </tbody>
</table>

Regards,
Martin
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Daniel
Top achievements
Rank 1
answered on 12 Feb 2021, 01:27 PM
Ok, thank you for the quick reply.
Asked by
Daniel
Top achievements
Rank 1
Answers by
Daniel
Top achievements
Rank 1
Martin
Telerik team
Share this question
or