Showing a Loading Spinner When Exporting Grid Data to Excel
Environment
Product | Progress® Kendo UI for Angular Grid |
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.
- Show the loading indicator on the
click
event of the Excel Export button. - Handle the built-in
excelExport
event of the Grid. - Hide the loading indicator outside the Angular zone.
- Export the data.
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.