I am trying to use igGridExcelExporter component in angular2.0 sample, but it not working. I want to export it with excel feature.
Hi Sameer,
I will be able to provide you a simple app using the angular2 igGrid component wrapper modified per my suggestions above until the end of the day. In the meantime you are welcome to send yours if you would like us to investigate it for you.
Hello Hristo,
I tried the one you suggested, but still I am getting errors. Seems it is not getting GridExcelExporter in ig object, it is still saying GridExcelExporter is undefined.
Error details,
core.umd.js:3433 TypeError: Cannot read property 'exportGrid' of undefined
at AppComponent.exportExcel (app.ts:70) at DebugAppView._View_AppComponent0._handle_click_4_0 (AppComponent.ngfactory.js:587) at eval (core.umd.js:9678) at eval (platform-browser.umd.js:1813) at eval (platform-browser.umd.js:1926) at ZoneDelegate.invoke (zone.js@0.6.23?main=browser:192) at Object.onInvoke (core.umd.js:6220) at ZoneDelegate.invoke (zone.js@0.6.23?main=browser:191) at Zone.runGuarded (zone.js@0.6.23?main=browser:99) at NgZoneImpl.runInnerGuarded (core.umd.js:6249)
Error in igGridTemplate.html:2:38 caused by: Cannot read property 'exportGrid' of undefined
Hi,
The Angular 2 directives implemented for our IgniteUI toolset do not wrap the igGridExcelExporter component. However you can easily add this functionality by following the steps below. I applied them to our samples from https://github.com/IgniteUI/igniteui-angular2 and it worked fine:
1) Add an exportExcel method (or however you name it) to your AppComponent:
igniteui-angular2\samples\igGrid\app.ts
exportExcel() { $.ig.GridExcelExporter.exportGrid($("#grid1"), { }); }
2) Add the following button in your App template:
igniteui-angular2\samples\igGrid\IgGridTemplate.html
<input type="button" value="Export" (click)="exportExcel()" class="btn btn-default"/>
3) Add references to the js resources required for the exporting to work:
igniteui-angular2\samples\igGrid\IgGrid.html
<!-- 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>
<script src="http://cdn-na.infragistics.com/igniteui/2016.1/latest/js/modules/infragistics.documents.core.js"></script> <script src="http://cdn-na.infragistics.com/igniteui/2016.1/latest/js/modules/infragistics.excel.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2016.1/latest/js/modules/infragistics.gridexcelexporter.js"></script>
I intentionally cited the exact fiels where to apply the steps, as you said you were following our samples from github. Please let me know if you have further questions on the matter, I will be glad to help.
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.
Basically you should not have experienced issues. It will be helpful if you provide more information on what exactly happens, is there any error that occurs, and what version of IgniteUI you are using.
I am looking forward to hearing from you.