You can show/ hide spinner component while exporting the grid using showSpinner
/ hideSpinner
methods. You can use toolbarClick
event to show spinner before exporting and hide a spinner in the pdfExportComplete
or excelExportComplete
event after the exporting.
In the toolbarClick
event, based on the parameter args.item.id
as Grid_pdfexport
or Grid_excelexport
we can call the showSpinner
method from grid instance.
In the pdfExportComplete
or excelExportComplete
event, We can call the hideSpinner
method.
In the below demo, we have rendered the default spinner component when exporting the grid.
import { Grid, Page, Toolbar, PdfExport, ExcelExport } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
Grid.Inject(Page, Toolbar, PdfExport, ExcelExport);
let grid: Grid = new Grid({
dataSource: data,
allowPaging: true,
allowPdfExport: true,
allowExcelExport: true,
toolbar: ['PdfExport', 'ExcelExport'],
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, type: 'number' },
{ field: 'CustomerID', width: 140, headerText: 'Customer ID', visible: false },
{ field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 120, format: 'C' },
{ field: 'ShipCity', headerText: 'ShipCity', textAlign: 'Right', width: 140 }
],
height: 230
});
grid.appendTo('#Grid');
grid.toolbarClick = (args: Object) => {
if (args['item'].id === 'Grid_pdfexport') {
grid.showSpinner();
grid.pdfExport();
}
if (args['item'].id === 'Grid_excelexport') {
grid.showSpinner();
grid.excelExport();
}
}
grid.pdfExportComplete = () => {
grid.hideSpinner();
}
grid.excelExportComplete = () => {
grid.hideSpinner();
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
.e-row[aria-selected="true"] .e-customizedExpandcell {
background-color: #e0e0e0;
}
.e-grid.e-gridhover tr[role='row']:hover {
background-color: #eee;
}
.e-expand::before {
content: '\e5b8';
}
</style>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Grid'></div>
</div>
</body>
</html>