KENDO-ANGULAR Export grid and chart in single pdf

[Chaitra]

I am working with the Kendo-angular. Need to export the grid and chart in single pdf. I found one example http://dojo.telerik.com/@tsvetomir/ubOhe it is with the jquery .
How I can achive the same thing with Kendo-Angular.
What if chart and grid in 2 different tabs and need to export both in single pdf
Any suggetion will be helpful. Thanks

[Dimiter Topalov]

Hi Chaitra,

You can utilize the PDFExport component and provide custom content (including a Chart, a Grid and any other necessary content):

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

For example, by adding a simple Chart to the example above, we can yield the following result:

https://plnkr.co/edit/66jcIOCLb4zjDZD9HqLJ?p=preview

I hope this helps.

As for the second question, can you please describe the scenario involving the Grid and Chart being in different tabs further? Are they in different Kendo UI for Angular TabStrip tabs and what is the specific setup and desired PDF output? Gaining a better understanding of the specific use case will help us provide the most suitable suggestion (if one is available). Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik

[Chaitra]

Hi Dimiter Topalov,

Thanks for Quick reply , Below is the scenario -
I have 2 tabs one is for grid and other tab will have multiple charts. Export button will be on grid tab . When I click on export button first it should render chart and then grid or vice versa.

Please check the below stackbliz link

https://stackblitz.com/edit/angular-8tdtwv?file=app%2Fapp.component.ts

I havnt added the export code yet, Can you check it once..

Thanks

[Chaitra]

Hi ,
When I tried exporting the pdf. It is exporting the tab structure. How can I export chart and grid together.

https://stackblitz.com/edit/angular-8tdtwv-hgbxtd?file=app/app.component.ts

Thanks

[Dimiter Topalov]

Hi Chaitra,

As only the content of the currently active TabStrip tab is available in the DOM, the described functionality is not supported by the PDFExport component. A possible approach is to render all content that needs to be exported in a hidden (but available in the DOM) container:

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

If you have the time, please submit a feature request to our UserVoice portal to help us estimate the customer demand for the desired functionality and consider providing such an opportunity as a built-in feature or creating a how-to article that demonstrates how to achieve this:

http://kendoui-feedback.telerik.com/forums/555517-kendo-ui-for-angular-feedback

Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik

[Chaitra]

Hi Dimiter Topalov,
I will submit a feature request also now, 

Currently I have tried the hidden-content but it is giving bbox error , can you check it once. Also what if I have a pagination in grid and I want complete grid what should I do such scenario.

https://stackblitz.com/edit/angular-8tdtwv-p6r75m?file=app/app.component.ts

 

Thanks

[Chaitra]

Hi Dimiter Topalov,

I have posted it for kendo-angular feedback page also http://kendoui-feedback.telerik.com/forums/555517-kendo-ui-for-angular-feedback/suggestions/35125789-creating-a-how-to-article-for-exporting-grid-and-c

 

Thanks

[Dimiter Topalov]

Hello Chaitra,

Thank you for submitting the feature request.

The observed JavaScript error is a StackBlitz-specific issue related to loading different versions of the Kendo Drawing package. The same code works as expected when loaded either in a Plunker or in a a standalone Angular application, e.g.:

https://plnkr.co/edit/Bst0RpRUluL3QBKn12jy?p=preview

We will investigate the StackBlitz setup issue further and will either fix it on our end, or log an issue with the StackBlitz team and expect a fix on their end.

As for exporting all Grid data when the Grid is pageable, this is available out-of-the-box when using the built-in Grid PDF export functionality:

https://www.telerik.com/kendo-angular-ui/components/grid/export/pdf-export/#toc-exporting-all-pages

... however when the Grid is a part of the content of a separate PDFExport component, we will need to apply a similar approach manually - load the whole Grid data without paging settings in the invisible container so that all Grid data gets exported.

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Chaitra]

Hi,

I have tried implementing same way, but one of the table I have 10 columns with horizontal scroll. While exporting it is squzing the column. What configuration I should add so that it will reduce the font-size and scale it for the page. If we use kendo grid export it is squizing the column size... How I can achieve same with pdf-export module.

 

Thanks

[Svet]

Hi Chaitra,

We can scale the content as demonstrated in the following article:
https://www.telerik.com/kendo-angular-ui/components/pdfexport/content-scaling/

I hope this helps.

I would also like to ask you to open separate threads for questions not directly related to each other. This will facilitate a better support history of your account and help us to provide a better support service in general. Thank you in advance.

Regards,
Svetlin
Progress Telerik

[Chaitra]

Hi, Thanks for the support. 

I will create seperate threads, next time onwords

Thanks

 

[Ajay]

Hi,

I am currently working with the KendoUI Angular TabStrip and the pdfExport functionality. I have a similar requirement where I need to work with the same functionality. My situation involves a TabStrip that consists of four tabs, and each of these tabs contains a graph from different components. When using the pdfExport feature, I've noticed that only the currently open tab can be exported to PDF. However, my goal is to export all four charts into a single PDF file.

I'd like to inquire whether this feature is supported by KendoUI. If it is supported, could you please guide me on how to achieve this functionality?

Hello Chaitra, if you've previously implemented something similar, could you kindly share the steps to accomplish this?

Thank you.

[Yanmario]

Hi Ajay,

The Kendo UI for Angular PDF Export allows to convert an HTML page to a PDF. However, it doesn't expose an API that allows merging two PDF files in one. For this purpose, some third-party library or custom implementation should be overtaken. I can suggest checking the following online article on this topic:

https://medium.com/nerd-for-tech/dynamically-create-and-merge-pdfs-in-angular-using-jspdf-and-pdf-lib-aa82ae35f1e3 

https://stackoverflow.com/questions/21478738/how-can-we-do-pdf-merging-using-javascript

Depending on the size of the files that need to be merged you may also consider a server-side solution such as RadPDFProcessing.

If merging the PDF's isn't required, the developer can trigger the PDF export for each tab by using the keepTabContent property that will render the content for each tab when the component initializes and then every component can trigger an export function. But that only will export single PDF files.

I hope this helps.

Regards,
Yanmario
Progress Telerik