Hi,
I am implementing igGrid latest version with Angular 2 (2.0.0-rc.1). So far I am able to bind, edit the grid.
However I have not able to find any example of Export to Excel, Copy from Excel. I am wondering if anyone can help me in this feature.
Basically in general how I can calling the grid methods inside my Angular 2 component.
-Anilesh
Hello,
The gridExcelExporter feature requires additional scripts to work. These are documented in our API here: http://www.igniteui.com/help/api/2016.1/ig.gridexcelexporter
So to start off, I would include references to these in the initial page:
<!-- Required for igGridExcelExporter --> <script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/latest/js/modules/infragistics.documents.core.js"></script> <script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/latest/js/modules/infragistics.excel.js"></script> <script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/latest/js/modules/infragistics.gridexcelexporter.js"></script>
<!-- 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>
Within the component, a method can be defined that will export the grid. This method and any other grid's method will be invoked using jQuery. It is important to note that these are still jQuery UI widgets under the hood being wrapped as Angular 2 components so the approach to invoking methods will be the same:
exportExcel () { $.ig.GridExcelExporter.exportGrid($("#grid1"), { fileName: "igGrid" }); }
Now we can set a button within our component's template that will call this method when clicked:
<input type="button" value="Export Excel" (click)="exportExcel()" class="btn btn-default"/>
On clicking the button, the we will be exporting an excel doc with the grid's data!
I'm attaching a sample with this behavior. It is only the .ts file with the component definition so you would need to include the scripts mentioned earlier during page initialization and change the import statements.
Let me know if you have any further questions.
Thanks for your reply However I am getting typescript compiler error "TS2339: Property 'GridExcelExporter' does not exist on type 'IgniteUIStatic'." Do I need to import something from "../igGrid/igniteui.angular2";