UI-Grid - How to select records displayed in the current page using selectAll checkbox

Question

In UI-grid "select All" checkbox, when checked, selects all the records which are visible in the current page as well as other pages.

Question - Whats the way by which we can select rows which are displayed in the current page only.

plunker http://plnkr.co/edit/gHiER0A2Oaia4HMWChcG?p=preview

Tried the api $scope.gridApi.selection.selectAllVisibleRows(); but it does not select the rows which are displayed in the current page Only. If you click the button "Select Visible Rows" and move to next page, the records there are also selected.

Other details of the api selectAllVisibleRows

When checked inside the ui-grid function selectAllVisibleRows. The row.visible returns true for all the rows across all pages.

selectAllVisibleRows: function (evt) {
    if (grid.options.multiSelect === false) {
        return;
     }

    var changedRows = [];
        grid.rows.forEach(function (row) {
        if (row.visible) {
           if (!row.isSelected && row.enableSelection !== false){
              row.setSelected(true);
              service.decideRaiseSelectionEvent( grid, row, changedRows, evt );
           }
        } else {
          if (row.isSelected){
             row.setSelected(false);
             service.decideRaiseSelectionEvent( grid, row, changedRows, evt );
          }
        }});
    service.decideRaiseSelectionBatchEvent( grid, changedRows, evt );
    grid.selection.selectAll = true;
},

Answer 1

Try using for loop Here's plunker link!

Answer 2

To select just the rows in the current grid page, you must add a handler for ui-grid v4.4.9 rowSelectionChangedBatch event when the you register its API. method. As you pointed out, 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;
                    }
                }
            });
        },

Answer 3

onRegisterApi: function(gridApi) {
    gridApi.selection.on.rowSelectionChangedBatch($scope, function() {

        // check for ui-grid version to revert opposite value
        var isAllSelected = gridApi.selection.getSelectAllState();

        if (isAllSelected) { 

            // unselect all rows as select all button selects all rows by default
            gridApi.selection.clearSelectedRows();

            /* Will fetch only grid rows visible on page. It will fetch the correct 
               rows even if you have applied sorting, pagination and filters. */
            var gridRows = this.grid.getVisibleRows();


            // function to set Selected to only visible rows
            angular.forEach(gridRows, function(gridRow) { 
                gridRow.setSelected(true);
            });
        }
        $scope.selectedRows = gridApi.selection.getSelectedRows();
   });
}