Available in the Full Version

Data Grid - Excel Exporting

This sample shows how easy it is to export the Infragistics Ignite UI for jQuery data grid to Excel with sorting, filtering, hiding, and summaries enabled.
Filtering
Paging
Hiding
Columns to skip


Show
records
Last Name
Country
Age
Is Active
Company
Register Date
HolcombItaly35http://infragistics.com/7/25/2015
CalderonUSA26http://infragistics.com/9/22/2014
HawkinsCanada25http://infragistics.com/8/8/2015
NicholsonItaly49http://infragistics.com/6/28/2014
TrujilloCanada37http://infragistics.com/4/19/2015
VaughanUSA48http://infragistics.com/4/24/2014
MunozUSA59http://infragistics.com/2/9/2014
ShortUSA26http://infragistics.com/6/4/2015
HarringtonUSA31http://infragistics.com/11/25/2014
SullivanItaly37http://infragistics.com/8/16/2015
SandovalItaly24http://infragistics.com/6/19/2014
SotoCanada24http://infragistics.com/3/28/2015
MathewsItaly60http://infragistics.com/10/9/2014
HarperUSA52http://infragistics.com/5/9/2014
BlairCanada41http://infragistics.com/12/12/2014
DownsUSA58http://infragistics.com/7/10/2015
WheelerCanada42http://infragistics.com/3/28/2015
RothCanada36http://infragistics.com/7/24/2015
MannCanada40http://infragistics.com/7/3/2015
RandallItaly20http://infragistics.com/5/27/2015
SanchezUSA26http://infragistics.com/7/24/2014
HamptonItaly27http://infragistics.com/11/10/2014
PaceCanada25http://infragistics.com/11/8/2014
BaileyCanada20http://infragistics.com/7/7/2014
TerryUSA45http://infragistics.com/6/1/2014
BoydUSA28http://infragistics.com/7/7/2015
MercerCanada25http://infragistics.com/8/18/2014
LongCanada21http://infragistics.com/9/26/2014
CherryUSA38http://infragistics.com/4/25/2014
HuntUSA26http://infragistics.com/6/16/2014

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

