Available in the Full Version
Data Grid - Exporting Grid to Excel with Progress Indicator
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
This sample shows how to show and hide a progress indicator while exporting the Infragistics Ignite UI for jQuery data grid to Excel.
Code View
Copy to Clipboard
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/structure/infragistics.css" rel="stylesheet" />
<!--Required scripts-->
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- External files for exporting -->
<script src="/js/external/FileSaver.js"></script>
<script src="/js/external/Blob.js"></script>
<script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.core.js"></script>
<script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.lob.js"></script>
<script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.excel-bundled.js"></script>
<script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/modules/infragistics.gridexcelexporter.js"></script>
<style>
.right {
float: right;
}
#exportButton {
float: left;
}
.exporting-indicator {
position: absolute;
background-color: rgba(181, 181, 181, 0.9);
top: 0;
left: 0;
z-index: 100000;
text-align: center;
vertical-align: middle;
}
.exporting-indicator:after {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.exporting-text {
font-size: 46px;
font-weight: bold;
vertical-align: middle;
}
</style>
</head>
<body>
<table id="grid"></table><br />
<input type="button" id="exportButton" value="Export" />
<script>
$(function () {
var data = [
{ 'ProductID': 1, 'Name': 'Omnis ut illum nisi.', 'ProductNumber': 2973311236, "InStock": true, "Quantity": 56 },
{ 'ProductID': 2, 'Name': 'Quis quibusdam qui.', 'ProductNumber': 5907101619, "InStock": false, "Quantity": 0 },
{ 'ProductID': 3, 'Name': 'Sint laudantium et.', 'ProductNumber': 3057803521, "InStock": true, "Quantity": 26 },
{ 'ProductID': 17, 'Name': 'Tempore eos.', 'ProductNumber': 3576608248, "InStock": true, "Quantity": 8 },
{ 'ProductID': 18, 'Name': 'Maiores aut ducimus.', 'ProductNumber': 7079645227, "InStock": true, "Quantity": 62 },
{ 'ProductID': 19, 'Name': 'Vel inventore.', 'ProductNumber': 191484500, "InStock": true, "Quantity": 18 },
{ 'ProductID': 20, 'Name': 'Ut molestiae.', 'ProductNumber': 2994899561, "InStock": false, "Quantity": 0 },
{ 'ProductID': 31, 'Name': 'Nihil magnam aut ut.', 'ProductNumber': 5652753011, "InStock": true, "Quantity": 41 },
{ 'ProductID': 32, 'Name': 'Repellendus dolorum.', 'ProductNumber': 8807902556, "InStock": true, "Quantity": 10 },
{ 'ProductID': 43, 'Name': 'Odit ut quo minus.', 'ProductNumber': 1083007847, "InStock": false, "Quantity": 0 },
{ 'ProductID': 1, 'Name': 'Omnis ut illum nisi.', 'ProductNumber': 2973311236, "InStock": true, "Quantity": 56 },
{ 'ProductID': 2, 'Name': 'Quis quibusdam qui.', 'ProductNumber': 5907101619, "InStock": false, "Quantity": 0 },
{ 'ProductID': 3, 'Name': 'Sint laudantium et.', 'ProductNumber': 3057803521, "InStock": true, "Quantity": 26 },
{ 'ProductID': 17, 'Name': 'Tempore eos.', 'ProductNumber': 3576608248, "InStock": true, "Quantity": 8 },
{ 'ProductID': 18, 'Name': 'Maiores aut ducimus.', 'ProductNumber': 7079645227, "InStock": true, "Quantity": 62 },
{ 'ProductID': 19, 'Name': 'Vel inventore.', 'ProductNumber': 191484500, "InStock": true, "Quantity": 18 },
{ 'ProductID': 20, 'Name': 'Ut molestiae.', 'ProductNumber': 2994899561, "InStock": false, "Quantity": 0 },
{ 'ProductID': 31, 'Name': 'Nihil magnam aut ut.', 'ProductNumber': 5652753011, "InStock": true, "Quantity": 41 },
{ 'ProductID': 32, 'Name': 'Repellendus dolorum.', 'ProductNumber': 8807902556, "InStock": true, "Quantity": 10 },
{ 'ProductID': 43, 'Name': 'Odit ut quo minus.', 'ProductNumber': 1083007847, "InStock": false, "Quantity": 0 }
];
$("#grid").igGrid({
autoGenerateColumns: false,
width: "100%",
height: "350px",
columns: [
{ headerText: "Product ID", key: "ProductID", dataType: "number", width: "100px" },
{ headerText: "Product Name", key: "Name", dataType: "string", width: "250px" },
{ headerText: "Product Number", key: "ProductNumber", dataType: "number", width: "200px" },
{ headerText: "In Stock", key: "InStock", dataType: "bool", width: "150px" },
{ headerText: "Quantity", key: "Quantity", dataType: "number", width: "150px" }
],
dataSource: data
});
var exportingIndicator = $('<div>');
$('#exportButton').on('click', function () {
var gridExcelExporter = new $.ig.GridExcelExporter();
var $grid = $('#grid');
gridExcelExporter.exportGrid($grid, {
gridStyling: "applied",
}, {
exportStarting: function (e, args) {
showExportingIndicator(args.grid, exportingIndicator);
},
success: function () {
hideExportingIndicator(exportingIndicator);
},
});
});
});
function showExportingIndicator(grid, exportingIndicator) {
var $gridContainer = $('#' + grid.attr('id') + '_container');
exportingIndicator.css({
"width": $gridContainer.outerWidth(),
"height": $gridContainer.outerHeight()
}).html('<span class="exporting-text">Exporting...</span>');
exportingIndicator.addClass("exporting-indicator");
$gridContainer.append(exportingIndicator);
}
function hideExportingIndicator(exportingIndicator) {
exportingIndicator.remove();
}
</script>
</body>
</html>