Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
110
Javascript Excel Exporter Issues
posted

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>

Parents
No Data
Reply
  • 16310
    Offline posted

    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

Children