CODEWITHSUNDEEP
ag-gridag-grid-angular
Siddharth Vyas
Siddharth Vyas

Reputation: 157

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

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.

Upvotes: 1

Views: 7737

Answers (2)

Milan Nakum
Milan Nakum

Reputation: 41

Simple code-based solution (may not work well with Grouping, test yourself) 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);
    }
};

Upvotes: 4

kamil-kubicki
kamil-kubicki

Reputation: 628

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

Upvotes: 5

Related Questions