Export grid data #54 fix - feature added

Author: Alexander Zhuk

Diff for: README.md

@@ -17,6 +17,7 @@ Demo Angular UI Router: http://angular-data-grid.github.io/demo/bootstrap/ui-rou
  - Built-in sync with browser address bar (URL), so you can copy-n-paste sorting/filtering/pagination results URL and open it in other browser / send to anyone - even if pagination / filtering are done on a client-side. [See details](#url-synchronization)
  - Support of [Angular UI Router](https://github.com/angular-ui/ui-router) navigation.
  - Optional support of fixed header table: [Bootstrap Demo](http://angular-data-grid.github.io/demo/fixed-header/bootstrap-grid.html) [Material Design Demo](http://angular-data-grid.github.io/demo/fixed-header/angular-md-grid.html)
+ - Optional support of CSV data exports: [Demo](http://angular-data-grid.github.io/demo/bootstrap/)
  - Unlike most part of other Angular DataGrids, we intentionally use non-isolated scope of the directive to maximize flexibility, so it can be easily synchronized with any data changes inside your controller. 
  NOTE! With great power comes great responsibility, so use non-isolated API wisely.
 

Diff for: demo/bootstrap/index.html

@@ -30,7 +30,8 @@
 <div class="container">
     <div class="margin-bottom-basic">
         <h3>Angular Data Grid sample using out-of-box Bootstrap styling</h3>
-        Features enabled: sorting, filtering (using both in-grid and external controls), sync with browser URLs, pagination and items-per-page functionality.
+        Features enabled: sorting, filtering (using both in-grid and external controls), sync with browser URLs,
+        pagination and items-per-page functionality, plus optional plugin for CSV exports.
         Angular UI Datepicker used for date controls, although you can use any other framework, plugin or styling.
         <a href="https://github.com/angular-data-grid/angular-data-grid.github.io" target="_blank">Project GitHub</a>
     </div>
@@ -88,7 +89,7 @@ <h4>Additional Demos</h4>
                                ng-focus="gridActions.filter()"
                                show-weeks="false"
                                close-text="Close"/>
-           <span class="input-group-btn">
+                        <span class="input-group-btn">
                             <label for="dateFromFilter" class="btn btn-default">
                                 <i class="fa fa-calendar"></i></label>
                           </span>
@@ -118,7 +119,7 @@ <h4>Additional Demos</h4>
                                ng-focus="gridActions.filter()"
                                show-weeks="false"
                                close-text="Close">
-                 <span class="input-group-btn">
+                        <span class="input-group-btn">
                             <label for="dateToInput" class="btn btn-default">
                                 <i class="fa fa-calendar"></i></label>
                           </span>
@@ -131,6 +132,13 @@ <h4>Additional Demos</h4>
         </div>
     </div>
     <hr>
+    <div class="text-right">
+        <button class="btn btn-default" ng-click="exportToCsv(gridOptions.data)">Export all data to CSV <i
+                class="fa fa-download"></i></button>
+        <button class="btn btn-default" ng-click="exportToCsv(gridOptions.grid.filtered)">Export filtered data to CSV <i
+                class="fa fa-download"></i></button>
+    </div>
+    <hr>
     <div class="row">
         <div class="col-md-12">
             <div grid-data id='test' grid-options="gridOptions" grid-actions="gridActions">
@@ -151,7 +159,9 @@ <h4>Additional Demos</h4>
                             </div>
                             <div class="form-group items-per-page">
                                 <label for="itemsOnPageSelect1">Items per page:</label>
-                                <select id="itemsOnPageSelect1" class="form-control input-sm" ng-init="paginationOptions.itemsPerPage = '10'" ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
+                                <select id="itemsOnPageSelect1" class="form-control input-sm"
+                                        ng-init="paginationOptions.itemsPerPage = '10'"
+                                        ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
                                     <option>10</option>
                                     <option>25</option>
                                     <option>50</option>
@@ -208,7 +218,8 @@ <h4>Additional Demos</h4>
                     </div>
                     <div class="form-group items-per-page">
                         <label for="itemsOnPageSelect2">Items per page:</label>
-                        <select id="itemsOnPageSelect2" class="form-control input-sm" ng-init="paginationOptions.itemsPerPage = '10'"
+                        <select id="itemsOnPageSelect2" class="form-control input-sm"
+                                ng-init="paginationOptions.itemsPerPage = '10'"
                                 ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
                             <option>10</option>
                             <option>25</option>
@@ -224,14 +235,16 @@ <h4>Additional Demos</h4>
     <div>
         <button class="btn btn-info margin-bottom-basic" ng-click="showCode = !showCode">CodePen</button>
         <div ng-show="showCode">
-            <p data-height="768" data-theme-id="21603" data-slug-hash="xZddZm" data-default-tab="html" data-user="AngularDataGrid" class='codepen'>See the Pen <a
-                    href='http://codepen.io/AngularDataGrid/pen/xZddZm/'>xZddZm</a> by AngularDataGrid (<a href='http://codepen.io/AngularDataGrid'>@AngularDataGrid</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
+            <p data-height="768" data-theme-id="21603" data-slug-hash="xZddZm" data-default-tab="html"
+               data-user="AngularDataGrid" class='codepen'>See the Pen <a
+                    href='http://codepen.io/AngularDataGrid/pen/xZddZm/'>xZddZm</a> by AngularDataGrid (<a
+                    href='http://codepen.io/AngularDataGrid'>@AngularDataGrid</a>) on <a href='http://codepen.io'>CodePen</a>.
+            </p>
             <script async src="//assets.codepen.io/assets/embed/ei.js"></script>
         </div>
     </div>
     <hr>
 </div>
-</body>
 <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
 <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
@@ -240,6 +253,7 @@ <h4>Additional Demos</h4>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-messages.min.js"></script>
 <script src="../../dist/pagination.min.js"></script>
 <script src="../../dist/dataGrid.min.js"></script>
+<script src="../../dist/JSONToCSVConvertor.min.js"></script>
 <script src="js/demoApp.js"></script>
-
+</body>
 </html>

Diff for: demo/bootstrap/js/demoApp.js

@@ -1,5 +1,5 @@
 angular.module('myApp', ['ui.bootstrap', 'dataGrid', 'pagination'])
-    .controller('myAppController', ['$scope', 'myAppFactory', function ($scope, myAppFactory) {
+    .controller('myAppController', ['$scope', 'myAppFactory', '$filter', function ($scope, myAppFactory, $filter) {
 
         $scope.gridOptions = {
             data: [],
@@ -10,6 +10,19 @@ angular.module('myApp', ['ui.bootstrap', 'dataGrid', 'pagination'])
             $scope.gridOptions.data = responseData.data;
         });
 
+        $scope.exportToCsv = function (currentData) {
+            var exportData = [];
+            currentData.forEach(function (item) {
+                exportData.push({
+                    'Code': item.code,
+                    'Date Placed': $filter('date')(item.placed, 'shortDate'),
+                    'Status': item.statusDisplay,
+                    'Total': item.total.formattedValue
+                });
+            });
+            JSONToCSVConvertor(exportData, 'Export', true);
+        }
+
     }])
     .factory('myAppFactory', function ($http) {
         return {