I have a grid where we need to ellipsize content being displayed. (Mobile devices are important) This means each row has a fixed height and the grid works well. The trade-off is that some columns do not show all the data (names of business entities and clients) for instance a <td> item might show "A long busines..." instead of "A long business name 01" or "A long business name 02".
The grid provides the facility to export to Excel and to PDF. For the PDf export I change the css markup (in an onPDFExport event) so that the text is fully displayed. This causes rows which has previously ellipsized/truncated text to flow over to a second line and the row becomes double the height. The PDF export now breaks as the calculation of the number of rows that fit on the page appears to have been made before the onPDFExport event fires. If I had 20 single height rows fitting on a page and now have the first 5 of those rows becoming double the height, only the first 15 items now fit on the page and items 16 to 20 get "lost" at the end of page 1. page 2 then starts at item 21.
Does anybody know how I can get the calculations done after I make my CSS change but before the export? I thought of changing the paperSize before the CSS change to let's say A3 and then go to A4 after the change but I do not know how I can do this in a javascript function.
4 Answers, 1 is accepted
You can apply CSS changes to the PDF document only without modifying the Kendo UI grid by using the k-pdf-export class which is applied to every element in the export. you can read more about it at:
https://docs.telerik.com/kendo-ui/framework/drawing/drawing-dom#the-k-pdf-export-class
We have a knowledge base article which shows how to modify column widths during the PDF Export only (using just CSS rules) that you may find useful:
https://docs.telerik.com/kendo-ui/knowledge-base/grid-pdf-export-change-column-widths
Have a look and let me know if you need additional help with your specific scenario. I would be glad to assist.
Kind Regards,
Alex Hajigeorgieva
Progress Telerik
Rank 1
Hi Alex and thanks for the reply.
Using CSS to effect the change is exactly what I am doing.
My CSS for the grid which affects the display on the browser page is shown below:
.k-grid td {
height:20px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
My CSS for the PDF export is as follows:
.k-pdf-export .k-grid td {
height: inherit;
white-space: inherit;
text-overflow: inherit;
overflow: inherit;
}
As you can see this basically allows for the full text to be rendered in the PDF while the on-screen version uses ellipses to shorten the text and force the on-screen grid to always use a 'single line' (or technically the same height per row) for each row in the grid. The PDF rows however differ in height depending on the length of the text e.g.
On Screen:
+-----------------------------------------------+---------------------------+
| Column 1 | Column 2 |
+-----------------------------------------------+---------------------------+
| Some long text that does not fit i... | Row 1 |
+-----------------------------------------------+---------------------------+
| Shorter text | Row 2 |
+-----------------------------------------------+---------------------------+
....
+-----------------------------------------------+---------------------------+
| Some long text that does not fit i... | Row 19 |
+-----------------------------------------------+---------------------------+
| Shorter text | Row 20 |
+-----------------------------------------------+---------------------------+
...
When I view this on screen I can see all the rows of course (in my particular case anyway because I have paging disabled on screen).
If all my rows have short text in column 1 paging is always correct in the PDF. However, if I have any rows that look like row 1 with longer text, my PDF looks like this:
+-----------------------------------------------+---------------------------+
| Column 1 | Column 2 |
+-----------------------------------------------+---------------------------+
| Some long text that does not fit in | Row 1 |
| a single line | |
+-----------------------------------------------+---------------------------+
| Shorter text | Row 2 |
+-----------------------------------------------+---------------------------+
...
+-----------------------------------------------+---------------------------+
| Some long text that does not fit in | Row 13 |
| a single line | |
<end page 1>
<new page>
+-----------------------------------------------+---------------------------+
| Some long text that does not fit in | Row 21 |
| a single line | |
+-----------------------------------------------+---------------------------+
| Shorter text | Row 22 |
+-----------------------------------------------+---------------------------+
In my PDF therefore, because every odd numberd row (in the example) has a double height to accommodate the text (all achieved by the CSS) only the first 11 data rows fit - 7 double height data rows (rows 1, 3, 5, 7, 9, 11, 13) and 6 single height data row (rows 2, 4, 6, 8, 10, 12). The second page starts with data row 21 as it does when all row heights are the same.
So the CSS is doing its work just fine. However, whether I use the pdf-export specific CSS or not, I always get page 2 to start at data row 21. When I have no export specific CSS at all that is correct behaviour. When I use the export specific CSS I would expect the grid to realise it cannot fit the same amount of data on the page anymore. It is as if the grid calulates the page breaks based on the on screen CSS instead of the pdf export CSS. And that makes no sense because you would think all kinds of other things can go wrong during the eport then; BUT that is the behaviour I am getting. Page breaks are calculated in my case as if the export specific CSS is not there, even though I can see the effects of the CSS in the PDF file that is produced.
Thank you for the concise explanations of the scenario specifics.
I believe the reason you are seeing this behaviour is that the .k-pdf-export class gets applied before each individual page is exported. For multipage documents, it is better to use the kendo-pdf-document element instead:
https://docs.telerik.com/kendo-ui/framework/drawing/drawing-dom#the-kendo-pdf-document-element
.k-grid td { height:20px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} .k-pdf-export .k-grid td { height: inherit; white-space: inherit; text-overflow: inherit; overflow: inherit;}I have created a runnable example for your convenience:
https://dojo.telerik.com/@bubblemaster/UQOcIs/2
Let me know if you need more help.
Kind Regards,
Alex Hajigeorgieva
Progress Telerik
Rank 1