Only select rows from current page using checkbox on header in Ag-grid

Question

I am facing an issue related to Ag-grid is that when we check the checkbox from header then they select all total records (all pages in pagination) I just want to select the current page data for ex: I have 10 records in page number 1 then they should select only 10 records in a grid.

Answer 1

Creating solution for your problem I chose Custom Components, that will help to define custom header renderer to use at the column definition level.

CustomHeader will be in charge of the checkbox display in the grid - full definition is available in example at the end of the post:

  CustomHeader.prototype.init = function(params) { ... }

Checkboxes are shown in first column (using isFirstColumn function) and will be refreshed on each pagination change or checkbox selection (onPaginationChanged onSelectionChanged). This is compulsory, as element needs to be checked only if all rows are selected.

refreshHeader() Redraws the header. Useful if a column name changes, or something else that changes how the column header is displayed.

  // grid definition
  $scope.gridOptions = {
    ...
    defaultColDef: {
      sortable: true,
      filter: true,
      resize: true,
      checkboxSelection: isFirstColumn
    },
    onPaginationChanged: onPaginationChanged,
    onSelectionChanged: onSelectionChanged
  };

  // events handlers
  function onSelectionChanged(event) {
    this.api.refreshHeader();
  }

  function onPaginationChanged(event) {
    this.api.refreshHeader();
  }

  function isFirstColumn(params) {

    return params.column.colId === "make";

    //Previous implementation with detecting
    //first column but slows down the grid
    //var displayedColumns = params.columnApi.getAllDisplayedColumns();
    //var thisIsFirstColumn = displayedColumns[0] === params.column;
    //return thisIsFirstColumn;
  }

Working example AngularJs

Working example Angular5

Answer 2

Simple code-based solution without need for any custom component:

Attach paginationChanged event listener to onGridReady Grid event:

onGridReady = (params) =>
{
    this.gridApi.addEventListener('paginationChanged', (e) =>
        {
            //Reset rows selection based on current page
            this.resetPaginationSelection(this);
        });
};

Event Handler method for handling selectable rows in current page:

resetPaginationSelection = (self) =>
{
    //Deselect previously selected rows to reset selection
    self.gridApi.deselectAll();

    //Initialize pagination data
    let paginationSize = self.gridApi.paginationGetPageSize();
    let currentPageNum = self.gridApi.paginationGetCurrentPage();
    let totalRowsCount = self.gridApi.getDisplayedRowCount();

    //Calculate current page row indexes
    let currentPageRowStartIndex = (currentPageNum * paginationSize);
    let currentPageRowLastIndex = (currentPageRowStartIndex + paginationSize);
    if(currentPageRowLastIndex > totalRowsCount) currentPageRowLastIndex = (totalRowsCount);

    for(let i = 0; i < totalRowsCount; i++)
    {
        //Set isRowSelectable=true attribute for current page rows, and false for other page rows
        let isWithinCurrentPage = (i >= currentPageRowStartIndex && i < currentPageRowLastIndex);
        self.gridApi.getDisplayedRowAtIndex(i).setRowSelectable(isWithinCurrentPage);
    }
};