{"id":597,"date":"2016-08-08T15:22:00","date_gmt":"2016-08-08T15:22:00","guid":{"rendered":"https:\/\/staging.infragistics.com\/blogs\/?p=597"},"modified":"2025-02-25T15:31:31","modified_gmt":"2025-02-25T15:31:31","slug":"exporting-a-grid-to-excel","status":"publish","type":"post","link":"https:\/\/www.infragistics.com\/blogs\/exporting-a-grid-to-excel","title":{"rendered":"Exporting a Grid to Excel in Three Simple Steps"},"content":{"rendered":"\n<p>In a web application project, exporting a grid to an Excel file is one of the most frequent requirements. There are various ways to do this, but IgniteUI makes it simple. All it takes is one line of code!<\/p>\n\n\n\n<p>In this post, we will learn to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create a grid<\/li>\n\n\n\n<li>Export the grid to an Excel file<\/li>\n\n\n\n<li>Export a grid with features like Pagination enabled to an Excel file<\/li>\n<\/ul>\n\n\n\n<p>Let\u2019s get started. <b><\/b><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"adding-references\">Adding References<\/h2>\n\n\n\n<p>To work with any IgniteUI control, we first need to add the required JavaScript and CSS references. So, let us start with that. We have three options to add references:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Download IgniteUI and add the necessary files to the project.<\/li>\n\n\n\n<li>Use NuGet package in Visual Studio. Right-click on the project and select Manage NuGet package. Search IgniteUI in NuGet Package Manager, and install a trial version of IgniteUI in the project.<\/li>\n\n\n\n<li>Via CDN: The IgniteUI team provides a public CDN to use.<\/li>\n<\/ol>\n\n\n\n<p>In this demo, I installed IgniteUI using the NuGet package for the project. We need to add the required references as shown in the listing below:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">    &lt;link href=\"Content\/Infragistics\/css\/themes\/infragistics\/infragistics.theme.css\" rel=\"stylesheet\" \/>\n    &lt;link href=\"Content\/Infragistics\/css\/structure\/infragistics.css\" rel=\"stylesheet\" \/>\n\n\n    &lt;script src=\"scripts\/jquery-2.0.3.min.js\">&lt;\/script>\n    &lt;script src=\"scripts\/jquery-ui-1.10.3.min.js\">&lt;\/script>\n\n    &lt;script src=\"scripts\/Infragistics\/js\/infragistics.core.js\">&lt;\/script>\n    &lt;script src=\"scripts\/Infragistics\/js\/infragistics.lob.js\">&lt;\/script>\n \n    &lt;script src=\"scripts\/Infragistics\/js\/modules\/infragistics.documents.core.js\">&lt;\/script>\n    &lt;script src=\"scripts\/Infragistics\/js\/modules\/infragistics.excel.js\">&lt;\/s cript>\n    &lt;script src=\"scripts\/Infragistics\/js\/modules\/infragistics.gridexcelexporter.js\">&lt;\/script>\n\n    &lt;script src=\"http:\/\/www.igniteui.com\/js\/external\/FileSaver.js\">&lt;\/script>\n    &lt;script src=\"http:\/\/www.igniteui.com\/js\/external\/Blob.js\">&lt;\/script>\n    \n    &lt;script src=\"demo.js\">&lt;\/script><\/pre>\n\n\n\n<p>Essentially, we are adding references of:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>IgniteUI CSS libraries<\/li>\n\n\n\n<li>jQuery library<\/li>\n\n\n\n<li>jQuery UI library<\/li>\n\n\n\n<li>IgniteUI core, dev, and lob libraries<\/li>\n\n\n\n<li>IgniteUI libraries for Excel export<\/li>\n<\/ul>\n\n\n\n<p>Keep in mind that you need to follow the same sequence when adding references, as shown in the above listing. You may notice that I have also added a reference to the demo.js file. As a starter, demo.js contains a function, as shown in the listing below. We will write all the required JavaScript code inside this function.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">$(function () {\n    \/\/write ignite code here \n});<\/pre>\n\n\n\n<p>\u00a0We also have another option to write IgniteUI code inside the jQuery document ready function.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"create-html\">Create HTML &nbsp;<\/h2>\n\n\n\n<p>Next, let\u2019s create our HTML page with two elements:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>An HTML table that gets converted to igGrid<\/li>\n\n\n\n<li>An HTML button that, when clicked, will export the grid to Excel<\/li>\n<\/ul>\n\n\n\n<p>Let us go ahead and create HTML as shown in the listing below:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;body>\n    &lt;table id=\"grid\" >&lt;\/table>  \n    &lt;button id=\"btnExportToExcel\" type=\"button\">Export to Excel&lt;\/button>\n&lt;\/body><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"creating-the-iggrid\">Creating the igGrid<\/h2>\n\n\n\n<p>You can create an igGrid by binding data from:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>JSON data from the backend server<\/li>\n\n\n\n<li>OData EndPoint<\/li>\n\n\n\n<li>Binding to a local data source. igGrid could be bound to a JSON object array created locally in the application<\/li>\n<\/ol>\n\n\n\n<p>We have created a JSON object array productData as shown in the listing below:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">var productData = [\n          { \"ProductID\": 1, \"Name\": \"Adjustable Race\", \"ProductNumber\": \"AR-5381\", \"SafetyStockLevel\": 1000 },\n          { \"ProductID\": 2, \"Name\": \"Bearing Ball\", \"ProductNumber\": \"BA-8327\", \"SafetyStockLevel\": 1000 },\n          { \"ProductID\": 3, \"Name\": \"BB Ball Bearing\", \"ProductNumber\": \"BE-2349\", \"SafetyStockLevel\": 800 },\n          { \"ProductID\": 4, \"Name\": \"Headset Ball Bearings\", \"ProductNumber\": \"BE-2908\", \"SafetyStockLevel\": 800 },\n          { \"ProductID\": 316, \"Name\": \"Blade\", \"ProductNumber\": \"BL-2036\", \"SafetyStockLevel\": 800 },\n          { \"ProductID\": 317, \"Name\": \"LL Crankarm\", \"ProductNumber\": \"CA-5965\", \"SafetyStockLevel\": 500 },\n          { \"ProductID\": 318, \"Name\": \"ML Crankarm\", \"ProductNumber\": \"CA-6738\", \"SafetyStockLevel\": 500 },\n          { \"ProductID\": 319, \"Name\": \"HL Crankarm\", \"ProductNumber\": \"CA-7457\", \"SafetyStockLevel\": 500 },\n          { \"ProductID\": 320, \"Name\": \"Chainring Bolts\", \"ProductNumber\": \"CB-2903\", \"SafetyStockLevel\": 1000 },\n          { \"ProductID\": 321, \"Name\": \"Chainring Nut\", \"ProductNumber\": \"CN-6137\", \"SafetyStockLevel\": 1000 }\n    ];<\/pre>\n\n\n\n<p>We can bind the above data and create a grid, as shown in the listing below. Essentially, we need to select an HTML table and convert that to igGrid by setting various properties. Keep in mind that to create a minimum grid, we need to put only the data source property. However, here we are setting other properties like columns header, primary key, etc.<\/p>\n\n\n\n<p>So, igGrid can be created as shown in the listing below:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">$(\"#grid\").igGrid({\n        columns: [\n          { key: \"ProductID\", headerText: \"Product ID\" },\n          { key: \"Name\", headerText: \"Name\" },\n          { key: \"ProductNumber\", headerText: \"Product number\" },\n          { key: \"SafetyStockLevel\", headerText: \"Safety stock level\" }\n        ],\n        autoGenerateColumns: false,\n        primaryKey: \"ProductID\",\n        dataSource: productData,\n        width: \"1500px\"\n    });<\/pre>\n\n\n\n<p>You may want to notice the dataSource property in the above listing is set to productData JSON object array. Keep in mind that it can be set to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>ODATA EndPoint URL<\/li>\n\n\n\n<li>REST service EndPoint returning JSON data<\/li>\n\n\n\n<li>Local JOSN data<\/li>\n<\/ul>\n\n\n\n<p>Regardless of what source type is set to the dataSource property of igGrid, exporting to Excel would be the same. At this point, when running the application, you will find a grid and a button as shown in the image below:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.gridexcel\/2870.pic1.png\" alt=\" \"\/><\/figure>\n\n\n\n<p>We need to export the grid to Excel at the click of the button.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"exporting-iggrid-to-excel\">Exporting igGrid to Excel <\/h2>\n\n\n\n<p>Exporting a grid to an Excel file is very simple. IgniteUI has given us a method on ig object called <b>GridExcelExporter.exportGrid<\/b>. We need to use this method to export a grid to Excel. When clicking the button, the above grid can be exported to Excel, as shown in the listing below.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   $(\"#btnExportToExcel\").click(function () {\n\n        console.log(\"exporting to Excel\");\n        $.ig.GridExcelExporter.exportGrid($(\"#grid\"));\n    }); <\/pre>\n\n\n\n<p>As you might have noticed, we are passing the ID of the grid inside the GridExcelExporter.exportGrid method. Right now, the Excel file will be saved with the default name. If we wish to download the Excel file with a desired name, we need to set the filename property value as shown in the listing below.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">$(\"#btnExportToExcel\").click(function () {\n        console.log(\"exporting to Excel\");\n\n        $.ig.GridExcelExporter.exportGrid($(\"#grid\"), {\n            fileName: \"yourfilename\"\n        });\n});<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"exporting-a-grid-with-enabled-features\">Exporting a Grid with Enabled Features<\/h2>\n\n\n\n<p>So far, we have exported a simple Grid, but we may have a scenario in which the grid has many features enabled, such as Paging, Sorting, Filtering, etc.\u00a0 GridExcelExporter will default ignore the features and export the whole grid in an Excel file.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.gridexcel\/2781.pic2.PNG\" alt=\" \"\/><\/figure>\n\n\n\n<p>Let us say we have features enabled in igGrid as shown in the listing below:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">$(\"#grid\").igGrid({\n        columns: [\n          { key: \"ProductID\", headerText: \"Product ID\" },\n          { key: \"Name\", headerText: \"Name\" },\n          { key: \"ProductNumber\", headerText: \"Product number\" },\n          { key: \"SafetyStockLevel\", headerText: \"Safety stock level\" }\n        ],\n        autoGenerateColumns: false,\n        primaryKey: \"ProductID\",\n        dataSource: productData,\n        features: [\n                  {\n                      name: 'Paging',\n                      type: \"local\",\n                      pageSize: 2\n                  },\n                  {\n                      name: \"Filtering\"\n                  },\n                  {\n                      name: \"Sorting\"\n                  }\n        ],\n        width: \"1500px\"\n    });<\/pre>\n\n\n\n<p>We can persist these features while exporting to Excel, as shown in the listing below. Here we are setting gridFeatureOptions properties such as sorting and paging.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   $(\"#btnExportToExcel\").click(function () {\n        console.log(\"exporting to Excel\");\n        $.ig.GridExcelExporter.exportGrid($(\"#grid\"), {\n            fileName: \"yourfilename\",\n            gridFeatureOptions: { \"sorting\": \"applied\",\"paging\": \"currentPage\", \"summaries\": \"applied\" },\n        });\n    });<\/pre>\n\n\n\n<p>If we don\u2019t set a value for gridFeatureOptions, by default the Excel file will be exported ignoring the grid features. For example, igGrid will have pagination enabled with 2 records per page and there are a total of 5 pages. If gridFeatureOptions are not set, IgniteUI will export all 10 records in the Excel file.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"conclusion\">Conclusion<\/h2>\n\n\n\n<p>This post taught us that exporting a Grid to an Excel file using IgniteUI GridExcelExporter is very easy.\u00a0 For reference, let us put every piece of code together.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">$(function () {\n   \n    var productData = [\n         { \"ProductID\": 1, \"Name\": \"Adjustable Race\", \"ProductNumber\": \"AR-5381\", \"SafetyStockLevel\": 1000 },\n         { \"ProductID\": 2, \"Name\": \"Bearing Ball\", \"ProductNumber\": \"BA-8327\", \"SafetyStockLevel\": 1000 },\n         { \"ProductID\": 3, \"Name\": \"BB Ball Bearing\", \"ProductNumber\": \"BE-2349\", \"SafetyStockLevel\": 800 },\n         { \"ProductID\": 4, \"Name\": \"Headset Ball Bearings\", \"ProductNumber\": \"BE-2908\", \"SafetyStockLevel\": 800 },\n         { \"ProductID\": 316, \"Name\": \"Blade\", \"ProductNumber\": \"BL-2036\", \"SafetyStockLevel\": 800 },\n         { \"ProductID\": 317, \"Name\": \"LL Crankarm\", \"ProductNumber\": \"CA-5965\", \"SafetyStockLevel\": 500 },\n         { \"ProductID\": 318, \"Name\": \"ML Crankarm\", \"ProductNumber\": \"CA-6738\", \"SafetyStockLevel\": 500 },\n         { \"ProductID\": 319, \"Name\": \"HL Crankarm\", \"ProductNumber\": \"CA-7457\", \"SafetyStockLevel\": 500 },\n         { \"ProductID\": 320, \"Name\": \"Chainring Bolts\", \"ProductNumber\": \"CB-2903\", \"SafetyStockLevel\": 1000 },\n         { \"ProductID\": 321, \"Name\": \"Chainring Nut\", \"ProductNumber\": \"CN-6137\", \"SafetyStockLevel\": 1000 }\n    ];\n\n\/\/ Creating GRID \n    $(\"#grid\").igGrid({\n        columns: [\n          { key: \"ProductID\", headerText: \"Product ID\" },\n          { key: \"Name\", headerText: \"Name\" },\n          { key: \"ProductNumber\", headerText: \"Product number\" },\n          { key: \"SafetyStockLevel\", headerText: \"Safety stock level\" }\n        ],\n        autoGenerateColumns: false,\n        primaryKey: \"ProductID\",\n        dataSource: productData,\n        features: [\n                  {\n                      name: 'Paging',\n                      type: \"local\",\n                      pageSize: 2\n                  },\n                  {\n                      name: \"Filtering\"\n                  },\n                  {\n                      name: \"Sorting\"\n                  }\n        ],\n        width: \"1500px\"\n    });\n\n    \n    \/\/ Exporting to Excel \n    $(\"#btnExportToExcel\").click(function () {\n        console.log(\"exporting to Excel\");\n        $.ig.GridExcelExporter.exportGrid($(\"#grid\"), {\n            fileName: \"yourfilename\",\n            gridFeatureOptions: { \"sorting\": \"applied\",\"paging\": \"currentPage\", \"summaries\": \"applied\" },\n        });\n    });\n\n});<\/pre>\n\n\n\n<p>I hope you find this post useful! Keep an eye on future posts where we will cover other IgniteUI controls and their features. Thanks for reading.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In a web application project, exporting a grid to an Excel file is one of the most frequent requirements. There are various ways to do this, but IgniteUI makes it super simple. All it takes is one line of code! <\/p>\n","protected":false},"author":65,"featured_media":2366,"comment_status":"publish","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[],"class_list":["post-597","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to"],"_links":{"self":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/597","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/comments?post=597"}],"version-history":[{"count":4,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/597\/revisions"}],"predecessor-version":[{"id":1996,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/597\/revisions\/1996"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media\/2366"}],"wp:attachment":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media?parent=597"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/categories?post=597"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/tags?post=597"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}