I'm attempting to setup an export to Excel of my igGrid, but keep running into Javascript errors. I'm using MVC Helpers and section renders to pull in my scripts (I'll include my view down below).
I have been trying to go by these examples:
http://www.igniteui.com/javascript-excel-library/excel-table
http://www.igniteui.com/help/api/2015.1/ig.gridexcelexporter
Depending on which resources I specify in the MVC helper loader the Javascript error changes. I have read where supposedly the helpers everything or only what is needed, so perhaps my problem is there, but I can't seem to make heads or tails of it.
Some sample error messages as reported by Chrome ver. 42
Uncaught ReferenceError: Class is not defined :53083/Scripts/ig/js/modules/infragistics.gridexcelexporter.js:23 (this happens with the code as is posted below)
Uncaught TypeError: Cannot read property 'bulkDefine' of undefined :53083/Scripts/ig/js/modules/infragistics.excel.js:14 (this happens when resource ...gridexcelexporter.js is not included)
Uncaught TypeError: Cannot read property 'Workbook' of undefined igGrid:64 (this happens when no resources are specified in the helper loader)
Am I missing something obvious? Have I left out a script or specified those needed incorrectly? Your help is most appreciated.
Current View code in VS2013 MVC5 EF6
@using Infragistics.Web.Mvc;
@model IQueryable<Pictures2014.Models.MWG_ITEMS>
@{ ViewBag.Title = "Inventory";}
@section topScripts { <script src="~/Scripts/ig/js/infragistics.loader.js" type="text/javascript"></script> <script src="~/Scripts/FileSaver.min.js" type="text/javascript"></script> <script src="~/Scripts/Blob.js" type="text/javascript"></script>}
@(Html.Infragistics().Loader() .ScriptPath("/Scripts/ig/js/") .CssPath("/Content/ig/css") .Resources("modules/infragistics.util.js") .Resources("modules/infragistics.documents.core.js") .Resources("modules/infragistics.excel.js") .Resources("modules/infragistics.gridexcelexporter.js") .Render())
<div class="container clear-fix"> <h2>@ViewBag.Title</h2> @(Html.Infragistics().Grid(Model) .AutoGenerateColumns(false) .ID("grid") .Columns(column => { column.For(x => x.OFFICE).DataType("string").HeaderText("Office"); column.For(x => x.COMPUTER_NAME).DataType("string").HeaderText("Computer"); column.For(x => x.USER_FULL_NAME).DataType("string").HeaderText("User"); column.For(x => x.DESCRIPTION).DataType("string").HeaderText("Description"); column.For(x => x.INVOICE_DATE).DataType("date").HeaderText("Inv. Date"); }) .Features(features => { features.Sorting().Type(OpType.Remote); features.Paging().Type(OpType.Remote); features.Filtering().Type(OpType.Remote); }) .DataSourceUrl(Url.Action("GetAllItems")) .Width("1400px") .Height("800px") .DataBind() .Render() )</div>
<input type="submit" value="Export Data to Excel" onclick="exportWorkbook()" />
<script type="text/javascript"> function exportWorkbook() { var workbook = new $.ig.excel.Workbook($.ig.excel.WorkbookFormat.excel2007); var worksheet = workbook.worksheets().add('Sheet1'); var xlRowIndex = 0; var headersTable = $("#grid").igGrid("headersTable")[0]; for (var headerRowIndex = 0; headerRowIndex < headersTable.rows.length; headerRowIndex++, xlRowIndex++) { var headerRow = headersTable.rows[headerRowIndex]; var xlHeaderRow = worksheet.rows(xlRowIndex); var computedStyle = window.getComputedStyle(headerRow); var xlColorInfo = new $.ig.excel.WorkbookColorInfo(computedStyle.color); xlHeaderRow.cellFormat().font().colorInfo(xlColorInfo); for (var headerCellIndex = 0; headerCellIndex < headerRow.cells.length; headerCellIndex++) { var headerCell = headerRow.cells[headerCellIndex]; worksheet.columns(headerCellIndex).setWidth( headerCell.offsetWidth, $.ig.excel.WorksheetColumnWidthUnit.pixel); var xlHeaderCell = xlHeaderRow.cells(headerCellIndex); var computedStyle = window.getComputedStyle(headerCell); xlHeaderCell.cellFormat().fill( $.ig.excel.CellFill.createSolidFill(computedStyle.backgroundColor)); xlHeaderCell.value($(headerCell).text()); } } var rows = $("#grid").igGrid("rows"); for (var dataRowIndex = 0; dataRowIndex < rows.length; dataRowIndex++, xlRowIndex++) { var dataRow = rows[dataRowIndex]; var xlRow = worksheet.rows(xlRowIndex); for (var dataCellIndex = 0; dataCellIndex < dataRow.cells.length; dataCellIndex++) { var dataCell = dataRow.cells[dataCellIndex]; xlRow.setCellValue(dataCellIndex, $(dataCell).text()); } } workbook.save(function (err, data) { if (err) { alert('Error Exporting'); } else { var blob = new Blob([data], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }); saveAs(blob, "grid.xlsx"); } }); }</script>
Hi,
You need to define the resources that the loader will pull in as follows:
@(Html.Infragistics().Loader() .ScriptPath("/Scripts/ig/js/") .CssPath("/Content/ig/css") .Resources("igExcel") .Resources("igGridExcelExporter") .Render())
The bolded lines will load everything required for the exporting to work. Also, you do not need to follow the example at http://www.igniteui.com/javascript-excel-library/excel-table - it demonstrates how to create a worksheet using the Infragistics Ignite UI JavaScript Excel library. When you need to export a grid you can do that using the igGridExcelExporter component by calling the export method:
function ExportGrid() { $.ig.GridExcelExporter.export($("#grid1"), { }); }
You can see an example at http://www.igniteui.com/grid/export-basic-grid
Thank you for replying.
However, when I tried specifying the resources as you suggested, I get the following error(s):
Uncaught Resource 'igExcel' cannot be found. Please check that the resource name is correct.
Uncaught Resource 'igGridExceExporterl' cannot be found. Please check that the resource name is correct.
Both on infragistics.loader.js:9
Thoughts?
Hi Michael,
Thank you for your feedback. Please let me know the exact version of IgniteUI that you are using ? You can see for example at the top of the infragistics.loader.js file.
Hristo,
Copied directly from the loader.js:
/*!@license Infragistics.Web.Loader 15.1.20151.1005** Copyright (c) 2011-2015
Hi Hristo,
Do you know if there is an issue with this version?
Thanks,
Michael
Thank you for your notice - I doubled check and observed that the igExcel and igGridExcelExporter strings are not recognized by the loader in 1005 and this why it fails to load the resources. Anyway, this is already fixed so I suggest that you upgrade to the latest service release for Ignite UI 15.1, which is 15.1.2015.1.2112. You can upgrade for free by downloading the service release from Infragistics website after logging in at My Keys & Downloads. You need to choose the product name in the list and then go the Service Release tab that will show up below. Then you should fine Ignite UI 2015 Vol. 1 - Service Release in the list - this is the file you need to download and install.
Please let me know if this fixes your issue after installing or if you have further questions on the matter.
Thank you for the help.
This has solved my issue.
Also, can you elaborate on the "service release" concept a little? I'd like to understand more of it if possible.
Thanks again,
If there is a Service Release, that you have not applied, on starting Visual Stuido, you should be prompted by our installer to install this SR.
As for the MVC helpers - http://igniteui.com is the place with all the samples that we have.
There's also a help section there, at:
http://www.igniteui.com/help/.
Thank you for clearing that up. I will be sure to watch the service release area, and stay on top of updates.
Is there a mailing list I can join that will let me know when the service release(s) are published?
Also, is there an area on Infragistics site that focuses more on MVC helpers instead of jQuery examples? I realize that jQuery can be use, I just prefer the MVC helper syntax a bit more.
Thanks again for all of your help.
Thank you for your feedback, I am glad this resolved your issue.
The service release concept is simple - basically a service release is rolled out twice in the year. Each service release provides the latest version available for the given product and its volume. For example the latest volume of IgniteUI product is 15.1. When 15.1 was introduced in March 2015 the version was 15.1.20151.1005, the one you have been using. In June 2015 a new service release was rolled out and it provides the latest version available for 15,1, which is 15.2.20151.2112.
Service releases happens four times throughout the year (you can see a schedule at Service Release Schedule Page). Each service release brings improvements and bug fixes that have been discovered in previous versions. Each service release provides the latest version not only for the latest volume (currently 15.1), but for older volumes, depending on the Product Lifecycle.
I hope this clears it for you. However do not hesitate to contact is with further questions, I will be glad to help.