Available in the Full Version

Data Grid - Customizing Grid Excel Export

Show
records
1Omnis ut illum nisi.2973311236true56http://infragistics.com/
2Quis quibusdam qui.5907101619false0http://infragistics.com/
3Sint laudantium et.3057803521true26http://infragistics.com/
17Tempore eos.3576608248true8http://infragistics.com/
18Maiores aut ducimus.7079645227true62http://infragistics.com/
19Vel inventore.191484500true18http://infragistics.com/
20Ut molestiae.2994899561false0http://infragistics.com/
31Nihil magnam aut ut.5652753011true41http://infragistics.com/
32Repellendus dolorum.8807902556true10http://infragistics.com/
43Odit ut quo minus.1083007847false0http://infragistics.com/
Product IDProduct NameProduct NumberIn StockQuantityVendor website

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.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
        <link href="http://cdn-na.infragistics.com/igniteui/2024.2/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.2/latest/js/infragistics.core.js"></script>
        <script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>
        <script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.excel-bundled.js"></script>
        <script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.2/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>