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

Showing a Loading Spinner When Exporting Grid Data to Excel


ProductProgress® Kendo UI for Angular Grid


I want to add a loading spinner to indicate that the file is being exported. Is there an event to hide the spinner that is triggered after the file is successfully downloaded?


Currently, the Kendo UI for Angular Grid does not expose an event to track when a file has been downloaded.

The processing of the Excel file is done by the toDataUrl() function which is called under the hood. You can display a loading spinner for the time needed by the toDataUrl() function as it causes the greatest part of the delay while exporting large data set. For more information on how to generate an Excel file by calling the toDataUrl() method, refer to the article on saving files on the server.

  1. Show the loading indicator on the click event of the Excel Export button.
  2. Handle the built-in excelExport event of the Grid.
  3. Hide the loading indicator outside the Angular zone.
  4. Export the data.
    onExportClick() {
        this.loading = true;

    onExcelExport(e: ExcelExportEvent): void {
        e.preventDefault(); => {
            toDataURL(e.workbook).then((dataURL: string) => {
       => this.loading = false);

                saveAs(dataURL, this.fileName, {
                    forceProxy: this.forceProxy,
                    proxyURL: this.proxyURL

The following example demonstrates how to toggle a loading indicator by implementing the suggested approach.

View Source
Change Theme:

In this article

Not finding the help you need?