Skip to content

Commit d5e58a2

Browse files
AndreyChaykoAndreyChayko
committed
Merge remote-tracking branch 'origin/master'
2 parents 3aa5d7d + 64bd85c commit d5e58a2

File tree

7 files changed

+960
-1169
lines changed

7 files changed

+960
-1169
lines changed

Diff for: ‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ Demo Angular UI Router: http://angular-data-grid.github.io/demo/bootstrap/ui-rou
1717
- 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)
1818
- Support of [Angular UI Router](https://github.com/angular-ui/ui-router) navigation.
1919
- 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)
20+
- Optional support of CSV data exports: [Demo](http://angular-data-grid.github.io/demo/bootstrap/)
2021
- 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.
2122
NOTE! With great power comes great responsibility, so use non-isolated API wisely.
2223

Diff for: ‎demo/bootstrap/index.html

+25-9
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,10 @@
3030
<div class="container">
3131
<div class="margin-bottom-basic">
3232
<h3>Angular Data Grid sample using out-of-box Bootstrap styling</h3>
33-
Features enabled: sorting, filtering (using both in-grid and external controls), sync with browser URLs, pagination and items-per-page functionality.
33+
Features enabled: sorting, filtering (using both in-grid and external controls), sync with browser URLs,
34+
pagination and items-per-page functionality, <a
35+
href="https://angular-data-grid.github.io/dist/JSONToCSVConvertor.js" target="_blank">optional plugin</a>
36+
for CSV exports.
3437
Angular UI Datepicker used for date controls, although you can use any other framework, plugin or styling.
3538
<a href="https://github.com/angular-data-grid/angular-data-grid.github.io" target="_blank">Project GitHub</a>
3639
</div>
@@ -88,7 +91,7 @@ <h4>Additional Demos</h4>
8891
ng-focus="gridActions.filter()"
8992
show-weeks="false"
9093
close-text="Close"/>
91-
<span class="input-group-btn">
94+
<span class="input-group-btn">
9295
<label for="dateFromFilter" class="btn btn-default">
9396
<i class="fa fa-calendar"></i></label>
9497
</span>
@@ -118,7 +121,7 @@ <h4>Additional Demos</h4>
118121
ng-focus="gridActions.filter()"
119122
show-weeks="false"
120123
close-text="Close">
121-
<span class="input-group-btn">
124+
<span class="input-group-btn">
122125
<label for="dateToInput" class="btn btn-default">
123126
<i class="fa fa-calendar"></i></label>
124127
</span>
@@ -131,6 +134,13 @@ <h4>Additional Demos</h4>
131134
</div>
132135
</div>
133136
<hr>
137+
<div class="text-right">
138+
<button class="btn btn-default" ng-click="exportToCsv(gridOptions.data)">Export all data to CSV <i
139+
class="fa fa-download"></i></button>
140+
<button class="btn btn-default" ng-click="exportToCsv(gridOptions.grid.filtered)">Export filtered data to CSV <i
141+
class="fa fa-download"></i></button>
142+
</div>
143+
<hr>
134144
<div class="row">
135145
<div class="col-md-12">
136146
<div grid-data id='test' grid-options="gridOptions" grid-actions="gridActions">
@@ -151,7 +161,9 @@ <h4>Additional Demos</h4>
151161
</div>
152162
<div class="form-group items-per-page">
153163
<label for="itemsOnPageSelect1">Items per page:</label>
154-
<select id="itemsOnPageSelect1" class="form-control input-sm" ng-init="paginationOptions.itemsPerPage = '10'" ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
164+
<select id="itemsOnPageSelect1" class="form-control input-sm"
165+
ng-init="paginationOptions.itemsPerPage = '10'"
166+
ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
155167
<option>10</option>
156168
<option>25</option>
157169
<option>50</option>
@@ -208,7 +220,8 @@ <h4>Additional Demos</h4>
208220
</div>
209221
<div class="form-group items-per-page">
210222
<label for="itemsOnPageSelect2">Items per page:</label>
211-
<select id="itemsOnPageSelect2" class="form-control input-sm" ng-init="paginationOptions.itemsPerPage = '10'"
223+
<select id="itemsOnPageSelect2" class="form-control input-sm"
224+
ng-init="paginationOptions.itemsPerPage = '10'"
212225
ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
213226
<option>10</option>
214227
<option>25</option>
@@ -224,14 +237,16 @@ <h4>Additional Demos</h4>
224237
<div>
225238
<button class="btn btn-info margin-bottom-basic" ng-click="showCode = !showCode">CodePen</button>
226239
<div ng-show="showCode">
227-
<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
228-
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>
240+
<p data-height="768" data-theme-id="21603" data-slug-hash="xZddZm" data-default-tab="html"
241+
data-user="AngularDataGrid" class='codepen'>See the Pen <a
242+
href='http://codepen.io/AngularDataGrid/pen/xZddZm/'>xZddZm</a> by AngularDataGrid (<a
243+
href='http://codepen.io/AngularDataGrid'>@AngularDataGrid</a>) on <a href='http://codepen.io'>CodePen</a>.
244+
</p>
229245
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
230246
</div>
231247
</div>
232248
<hr>
233249
</div>
234-
</body>
235250
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
236251
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
237252
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
@@ -240,6 +255,7 @@ <h4>Additional Demos</h4>
240255
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-messages.min.js"></script>
241256
<script src="../../dist/pagination.min.js"></script>
242257
<script src="../../dist/dataGrid.min.js"></script>
258+
<script src="../../dist/JSONToCSVConvertor.js"></script>
243259
<script src="js/demoApp.js"></script>
244-
260+
</body>
245261
</html>

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

+14-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
angular.module('myApp', ['ui.bootstrap', 'dataGrid', 'pagination'])
2-
.controller('myAppController', ['$scope', 'myAppFactory', function ($scope, myAppFactory) {
2+
.controller('myAppController', ['$scope', 'myAppFactory', '$filter', function ($scope, myAppFactory, $filter) {
33

44
$scope.gridOptions = {
55
data: [],
@@ -10,6 +10,19 @@ angular.module('myApp', ['ui.bootstrap', 'dataGrid', 'pagination'])
1010
$scope.gridOptions.data = responseData.data;
1111
});
1212

13+
$scope.exportToCsv = function (currentData) {
14+
var exportData = [];
15+
currentData.forEach(function (item) {
16+
exportData.push({
17+
'Code': item.code,
18+
'Date Placed': $filter('date')(item.placed, 'shortDate'),
19+
'Status': item.statusDisplay,
20+
'Total': item.total.formattedValue
21+
});
22+
});
23+
JSONToCSVConvertor(exportData, 'Export', true);
24+
}
25+
1326
}])
1427
.factory('myAppFactory', function ($http) {
1528
return {

0 commit comments

Comments
 (0)