Export a Grid With Kendo PDF

[Rob]

I'm trying to export an entire page with the Kendo Angular PDF, this works fine except when I add a Kendo Angular Grid on to the page. I'm seeing issues where rows are missing and there is extra blank space on some of the pages.

Here is a sample with the behavior. https://stackblitz.com/edit/angular-qkj4p7 Notice that it skips from id 11 to 19 between the first and second page and that there is a large margin at the bottom of the pages.

It seems like part of the issue is that it picks where to do page breaks based upon the current DOM, instead of the copied DOM after the k-pdf-export style has been applied. Is there a way to get the grid to work properly with the pdf component?

[Dimiter Topalov]

Hi Rob,

The reason for the undesired PDF layout is the initial height, set to the Grid. You can resolve this issue by overwriting the Grid height for the PDF document only, e.g.:

.k-grid {
    font-family: "DejaVu Sans", "Arial", sans-serif;
    height: 430px; /* Default Grid height for the web page */
}

.k-pdf-export .k-grid.k-widget {
  display: block;
  height: auto; /* Grid height auto for the PDF document only */
}

https://stackblitz.com/edit/angular-qkj4p7-vlxu3f?file=app%2Fpdf-styles.css

Further details about applying styles to the PDF document only are available in the following section of our documentation:

https://www.telerik.com/kendo-angular-ui-develop/components/pdfexport/content-styling/

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Rob]

Hi Dimiter,

Thanks for your response.  That fixed the initial issue I was having with the sample.  I tried having a section that was only visible in the PDF and that pushed the grid off the page.  See updated: https://stackblitz.com/edit/angular-qkj4p7?file=app%2Fpdf-styles.css

 

Thanks,

Rob

[Dimiter Topalov]

Hello Rob,

Indeed the additional content, visible in the PDF only pushes down the Grid after the calculations of its dimensions have occurred. You can either force a page break in the Grid in the right spot via the forcePageBreak property and adding a custom class to the respective Grid row:

https://stackblitz.com/edit/angular-qkj4p7-jypvt8?file=app/app.component.ts

... or depending on the scenario and the desired layout, use the PDF page templates to provide custom headers and/or footers with the desired content (you can also render them on some page(s) only conditionally via *ngIf and conditional logic based on the pageNum variable, available within the template):

https://www.telerik.com/kendo-angular-ui/components/pdfexport/multi-page-content/#toc-page-templates

Regards,
Dimiter Topalov
Progress Telerik

[Rob]

Hi Dimiter,

Having to manually force a page break on a specific row is a hack solution.  I would like to be able to use kendo-pdf on a lot of different pages on my site to be able to export them to pdf.  I don't want to hard-code in page breaks.  There will be some info on the top that shouldn't appear in the pdf and vise versa.  There's potentially even multiple grids on a page. 

 

The page templates are going to have the same issue, they don't adjust where the grid is split.

 

I don't understand why your components don't work together.  Why does it calculate the page breaks for a grid and then apply the style that alters the placement of items?  That doesn't seem to make sense.

Thanks,

Rob

[Dimiter Topalov]

Hi Rob,

Indeed, the suggested workaround is essentially a hack, but I am afraid it is currently the only option to circumvent the described undesired layout of the exported document when an element above the Grid is present in the PDF only, but not on the page.

That said, the current behavior is indeed not the expected one, and this is why I logged an issue to our public GitHub repository that you can track here:

https://github.com/telerik/kendo-angular/issues/1878

I apologize for all inconvenience caused, and I also updated your Telerik points for bringing this problem to our attention.

Regards,
Dimiter Topalov
Progress Telerik

[Rob]

Hi Dimiter,

Is there any kind of timeline for when this would be fixed?  Or what's the usual turn around for something like this?

 

Thanks,

Rob

[Dimiter Topalov]

Hello Rob,

Typically we are trying to address all issues in a timely manner, but they are still prioritized based on both the severity and estimated impact, and the date of logging the issue. I cannot commit to a specific timeline, but one of our developers has already assigned the case, and will look into it in the upcoming days.

Depending on the complexity of the required implementation, and the other ongoing tasks, the fix will take some time, and after it is done and tested, a development version of the package will be released where the fix will be first available before it is also included in the next official version of the PDF Export package.

Regards,
Dimiter Topalov
Progress Telerik