Displaying Loading Indicator when Exporting Hidden Grid to PDF

Environment

Product

Progress® Kendo UI for Angular Grid

Description

How can I display a loading indicator while exporting a hidden Grid to a PDF document?

Solution

You can export a hidden Grid when the PDF needs to contain different data from the one rendered on the page. When you export a hidden Grid to PDF, the built-in loading indicator is not visible.

To display a loading indicator over the visible Grid:

1. Create a custom button that will export the hidden Grid.

2. In the click handler, provide a reference to the Grid that needs to be exported and display the loading indicator.

   ts

   public exportToPDF(grid: GridComponent): void {
     this.loading = true;
     // ...
   }

3. Call the saveAsPDF method of the provided Grid instance.

   • To improve the performance, use the method outside of the Angular NgZone.
   • To hide the loading indicator, add a setTimeout delay.
   ts

     this.zone.runOutsideAngular(() =>
       setTimeout(() => {
         grid.saveAsPDF();
         this.loading = false;
       })
     );

The following example demonstrates the suggested implementation in action.

Change Theme

Theme

Loading ...