ui-grid select all to limit scope to current page

Question

I am looking for an advice on how to proceed and wanted to see if anyone has implemented similar requirement. Please provide some suggestions on the potential approach. I have a angular ui-grid which is changed a little bit to replace OK button with checkboxes. Its working fine to click "select all" which selects all rows in the UI-grid. But I am looking to scope the selection to current page in the pagination. Selection should retain while moving from page to page.
User selects Page 1 "select all checkbox". Then goes to Page 2 and might select "select all checkbox". At this point both Page 1 and Page 2 should be selected. There might be more than the selected 2 pages but only the pages on which select all is checked should be selected.

Thanks for your time in reading and providing suggestions

Here is a Plunker link with the pagination and checkboxes.

    [http://plnkr.co/edit/Ji7gLbfQTohnEj04mYFM?p=preview][1]           

Thanks a lot

Answer 1

Selecting visible rows and limiting selection:

In order to detect the selection of all rows on a page:

enableSelectionBatchEvent in gridOptions should be set to true.

$scope.gridOptions.onRegisterApi = function(gridApi){
      //set gridApi on scope
      $scope.gridApi = gridApi;

     // detect bulk selection
      gridApi.selection.on.rowSelectionChangedBatch($scope,function(rows){
               //logic to save the selected visible rows.

      });

ui.grid.selection public api provides a method called selectAllVisibleRows(event) which selects only the visible rows

Once this selection scope is limited, you can use the saveState feature provided by UI grid
The gridOptions provide property called saveSelection which saves the currently selected rows and defaults to true

Once you navigate to page 2, you should save data like this -

Saving data:

 $scope.state = {};
 $scope.state = $scope.gridApi.saveState.save();

On loading page 2, you should restore the data like this -

Restore Saved data:

$scope.gridApi.saveState.restore( $scope, $scope.state );

Please follow these tutorials for details:
Selecting rows
Save Selection

Answer 2

Yes, the ui-grid v4.4.9 API has a selectAllVisibleRows(event) method. Unfortunately, it considers all rows that are not filtered to be visible. It does not exclude rows that are not rendered on the current grid page. Thus, we are forced to take matters into our own hands:

        onRegisterApi: function (gridApi) {

            gridApi.selection.on.rowSelectionChangedBatch(null, function (rows) {
                var grid = this.grid;
                // you'll need ui-grid v4.4.9 or better 
                // otherwise you'll need to invert getSelectAllState()
                // as explained at https://github.com/angular-ui/ui-grid/issues/5411
                var isAllSelected = grid.api.selection.getSelectAllState();
                // when select all is checked, the default behavior is to select all grid rows on all pages
                // so we have to deselect them all first before we select just the ones on the visible page
                grid.api.selection.clearSelectedRows(null);
                if (isAllSelected) {
                    // select only the rows displayed in the current grid page
                    var startIndex = (grid.options.paginationCurrentPage - 1) * grid.options.paginationPageSize;
                    var endIndex = startIndex + grid.options.paginationPageSize;
                    for (let i = startIndex; i < endIndex; i++) {
                        let row = grid.rows[i];
                        row.isSelected = true;
                    }
                }
            });
        },