Available in the Full Version

Data Grid - Export Basic Grid to Excel

Product IDProduct NameProduct Number
1Omnis ut illum nisi.2973311236
2Quis quibusdam qui.5907101619
3Sint laudantium et.3057803521
17Tempore eos.3576608248
18Maiores aut ducimus.7079645227
19Vel inventore.191484500
20Ut molestiae.2994899561
31Nihil magnam aut ut.5652753011
32Repellendus dolorum.8807902556
43Odit ut quo minus.1083007847

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.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 () {
            $(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>