Available in the Full Version
Data Grid - Export Basic Grid to Excel
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.
Use this component on your page along with the igGrid, and with a few lines of code—boom!
You can export what users are looking at into an Excel file without any round-tripping to the server. This sample shows exporting a simple 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;
}
</style>
</head>
<body>
<table id="grid"></table><br />
<input type="button" id="exportButton" value="Export" />
<script>
$(function () {
$(function () {
var data = [
{ 'ProductID': 1, 'Name': 'Omnis ut illum nisi.', 'ProductNumber': '2973311236' },
{ 'ProductID': 2, 'Name': 'Quis quibusdam qui.', 'ProductNumber': '5907101619' },
{ 'ProductID': 3, 'Name': 'Sint laudantium et.', 'ProductNumber': '3057803521' },
{ 'ProductID': 17, 'Name': 'Tempore eos.', 'ProductNumber': '3576608248' },
{ 'ProductID': 18, 'Name': 'Maiores aut ducimus.', 'ProductNumber': '7079645227' },
{ 'ProductID': 19, 'Name': 'Vel inventore.', 'ProductNumber': '191484500' },
{ 'ProductID': 20, 'Name': 'Ut molestiae.', 'ProductNumber': '2994899561' },
{ 'ProductID': 31, 'Name': 'Nihil magnam aut ut.', 'ProductNumber': '5652753011' },
{ 'ProductID': 32, 'Name': 'Repellendus dolorum.', 'ProductNumber': '8807902556' },
{ 'ProductID': 43, 'Name': 'Odit ut quo minus.', 'ProductNumber': '1083007847' }
];
$("#grid").igGrid({
autoGenerateColumns: false,
width: "100%",
height: "200px",
columns: [
{ key: "ProductID", headerText: "Product ID", width: "100px", dataType: "number" },
{ key: "Name", headerText: "Product Name", width: "150px", dataType: "string" },
{ key: "ProductNumber", headerText: "Product Number", width: "200px", dataType: "number" }
],
dataSource: data,
primaryKey: "ProductID"
});
$("#exportButton").on("click", function () {
$.ig.GridExcelExporter.exportGrid($("#grid"), {
fileName: "igGrid"
});
});
});
});
</script>
</body>
</html>