New to Kendo UI for Angular? Start a free 30-day trial

Displaying Loading Indicator when Exporting Hidden Grid to PDF


ProductProgress® Kendo UI for Angular Grid


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


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.

    public exportToPDF(grid: GridComponent): void {
      this.loading = true;
      // ...
  3. Call the saveAsPDF method of the provided Grid instance. =>
        setTimeout(() => {
          this.loading = false;

The following example demonstrates the suggested implementation in action.

View Source
Change Theme:

In this article

Not finding the help you need?