Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
190
igGrid With Angular 2
posted

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

Parents
No Data
Reply
  • 2525
    posted

    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.

    app.zip
Children