Hi,

Any Updates on the above issue to excel export in iggrid. FYI, we are using Angular4 for development

"$.ig.GridExcelExporter is not a constructor."

Thanks,

Saravanan

Hi Hristo,

I can't attach file so i'll paste code below,

import { Component, Injector } from '@angular/core';
import { IgniteUIModule } from "igniteui-angular2";
import * as $ from "jquery";

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';

constructor(
injector: Injector
) {

this.LoadIgGrid();
}

private IgGridOptionsMain: IgGrid;
private igdata: any = [
{ sNo: 1, userName: 'Tester', endDate: "10/06/2016", isActive: 1, totalAmt: "10000" },
{ sNo: 2, userName: 'Tester2', endDate: "10/06/2016", isActive: 1, totalAmt: "10000" },
{ sNo: 3, userName: 'IOS Developer', endDate: "11/06/2016", isActive: 1, totalAmt: "10000" },
{ sNo: 4, userName: 'JAVA Developer', endDate: "12/06/2016", isActive: 1, totalAmt: "10000" },
{ sNo: 5, userName: 'Android Developer', endDate: "09/06/2016", isActive: 1, totalAmt: "10000" },
{ sNo: 6, userName: 'PHP Developer', endDate: "08/06/2016", isActive: 1, totalAmt: "10000" },
{ sNo: 7, userName: 'Web Designer', endDate: "07/06/2016", isActive: 1, totalAmt: "10000" },
];

//ig Grid Load
LoadIgGrid() {
this.IgGridOptionsMain = {
autoCommit: true,
//dataSource: this.igdata,
width: "100%",
avgRowHeight: "10px",
autoGenerateColumns: false,
columns: [
{ key: "sNo", headerText: "UserId", dataType: "number", hidden: true, },
{ key: "userName", headerText: "UserName", width: "40%", dataType: "string" },
{ key: "endDate", headerText: "EndDate", width: "20%", dataType: "date" },
{
key: "isActive", headerText: "Status", width: "20%", dataType: "string",
formatter: function template(val, grid) {
if (grid.isActive == "true") {
return "Active"
}
else {
return "InActive";
}
}
},
{
key: "totalAmt", headerText: "TotalAmt", width: "20%", dataType: "string",
formatter: function template(val, grid) {
if (grid.totalAmt != "") {
return "₹" + grid.totalAmt;
}
else {
return grid.totalAmt;
}
}
}
],

primaryKey: "sNo",
features: [
{
name: "Paging",
type: "local",
pageSize: 10,
},
{
name: "Filtering",
type: "local",
allowfiltering: true,
columnSettings:
[
{ columnKey: "sNo", allowFiltering: false }
]
},
{
name: "Sorting",
type: "local",
allowsorting: true,
applySortedColumnCss: false,
columnSettings:
[
{ columnKey: "sNo", allowSorting: false }
]
},
]
};
}

exportExcel() {
debugger;
var exporter = new $.ig.GridExcelExporter({});
exporter.exportGrid($("#grid1"), {}, {});
console.log($("#grid1"));
}

}

Warm Regards,

Saravanan

Hello G.Saravanan,

This error means that the required resources for exporting are not loaded. Please make sure you have added those, as explained in step 3) from above:

<!-- External files for exporting -->
<script src="http://www.igniteui.com/js/external/FileSaver.js"></script>

<script src="http://www.igniteui.com/js/external/Blob.js"></script>

<!-- IgniteUI exporting resources -->

<script src="http://cdn-na.infragistics.com/igniteui/2016.2/latest/js/modules/infragistics.documents.core.js"></script>

<script src="http://cdn-na.infragistics.com/igniteui/2016.2/latest/js/modules/infragistics.excel.js"></script>

<script src="http://cdn-na.infragistics.com/igniteui/2016.2/latest/js/modules/infragistics.gridexcelexporter.js"></script>

Please let me note if you are using version 2017.1 of IgniteUI, because the in 2017. those files are modularized, and references need to be updated.

Hristo

Hi,

Any Updates on the above issue to excel export in iggrid. 

"$.ig.GridExcelExporter is not a constructor."

Thanks,

G.Saravanan

Sorry this is not worked I have tried the above mentioned but error thrown as 
"$.ig.GridExcelExporter is not a constructor."

But when i go to its definition there is method defined in "igniteui.ts" file as below

declare module Infragistics {
export class GridExcelExporter {
constructor(callbacks: GridExcelExporterCallbacks);
constructor(settings: GridExcelExporterSettings);

/**
* Exports the provided igGrid to Excel document.
*
* @param grid Grid to be exported.
* @param userSettings Settings for exporting the grid.
* @param userCallbacks Callbacks for the events.
*/
exportGrid(grid: Object, userSettings: Object, userCallbacks: Object): void;
}
}

interface IgniteUIStatic {
GridExcelExporter: typeof Infragistics.GridExcelExporter;
exportGrid(grid: Object, userSettings: Object, userCallbacks: Object): void;
}