1

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

Improve this question
5
  • Did my answer below help? Did you need anything else? Commented Mar 13, 2017 at 12:38
  • Hi thanks for your answer, I didn't try it yet. I'm a student with a part time job, I'm not in enterprise everyday :( . I'll tell you if it worked ! Commented Mar 13, 2017 at 16:09
  • I certainly understand, matey. Great to have you on the Stack Overflow online community. You're going about it the right way if you want to make it in enterprise everyday :). Let me know how it goes when you have a chance. Happy to help! Commented Mar 14, 2017 at 13:50
  • I tried to use you code , with some adjustments to make it work in my code ( gridoption replacement + "i don't use $scope " ) and it's all good. Thanks a lot :) . Now i'll try to get the pdf export aswell , and try to put the button in the ui grid menu panel , instead of nativ "export visible data " buttons Commented Mar 15, 2017 at 9:05
  • I updated my answer to include PDF export and Custom Menu Options. Commented Mar 15, 2017 at 18:49

2 Answers 2

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks for this, I did have to add a 'showHeader: true' to my grid options to get this work work. That was the only real issue, after that I had to re-work some of my unique issues with exporting, for example date formats and also some programatically added columns. But other than that, your code was terrific.
0

I found this to work. Did not like the other approach where you use the uiGridExporterService because that seems to be exporting only the raw data.

onRegisterApi: function (gridApi) {
    gridApi.core.on.rowsVisibleChanged($scope, function () {
        // match export enabled per row to visible property. This is in order to force export only of filtered data.
        gridApi.grid.rows.forEach(function (row) {
            row.exporterEnableExporting = row.visible;
        });
    });
}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.