405_exporting_all_data_complex.ngdoc

@ngdoc overview
@name Tutorial: 405 Exporting All Data With External Pagination
@description

When using built in pagination, the data is fully loaded before export.

For external pagination, use the `exportAllDataPromise` function to load all grid data.  If you get all the
data (for the purposes of exporting), then it makes sense to turn off external pagination and external sorting,
as all the data is now present within AngularJS.

For better performance with the following example, you can choose to load the ui-grid.core.js and specific feature files instead:
<pre>
  <script src="/release/ui-grid.core.min.js"></script>
  <script src="/release/ui-grid.exporter.min.js"></script>
  <script src="/release/ui-grid.pagination.min.js"></script>
  <script src="/release/ui-grid.selection.min.js"></script>
</pre>

@example
This shows combined external pagination and sorting.
<example module="app">
  <file name="app.js">
    var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pagination', 'ui.grid.selection', 'ui.grid.exporter']);

    app.controller('MainCtrl', [
      '$scope', '$http', 'uiGridConstants', function($scope, $http, uiGridConstants) {

        var paginationOptions = {
          sort: null
        };

        $scope.gridOptions = {
          paginationPageSizes: [25, 50, 75],
          paginationPageSize: 25,
          useExternalPagination: true,
          useExternalSorting: true,
          enableGridMenu: true,
          columnDefs: [
            { name: 'name' },
            { name: 'gender', enableSorting: false },
            { name: 'company', enableSorting: false }
          ],
          exporterAllDataFn: function() {
            return getPage(1, $scope.gridOptions.totalItems, paginationOptions.sort)
            .then(function(allData) {
              $scope.gridOptions.useExternalPagination = false;
              $scope.gridOptions.useExternalSorting = false;
              getPage = null;
              return allData;
            });
          },
          onRegisterApi: function(gridApi) {
            $scope.gridApi = gridApi;
            $scope.gridApi.core.on.sortChanged($scope, function(grid, sortColumns) {
              if(getPage) {
                if (sortColumns.length > 0) {
                  paginationOptions.sort = sortColumns[0].sort.direction;
                } else {
                  paginationOptions.sort = null;
                }
                getPage(grid.options.paginationCurrentPage, grid.options.paginationPageSize, paginationOptions.sort)
              }
            });
            gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
              if(getPage) {
                getPage(newPage, pageSize, paginationOptions.sort);
              }
            });
          }
        };

        var getPage = function(curPage, pageSize, sort) {
          var url;
          switch(sort) {
            case uiGridConstants.ASC:
              url = '/data/100_ASC.json';
              break;
            case uiGridConstants.DESC:
              url = '/data/100_DESC.json';
              break;
            default:
              url = '/data/100.json';
              break;
          }

          var _scope = $scope;
          return $http.get(url)
          .then(function (response) {
            var firstRow = (curPage - 1) * pageSize;
            $scope.gridOptions.totalItems = 100;
            $scope.gridOptions.data = response.data.slice(firstRow, firstRow + pageSize);
            return response.data.slice(firstRow, firstRow + pageSize);
          });
        };

        getPage(1, $scope.gridOptions.paginationPageSize);
      }
    ]);
  </file>
  <file name="index.html">
    <div ng-controller="MainCtrl">
      <div ui-grid="gridOptions" ui-grid-pagination ui-grid-selection ui-grid-exporter class="grid"></div>
    </div>
  </file>
  <file name="main.css">
    .grid {
      width: 600px;
    }
  </file>
</example>