PDF Multiple page grid with page breaks

5 posts, 2 answers
  1. Miguel
    Miguel avatar
    22 posts
    Member since:
    Oct 2013

    Posted 09 Jun 2017 Link to this post

    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?

  2. Answer
    Stefan
    Admin
    Stefan avatar
    2880 posts

    Posted 13 Jun 2017 Link to this post

    Hello Miguel,

    When the manual split content is used, the specific class has to be added to the Grid td 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 visualization (charts) and form elements.
  3. Miguel
    Miguel avatar
    22 posts
    Member since:
    Oct 2013

    Posted 15 Jun 2017 in reply to Stefan Link to this post

    Do the breaks manually, makes sense.

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

  4. Answer
    Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 19 Jun 2017 Link to this post

    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.
  5. Miguel
    Miguel avatar
    22 posts
    Member since:
    Oct 2013

    Posted 21 Jun 2017 in reply to Konstantin Dikov Link to this post

    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!
Back to Top