Ui Grid Angular JS : Export all Visible Data when using Built in Pagination

Question

I'm working on a website using angularJS and UI Grid. I display some datas i receive from my backend , with ui grid. Since i have a lot of data, i use the ui grid paganation. I can filter and hide columns.

When i try to "export all visible data" , only the current page is exported.

It may be normal since other pages aren't visible, but i would like to find a solution to export all my filtered data, and not only the current page .

I can't find something like this in Ui Grid Docs

Thanks

Answer 1

In answer to your question, this is how you'd export not only your current page, but all your filtered data.

var app = angular.module('app', ['ui.grid', 'ui.grid.pagination', 'ui.grid.exporter']);
app.controller('MainCtrl', ['$scope', 'uiGridExporterService', 'uiGridExporterConstants',
  function($scope, uiGridExporterService, uiGridExporterConstants) {
    $scope.export = function() {
      var exportData = [];
      var exportColumnHeaders = $scope.gridOptions.showHeader ? uiGridExporterService.getColumnHeaders($scope.gridApi.grid, uiGridExporterConstants.VISIBLE) : [];
      angular.forEach($scope.gridApi.grid.rows, function(row) {
        if (row.visible) {
          var values = [];
          angular.forEach(exportColumnHeaders, function(column) {
            var value = row.entity[column.name];
            values.push({
              value: value
            });
          });
          exportData.push(values);
        }
      });
      var csvContent = uiGridExporterService.formatAsCsv(exportColumnHeaders, exportData, ',');
      uiGridExporterService.downloadFile($scope.gridOptions.exporterCsvFilename, csvContent, $scope.gridOptions.exporterOlderExcelCompatibility);
    };
    $scope.gridOptions = {
      enableFiltering: true,
      paginationPageSizes: [5, 10, 15],
      paginationPageSize: 5,
      exporterCsvFilename: 'filteredData.csv',
      onRegisterApi: function(gridApi) {
        $scope.gridApi = gridApi;
      },
      columnDefs: [{name: 'FirstName'}, {name: 'LastName'}, {name: 'Job'}],
      data: [{"FirstName": "Sonny", "LastName": "Jayet", "Job": "Stack Overflow User"},
             {"FirstName": "Tim", "LastName": "Harker", "Job": "Stack Overflow User"},
             {"FirstName": "Sonny", "LastName": "Jayet", "Job": "Stack Overflow User"},
             {"FirstName": "Tim", "LastName": "Harker", "Job": "Stack Overflow User"},
             {"FirstName": "Sonny", "LastName": "Jayet", "Job": "Stack Overflow User"},
             {"FirstName": "Tim", "LastName": "Harker", "Job": "Stack Overflow User"},
             {"FirstName": "Sonny", "LastName": "Jayet", "Job": "Stack Overflow User"},
             {"FirstName": "Tim", "LastName": "Harker", "Job": "Stack Overflow User"},
             {"FirstName": "Sonny", "LastName": "Jayet", "Job": "Stack Overflow User"},
             {"FirstName": "Tim", "LastName": "Harker", "Job": "Stack Overflow User"},
             {"FirstName": "Sonny", "LastName": "Jayet", "Job": "Stack Overflow User"},
             {"FirstName": "Tim", "LastName": "Harker", "Job": "Stack Overflow User"},
             {"FirstName": "Sonny", "LastName": "Jayet", "Job": "Stack Overflow User"},
             {"FirstName": "Tim", "LastName": "Harker", "Job": "Stack Overflow User"},
             {"FirstName": "Sonny", "LastName": "Jayet", "Job": "Stack Overflow User"},
             {"FirstName": "Tim", "LastName": "Harker", "Job": "Stack Overflow User"},
             {"FirstName": "Sonny", "LastName": "Jayet", "Job": "Stack Overflow User"},
             {"FirstName": "Tim", "LastName": "Harker", "Job": "Stack Overflow User"},
             {"FirstName": "Sonny", "LastName": "Jayet", "Job": "Stack Overflow User"},
             {"FirstName": "Tim", "LastName": "Harker", "Job": "Stack Overflow User"},
             {"FirstName": "Sonny", "LastName": "Jayet", "Job": "Stack Overflow User"}]
    };
  }
]);

button {
  margin-bottom: 10px;
}

div[ui-grid] {
  height: 280px;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.css" />
<div ng-app="app" ng-controller="MainCtrl">
  <button ng-click="export()">Export Filtered &amp; Paged Grid</button>
  <div ui-grid="gridOptions" ui-grid-pagination ui-grid-exporter class="grid"></div>
</div>

UPDATE: PDF export, and custom grid menu options.

Code to decide on PDF or CSV export:

var content;
if (format=="csv") {
  content = uiGridExporterService.formatAsCsv(exportColumnHeaders, exportData, ',');
  uiGridExporterService.downloadFile($scope.gridOptions.exporterCsvFilename, content, $scope.gridOptions.exporterOlderExcelCompatibility);
} else {
  content = uiGridExporterService.prepareAsPdf($scope.gridApi.grid, exportColumnHeaders, exportData);
  pdfMake.createPdf(content).open();
}

Grid option code to hide existing menu options and add custom menu options.

enableGridMenu: true,
exporterMenuCsv: false,
exporterMenuPdf: false,
gridMenuCustomItems: [{
  title: 'CSV Export (Filtered & Paged Grid)',
  action: function() {
    $scope.export('csv');
  },
  order: 210
}, {
  title: 'PDF Export (Filtered & Paged Grid)',
  action: function() {
    $scope.export('pdf');
  },
  order: 250
}],

Here's a working Plunker, http://plnkr.co/edit/xBvc4094CIu6oGDZXZx7?p=preview.

Let me know if you have any further questions.