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?