Alomoni
Alomoni

Reputation: 123

How to integrate IgniteUI igGrid (Infragistics) with AngularJS and export to Excel

I am new to AngularJS and IgniteUI. So far, I could not find any good example to integrate infragistics IgniteUI with AngularJS. The samples I have found does not work.

Based on the sample I have integrated the following files

<script src="~/Scripts/jquery-2.0.0.min.js"></script> 
<script src="~/Scripts/jquery-ui-1.12.0.js"></script>
<script src="~/Scripts/angular.min.js"></script>    

<script src="~/Scripts/Infragistics/js/infragistics.core.js"></script> 
<script src="~/Scripts/Infragistics/js/infragistics.lob.js"></script>    

<script src="~/Scripts/Infragistics/js/extensions/igniteui-angular.js"></script>

<script src="~/App/igniteUIApp.js"></script>

<div ng-app="igniteUIApp" ng-controller="SampleController">

    <ig-grid id="grid1" 
             data-source="employees" 
             primary-key="EmployeeID" 
             auto-generate-columns="true">
    </ig-grid>
</div>

I would like to see the following

Step 1 How to populate the igGrid with $scope.datasource?

Step 2 How to export the igGrid data to Excel?

Upvotes: 1

Views: 333

Answers (1)

dkamburov
dkamburov

Reputation: 394

I've prepared a fiddle demonstrating this - http://jsfiddle.net/dkamburov/g34wy1mc/2/

Assigning some data into scope property is enough to populate the grid data - $scope.data = angular.copy(northwindProducts.results);

Make sure you have all the needed references for the excel exporter and then all you need is $.ig.GridExcelExporter.exportGrid($("#grid1"));

Upvotes: 1

Related Questions