Showing a Loading Spinner When Exporting Grid Data to Excel

Environment

Description

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?

Solution

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.

Copy Code    onExportClick() {
        this.loading = true;
    }

    onExcelExport(e: ExcelExportEvent): void {
        e.preventDefault();
        this.zone.runOutsideAngular(() => {
            toDataURL(e.workbook).then((dataURL: string) => {
                this.zone.run(() => 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.