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

Export page + full grid to PDF

5 Answers 675 Views
Drawing API
This is a migrated thread and some comments may be shown as answers.
Scott Buchanan
Top achievements
Rank 1
Scott Buchanan asked on 28 Jul 2017, 05:34 PM

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

5 Answers, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 01 Aug 2017, 10:21 AM
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
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
Scott Buchanan
Top achievements
Rank 1
answered on 01 Aug 2017, 05:15 PM

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

0
Alex Hajigeorgieva
Telerik team
answered on 03 Aug 2017, 03:10 PM
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
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.
Artur
Top achievements
Rank 1
commented on 08 Apr 2024, 11:39 AM

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
Telerik team
commented on 10 Apr 2024, 07:18 AM

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
Top achievements
Rank 1
commented on 10 Apr 2024, 10:24 AM

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
Telerik team
commented on 12 Apr 2024, 08:09 AM

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

0
Sandeep
Top achievements
Rank 1
answered on 15 Jul 2020, 10:06 PM

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

0
Alex Hajigeorgieva
Telerik team
answered on 20 Jul 2020, 07:34 AM

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

Tags
Drawing API
Asked by
Scott Buchanan
Top achievements
Rank 1
Answers by
Alex Hajigeorgieva
Telerik team
Scott Buchanan
Top achievements
Rank 1
Sandeep
Top achievements
Rank 1
Share this question
or