I am trying to add below code to the angular 2 final version sample what you guys have provided in github.

$.ig.GridExcelExporter.exportGrid($("#xyz"), {
fileName: "igGrid",
worksheetName: "data",
tableStyle: "tableStyleLight13"
});

But it is saying GridExcelExporter is not defined. Also I tried this http://ko.infragistics.com/community/forums/t/106636.aspx also but it is giving me "core.umd.js:3427 EXCEPTION: Cannot read property 'igHierarchicalGrid' of undefined".

I want to export data to excel with features.

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 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

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

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>

I am also attaching a sample for your reference, you need to do npm install, npm start and navigate to the igGrid sample.

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.

Hi Hristo,

FYI, we are using version 2016.1 and we tried in machine with infragistics not installed as well, both not working.

var exporter = new $.ig.GridExcelExporter({})

exporter.exportGrid($("#grid1"), { fileName: "igGrid" },
{
success: function () {
alert("exporting has finished!");
}
}
);

we face below error on Excel Export now,

"Invalid Enum Argument: format value: 2"

Warm regards,

Saravanan

Hi Hristo,

Please find the attached sample.

Warm regards,

G.Saravanan

Please provide a sample demonstrating the issue that I can investigate for you.

Hi Hristo,

Any updates on this issue?

Thanks,

Saravanan