You have several options when exporting grid features; consult the API docs for details.

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Export grid with features</title>
        <style>
            #exportButton {
                margin-bottom: 8px;
            }
            .optionContainer{
				display: inline-block;
			}
			.item {
				display: inline-block;
				height: 30px;
			}
			.item ~ .item {
				margin-left: 15px;
			}
			.item-label {
				display: block;
				float: right;
				margin-left: 5px;
                line-height: 21px;
			}
            .exporting-overlay {
                position: absolute;
                background-color: rgba(181, 181, 181, 0.9);
                top: 0;
                left: 0;
                z-index: 100000;
                text-align: center;
                vertical-align: top;
                padding-top: 100px;
            }
            .exporting-overlay:after {
                content: "";
                display: inline-block;
                vertical-align: middle;
                height: 100%;
            }
            .exporting-text {
                font-size: 46px;
                font-weight: bold;
                vertical-align: top;
            }
        </style>

        <!-- 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>

        <!--Sample JSON Data-->
        <script src="/data-files/employee-data-allDatatypes.js"></script>
    </head>
    <body>
        <div class="group-fields">
            <div class="item">
                <div id="sorting" class="optionContainer"></div>
                <label class="item-label" for="sorting">Sorting</label>
            </div>
            <div class="item">
                <div id="summaries" class="optionContainer"></div>
                <label class="item-label" for="summaries">Summaries</label>
            </div>
            <div class="item">
                <div id="colfixing" class="optionContainer"></div>
                <label class="item-label" for="colfixing">Column Fixing</label>
            </div>
            <div class="item">
                <div id="styling" class="optionContainer"></div>
                <label class="item-label" for="styling">Grid Styling</label>
            </div>
        </div>
        <div class="optionContainer">
            Filtering<br />
            <select id="filtering" class="selectBounds">
                <option value="applied">applied</option>
                <option value="none">none</option>
                <option value="filteredRowsOnly">filteredRowsOnly</option>
            </select>
        </div>
        <div class="optionContainer">
            Paging<br />
            <select id="paging" class="selectBounds">
                <option value="currentPage">currentPage</option>
                <option value="allRows">allRows</option>
            </select>
        </div>
        <div class="optionContainer">
            Hiding <br />
            <select id="hiding" class="selectBounds">
                <option value="visibleColumnsOnly">visibleColumnsOnly</option>
                <option value="none">none</option>
                <option value="applied">applied</option>
            </select>
        </div>
        <div class="optionContainer">
            Columns to skip <br />
            <div id="colstoskip"></div>
        </div><br/>
        <input type="button" id="exportButton" /><br />
        <table id="grid1"></table>
        <script>

        $(function () {
            var keys = ["EmployeeID", "FirstName", "LastName", "RegistererDate", "Country", "Age", "IsActive", "Company"],
                columnsToSkip = [];

            $("div.optionContainer:lt(4)").igCheckboxEditor();
            $("select").igCombo({ width: "150px", mode: "dropdown"});
            $("#colstoskip").igCombo({
                width: "150px",
                mode: "dropdown",
                dataSource: keys,
                multiSelection: {
                    enabled: true,
                    showCheckboxes: true
                }
            });
            $("fieldset").show();
            $("#grid1").igGrid({
                autoGenerateColumns: false,
                width: "100%",
                primaryKey: "EmployeeID",
                autofitLastColumn: true,
                columns: [
                    { headerText: "Employee ID", key: "EmployeeID", dataType: "string", hidden: true },
                    { headerText: "Last Name", key: "LastName", width: "15%", dataType: "string" },
                    { headerText: "Country", key: "Country", width: "15%", dataType: "string" },
                    { headerText: "Age", key: "Age", width: "15%", dataType: "number" },
                    { headerText: "Is Active", key: "IsActive", width: "15%", dataType: "bool", format: "checkbox" },
                    { headerText: "Company", key: "Company", width: "20%", dataType: "string", unbound: true, formula: function () { return "http://infragistics.com/"; } },
                    { headerText: "Register Date", key: "RegistererDate", width: "20%", dataType: "date" }
                ],
                dataSource: employees,
                primaryKey: "EmployeeID",
                features: [
                    {
                        name: "Filtering"
                    },
                    {
                        name: "Sorting",
                        mode: "multi",
                    },
                    {
                        name: "Paging",
                        type: "local",
                        pageSize: 30
                    },
                    {
                        name: "Hiding",
                    },
                    {
                        name: "Summaries",
                    }
                ]
            });

            $("#exportButton").igButton({ labelText: "Export" });
            $("#exportButton").on("click", function () {
                var exportingOverlay = $('<div>');
                if ($("#colstoskip").igCombo("selectedItems") != null) {
                    $.each($("#colstoskip").igCombo("selectedItems"), function (index, item) {
                        columnsToSkip.push(item.data.value);
                    });
                }

                $.ig.GridExcelExporter.exportGrid($("#grid1"), {
                    fileName: "igGrid",
                    gridStyling: $("#styling").igCheckboxEditor("value") ? "applied" : "none",
                    columnsToSkip: columnsToSkip,
                    gridFeatureOptions: {
                        filtering: $("#filtering").igCombo("value"),
                        paging: $("#paging").igCombo("value"),
                        hiding: $("#hiding").igCombo("value"),
                        columnFixing: $("#colfixing").igCheckboxEditor("value") ? "applied" : "none",
                        sorting: $("#sorting").igCheckboxEditor("value") ? "applied" : "none",
                        summaries: $("#summaries").igCheckboxEditor("value") ? "applied" : "none"
                    },
                },
                {
                    exportStarting: function (e, args) {
                        showOverlay(args.grid, exportingOverlay);
                    },
                    success: function () {
                        hideOverlay(exportingOverlay);
                    },
                    cellExported: function (e, args) {
                        if (args.xlRow.index() == 0) {
                            return;
                        }
                        if (args.columnKey == 'Company') {
                            var xlRow = args.xlRow;
                            xlRow.cells(args.columnIndex).applyFormula('=HYPERLINK("' + args.cellValue + '")');
                        }
                        if (args.columnKey == "Age" && args.cellValue > 43) {
                            args.xlRow.getCellFormat(args.columnIndex).font().bold(1);
                            args.xlRow.getCellFormat(args.columnIndex).fill($.ig.excel.CellFill.createLinearGradientFill(45, '#FF0000', '#00FFFF'));
                        }
                    },
                    exportEnding: function (e, args) {
                        var columns = args.worksheet.columns();
                        columns.item(columns.count() - 1).cellFormat().formatString("dd/MMM/YYYY");
                    },
                });
            });
        });

        function showOverlay(grid, exportingOverlay) {
            var $gridContainer = $('#' + grid.attr('id') + '_container');

            exportingOverlay.css({
                "width": $gridContainer.outerWidth(),
                "height": $gridContainer.outerHeight()
            }).html('<span class="exporting-text">Exporting...</span>');
            exportingOverlay.addClass("exporting-overlay");

            $gridContainer.append(exportingOverlay);
        }

        function hideOverlay(exportingOverlay) {
            exportingOverlay.remove();
        }
        </script>
    </body>
</html>