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

PDF Multiple page grid with page breaks

4 Answers 1326 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Miguel
Top achievements
Rank 1
Miguel asked on 09 Jun 2017, 06:50 PM

Hi! I'm having issues with the PDF exporter.

Basically, I want a PDF in which the first page is a normal Kendo bar chart, and *starting* in the second page a multi page long grid with related data starts.

If I wrap both in a <div> and export that, it works fine. I get a multi page PDF, with the grid's repeated headers and so on. Chart takes half of the first page, grid takes the other half and a couple more pages. I'd like for the first page to be occupied only by the chart, and the grid pages starting after that.

Here is an example: http://dojo.telerik.com/iHeXo

It proceeds to export the chart in the first page, then it does a page break, exports the grid starting at the second page, but it stays there. It renders the grid as far as it can go in the second page but it wont render the remaining rows in more pages, so a lot of data ends up missing.

If you remove forcePageBreak in the export settings, it renders the grid in multiple pages just fine, but the first few rows are placed in the first page.

If I've understood the code correctly, in the splitElement function in kendo.drawing.drawDOM, it seems that the crawling logic checks if it should issue a page break on the element, but then if it does, it skips it without crawling it to see if it will require more space. That is, splitElement gets called for the <div id="multi-page-grid"> element, but it never crawls the grid's <table> element inside to divide it up in multiple groups.

Any ideas?

4 Answers, 1 is accepted

Sort by
0
Accepted
Stefan
Telerik team
answered on 13 Jun 2017, 08:51 AM
Hello Miguel,

When the manual split content is used, the specific class has to be added to the Grid elements as well in order to split them correctly.

Also, in order to split the Chart with the Grid, I can suggest adding a DIV element between the Chart and the Grid. I modify the example using the same logic as in our documentation:

http://docs.telerik.com/kendo-ui/framework/drawing/drawing-dom#configuration-Multi-Page

http://dojo.telerik.com/iHeXo/5

Regards,
Stefan
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
0
Miguel
Top achievements
Rank 1
answered on 15 Jun 2017, 12:13 PM

Do the breaks manually, makes sense.

What about the repeating headers by page? I lose that functionality by inserting breaks manually in the grid.

0
Accepted
Konstantin Dikov
Telerik team
answered on 19 Jun 2017, 11:40 AM
Hi Miguel,

You could take a look at the header and footer templates functionality for the manual page breaks:
Please let us know if any further assistance is needed on this matter.


Regards,
Konstantin Dikov
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Miguel
Top achievements
Rank 1
answered on 21 Jun 2017, 05:00 PM
After a bit of testing it seems the empty div with the page breaks was more than enough, and it preserves the grid's automatic paging with repeated headers on each page. Thanks!
Tags
Grid
Asked by
Miguel
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Miguel
Top achievements
Rank 1
Konstantin Dikov
Telerik team
Share this question
or