PDF & Image export for both grid and charts

[Naveed]

We are using kendo angular library in our application. We need to create pdf and image files of the HTML page. The page contains charts and grid something similar to https://demos.telerik.com/kendo-ui/pdf-export/index.The grid can have multiple pages and child grids as well. The queries are related to this.

1. Can exportImage work on grid with pagination and downloads multiple images corresponding to each grid pages? Like its generated for pdf in this example -  https://docs.telerik.com/kendo-ui/knowledge-base/all-page-content-with-all-pages.
2. Can child grid data be exported in pdf and images?
3. In case of horizontal scroll on grid, can it be adjusted to be accommodated in the export?
4. If the grid can be exported along with its parent container for multiple grid pages ?

[Svet]

Hi Naveed,

We will need more information about your current Kendo UI subscription. I have therefore generated a sales lead, and you can expect our licensing specialists to contact you, or if you have any questions about obtaining a license for Kendo UI for Angular, feel free to open a separate thread.

If your company has already purchased a license from another account, please contact the license holder and provide them with this link so they can add you as a licensed developer. If you need to purchase or renew your subscription, you can reach out to our product specialists on [e-mail]. They will gladly assist you with finding both the answers to your questions and a subscription that best fits your needs.

Once your account is associated with an active subscription, you can benefit from the full benefits of the respective support plan.

About the questions:

1. In general, the PDF Component exports the page as it is visible in the browser. What could be done in order to export all Grid pages to the PDF is to dynamically display a Grid without pages and hide the Grid with pages when exporting. That can be achieve using the Angular *ngIf directive. Another option would be to have both Grids rendered in the page, but use some CSS in order to display just the Grid with paging and hide the other one and then use the following approach in order to hide the Grid with paging from the exported PDF file:

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

2. The PDf Export should export the Grid as it is displayed in the browser, thus yes, if you have hierarchical Grids then these should be exported.

3. There isn't an option available that would allow to change the scale of a single part of the exported PDF file. Thus, what could be done in that case is similar to what has been described in point 1. The content that should be exported could be hidden to the user and only when the export button is clicked the desired Grid should be displayed.

4. I am not sure that I understand this question. But it seems that it can be handled in a similar way as described in point 1.

Last but not least in order to export an image the PDF export() function can be called and then the returned promise should be handled and processed by the exportImage() method of the Drawing API and the saveAs() method of the  FileSaver in the following way:

import { exportImage, Group } from '@progress/kendo-drawing'
import { saveAs } from '@progress/kendo-file-saver';
... 

 click(pdf){
    pdf.export().then((group: Group)=>{
      exportImage(group).then((group)=>{
        saveAs(group, 'data.png');
      })
    })
  }

I hope this helps.

Please open a separate private support thread so that we can further discuss the details of the suggested implementations in case further assistance is required for this case. Thank you.

Regards,
Svetlin
Progress Telerik