Available in the Full Version

Data Grid - Exporting Grid to Excel with Progress Indicator

Product ID	Product Name	Product Number	In Stock	Quantity

1	Omnis ut illum nisi.	2973311236	true	56
2	Quis quibusdam qui.	5907101619	false	0
3	Sint laudantium et.	3057803521	true	26
17	Tempore eos.	3576608248	true	8
18	Maiores aut ducimus.	7079645227	true	62
19	Vel inventore.	191484500	true	18
20	Ut molestiae.	2994899561	false	0
31	Nihil magnam aut ut.	5652753011	true	41
32	Repellendus dolorum.	8807902556	true	10
43	Odit ut quo minus.	1083007847	false	0
1	Omnis ut illum nisi.	2973311236	true	56
2	Quis quibusdam qui.	5907101619	false	0
3	Sint laudantium et.	3057803521	true	26
17	Tempore eos.	3576608248	true	8
18	Maiores aut ducimus.	7079645227	true	62
19	Vel inventore.	191484500	true	18
20	Ut molestiae.	2994899561	false	0
31	Nihil magnam aut ut.	5652753011	true	41
32	Repellendus dolorum.	8807902556	true	10
43	Odit ut quo minus.	1083007847	false	0

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

Show In JsFiddle

Copy to Clipboard

HTML

<!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.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;
        }

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

Ignite UI for jQuery | Samples

Search Results

Data Grid - Exporting Grid to Excel with Progress Indicator

Code View