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.
ej.grids.Grid.Inject(ej.grids.Page, ej.grids.PdfExport, ej.grids.ExcelExport, ej.grids.Toolbar);
var grid = new ej.grids.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 },
{ field: 'ShipCity', headerText: 'ShipCity', textAlign: 'Right', width: 140 }
],
height: 260
});
grid.appendTo('#Grid');
grid.toolbarClick = function(args){
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">
<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>
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="Grid"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>