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";
No, you wouldn't need to import anything. The reason you are receiving this error is because GridExcelExporter is not defined within the imported type definition file (d.ts files). You can add this manually to your typings file to remove the error.
I am sorry I am pretty new to Angular 2 and type script. Could not get where I need to add the exporter. I am attaching my app code for you. If you can let me know that would be very helpful.
I am trying to do the same thing and I've followed the steps above. Solution is building fine but when I call the exportGrid function I get a "NotSupportedException" error in the the angular libraries. (In a function called NgZoneImpl).
Has the excel export been proven to work with Angular2?
I wasn't able to find a way to properly test this behavior but I was able to take a look at your typings and I suggest going to app/components/igGrid/igniteui.d.ts which contains the typing definitions for the igniteUI library.
Within this file, search for the IgniteUIStatic interface. It will look like this:
interface IgniteUIStatic { DataSource: typeof Infragistics.DataSource;}
Here we can define a new property for the GridExcelExporter. Your interface will now look like this:
interface IgniteUIStatic { DataSource: typeof Infragistics.DataSource;
GridExcelExporter: any}