Available in the Full Version
Data Grid - Customizing Grid Excel Export
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 show how you can customize how the Infragistics Ignite UI for jQuery data grid is exported to Excel using the various exporting events supplied.
Here we show customizing text, formatting, and adding a hyperlink.
Code View
Copy to Clipboard
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Customizing Grid Excel Export</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;
}
</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, VendorWebsite: 'http://infragistics.com/', },
{ 'ProductID': 2, 'Name': 'Quis quibusdam qui.', 'ProductNumber': 5907101619, "InStock": false, "Quantity": 0, VendorWebsite: 'http://infragistics.com/', },
{ 'ProductID': 3, 'Name': 'Sint laudantium et.', 'ProductNumber': 3057803521, "InStock": true, "Quantity": 26, VendorWebsite: 'http://infragistics.com/' },
{ 'ProductID': 17, 'Name': 'Tempore eos.', 'ProductNumber': 3576608248, "InStock": true, "Quantity": 8, VendorWebsite: 'http://infragistics.com/' },
{ 'ProductID': 18, 'Name': 'Maiores aut ducimus.', 'ProductNumber': 7079645227, "InStock": true, "Quantity": 62, VendorWebsite: 'http://infragistics.com/' },
{ 'ProductID': 19, 'Name': 'Vel inventore.', 'ProductNumber': 191484500, "InStock": true, "Quantity": 18, VendorWebsite: 'http://infragistics.com/' },
{ 'ProductID': 20, 'Name': 'Ut molestiae.', 'ProductNumber': 2994899561, "InStock": false, "Quantity": 0, VendorWebsite: 'http://infragistics.com/' },
{ 'ProductID': 31, 'Name': 'Nihil magnam aut ut.', 'ProductNumber': 5652753011, "InStock": true, "Quantity": 41, VendorWebsite: 'http://infragistics.com/' },
{ 'ProductID': 32, 'Name': 'Repellendus dolorum.', 'ProductNumber': 8807902556, "InStock": true, "Quantity": 10, VendorWebsite: 'http://infragistics.com/' },
{ 'ProductID': 43, 'Name': 'Odit ut quo minus.', 'ProductNumber': 1083007847, "InStock": false, "Quantity": 0, VendorWebsite: 'http://infragistics.com/' }
];
$("#grid").igGrid({
autoGenerateColumns: false,
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" },
{ headerText: "Vendor website", key: "VendorWebsite", width: "220px", template: '<a href="${VendorWebsite}">${VendorWebsite}</a>' }
],
dataSource: data,
width: "100%",
primaryKey: "ProductID",
features: [
{
name: "Filtering"
},
{
name: "Sorting",
},
{
name: "Paging",
type: "local",
pageSize: 10
}]
});
$("#exportButton").on("click", function () {
$.ig.GridExcelExporter.exportGrid($("#grid"), {
fileName: "igGrid",
gridFeatureOptions: { "sorting": "applied", "filtering": "applied", paging: "currentPage", "summaries": "applied" },
},
{
headerCellExported: function (e, args) {
if (args.columnKey == "Quantity") {
args.xlRow.setCellValue(args.columnIndex, "Available Quantity");
}
},
cellExporting: function (e, args) {
if (args.columnKey == "Quantity" && args.cellValue > 15) {
args.xlRow.getCellFormat(args.columnIndex).font().bold(1);
}
},
cellExported: function (e, args) {
if (args.xlRow.index() == 0) {
return;
}
if (args.columnKey == 'VendorWebsite') {
var xlRow = args.xlRow;
xlRow.cells(args.columnIndex).applyFormula('=HYPERLINK("' + args.cellValue + '")');
}
},
rowExported: function (e, args) {
if (args.xlRow.index() == args.grid.igGrid("allRows").length - 1) {
$('<div style="font-size:20px;">Last row exported, download starts!!</div>').insertBefore('#exportButton').delay(1000).fadeOut();
}
}
});
});
});
</script>
</body>
</html>