Export page + full grid to PDF

[Scott Buchanan]

I watched a demo on using Kendo UI for PDF export at http://www.telerik.com/campaigns/kendo-ui/devchat-jul18

The demo showed very good rendering of the page contents and then of a grid (using the toolbar item).  Alas, they did not show a combined export where a page contains many elements including a grid.

I am aware of the pageTemplate, but we need to export the page header, text, selections of drop lists, etc. along all rows in the grid.  We do this now with another tool that has very good fidelity but poor performance, especially on Azure where we were required to create a separate service for it (see attached).

We also use Telerik Reporting, so I know you have a great PDF engine.  My question is, is there a solution to rendering the page HTML and all of the grid?

Best,
Scott

[Alex Hajigeorgieva]

Hi Scott,

We have an example which accomplishes PDF export of all pages of a Kendo UI Grid with other content on the page. I have added page template and scaling to it:

http://dojo.telerik.com/@bubblemaster/OtoMe

Let me know what you think.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Scott Buchanan]

Alex,

Thank you for the links.  I had run across that demo, but it is not very satisfying.  For example, the page has a DIV (id="header") with an H1 that is not rendered.  I added some P and LI elements and none of it was included in the PDF.  I did notice that the DIV and H1 do not show up when running the dojo unless you go to full screen, at which time nothing else is rendered and the Export button is non-functional.

Finally, all the extra page breaks would prevent this technique from being useful, even if the off-grid content was correctly rendered in the browser and PDF.

Best,
Scott

[Alex Hajigeorgieva]

Hello Scott,

Thank you for the feedback. Perhaps we could look into improving the demo. What do you think would be beneficial to see?

The reason for the <h1> not being visible in the exported file is because, in the article, only the two charts and the grid are drawn with the selector. I have added some more content to the page and I am managing to successfully export it:

http://dojo.telerik.com/@bubblemaster/AfibO

Regarding the missing content in fullscreen, the reason is that we have recently migrated the Dojo and content is served over HTTPS which causes errors because the scripts had HTTP prefix causing mixed content. I apologize for the inconvenience.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Artur]

Hi Alex,

I'm just checking this solution and from what I've noticed the export unfortunately doesn't adjust to A4 size and tries to take the size from the current window, if I enlarge it or use a larger monitor and don't reduce it the text splits and goes off the page, is there any way to do this?

Kind Regards,
Artur

[Nikolay]

Hi Artur,

Could you please share the requirements so I can advise accordingly? Do you need to export multiple different components or just Grids to A4 format?

Regards,
Nikolay

[Artur]

Hi Nikolay,

With the A4 format it looks like it is already working.
But i have more questions. Added my final look in attachment (data comes from your demos).
for this moment I created something like this: https://dojo.telerik.com/uFalubOh/4. I do not know how to add a footer on each page and whether it is possible to divide the current grid in such a way as in the picture. That is, pulling the value of what is Country above the grid (Country: <Country value> and the grid is to be filtered to that country and do so for each value from Country?

Regards,
Artur

[Neli]

Hi Artur,

Please find below an article from our documentation that demonstrates how Header and Footer can be added to the exported PDF:

- https://docs.telerik.com/kendo-ui/framework/pdf/page-templates

Regarding deviding the Grid, if you need to devide a single Grid in multiple smaller Grids, I am afraid this is not possible. You can create a single Grid and display the entire data in it or split the data and initialize multiple Grids.

Regards,

Neli

[Sandeep]

Hi Alex Hajigeorgieva, 

 

https://docs.telerik.com/kendo-ui/knowledge-base/all-page-content-with-all-pages?_ga=2.166083454.1398203538.1594826559-1685699332.1584375054

I am looking into something very similar, except that my kendoGrid dataSource has serverPaging true, i tried using this example, everything works fine except that only first page of the Grid is showing up in the pdf. 

How to get all grid pages into the pdf when grid has serverPaging true ?

Also on the side note: 

I have this grid with serverPaging true, and i am dynamically exporting it to PDF, Excel and CSV using proxyURL and forceProxy true. Excel and CSV versions have no issue and multi page data loads fine, but the PDF version grid with multi page is not exporting PDF correctly, it is duplicating first page. For example if this grid has 2 Pages, each page with 25 rows, the pdf export is showing 2 pages but both pages have grid's first page data, where as excel and csv proxyURL export shows all 50 rows correctly.

Thanks,

Sandeep Chimmula

[Alex Hajigeorgieva]

Hello, Sandeep,

I tested the example using a grid with server paging: true, and it works well in my test, see it here:

https://dojo.telerik.com/@bubblemaster/eRUvEJUX

Can you verify the the grid itself has the following setting:

pdf:{
  allPages:true
},

For the secondary question, the configuration proxyURL just forwards the generated file if the browser does not support saving files locally or if forceProxy is used. In other words, you should get the same results with or without a proxy. 

To be able to assist you further, can you modify the example I sent to you to demonstrate the duplication of pages or send us another one for inspection?

Kind Regards,
Alex Hajigeorgieva
Progress Telerik