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 Hristo,
Do you know if there is an issue with this version?
Thanks,
Michael
Hristo,
Copied directly from the loader.js:
/*!@license Infragistics.Web.Loader 15.1.20151.1005** Copyright (c) 2011-2015
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.
I misspelled them in my reply, but they are specified correctly in my source code.
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?