How to select rows on infinite row model in ag-grid in angular 4?

5
votes

I have used a custom headerComponent to show a checkbox in the header cell as a select all option in ag-grid with infinite scroll row model. On click of the checkbox i need to be able to select/deselect all rows in the table in the current block of rows. Also on scroll to the end of the table a server call is made to get the next set of rows. The new data loaded should also be selected by default.

I know that the ag-grid does not support the header selection for select all in the infinite row model. How can i do this programmatically? How can i get all the selected rows too.

This is my current code:

Header component : 

import { Component, OnInit,ViewChild, ElementRef } from '@angular/core';
import {IHeaderParams} from "ag-grid/main";
import {IHeaderAngularComp} from "ag-grid-angular";

@Component({
  selector: 'app-customheader',
  templateUrl: './customheader.component.html',
  styleUrls: ['./customheader.component.css']
})
export class CustomheaderComponent implements IHeaderAngularComp{
  private params : any;

  agInit(params:any): void {
    console.log(params);
    this.params = params;
  }

  toggleSelectAll(){

  }

  constructor() { }
}

Header component template : 

<div>
  <div *ngIf="params.displayName == ''" ><input type="checkbox" class="selectAllCheckBox" (click)="toggleSelectAll()"> </div>
  <div>{{params.displayName}}</div>
</div>

Table component : 

constructor(public appServices:AppServices) {
    this.rowData = this.assayDataList;
    this.columnDefs = [
      {
        //headerCheckboxSelection: true,
        //headerCheckboxSelectionFilteredOnly: true,
        checkboxSelection: true,
        width: 40,
        headerComponentParams: CustomheaderComponent
      },
      {
        headerName: "Date/Time",
        field: "createdDate",
        width: 230
      },
      {headerName: 'Assay Name', field: 'assayName', width: 240},
      {headerName: 'Samples', field: 'sampleCount', width: 100}

    ];

    this.gridOptions = {
      rowSelection: 'multiple',
      cacheBlockSize: 30,
      //maxBlocksInCache: 2,
      enableServerSideFilter: false,
      enableServerSideSorting: false,
      rowModelType: 'infinite',
      paginationAutoPageSize: true,
      suppressRowClickSelection: true
      //suppressCellSelection: true
    };

    this.frameworkComponents = { agColumnHeader: CustomheaderComponent };

  }
3
angularag-grid

3 Answers

4
votes

Had this issue as well, there's a callback function for each row node forEachNode((node, index)), you can loop through an set each selection on your select-all event.

 gridApi.forEachNode((row, index) => {
            gridApi.getRowNode(row.id).selectThisNode(true);
        });
3
votes

I have a solution to make the new chunk of the data selected. Not sure how would you be able to propagate the flag for selectAll from CustomheaderComponent to your grid component, so just answering assuming you already have access to selectAll flag inside the component.

When you get the new chunk of data, after you call successCallback, do the selection logic.

params.successCallback(rowsThisPage, this.count);
this.manageRecordsWithSelectAllFlag(rowsThisPage);

Get the id of the new records, grab the RowNode and then use RowNode.selectThisNode function to select it.

private manageRecordsWithSelectAllFlag(rowsThisPage: any[]): void {
  let id;
  if(this.selectedAll) {
    for(let x = 0; x < rowsThisPage.length; x++) {
      id = rowsThisPage[x]['yourIdProperty'];
      this.gridApi.getRowNode(`${id}`).selectThisNode(this.selectedAll);
    }
  }
}
1
votes

Simple solution

Select all:

gridApi.forEachNode(node => {
  node.setSelected(true);
});

Deselect All

gridApi.forEachNode(node => {
  node.setSelected(false);
});