title: How to select rows on infinite row model in ag-grid in angular 4?
body: <p>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. </p>
  
  <p>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. </p>
  
  <p>This is my current code: </p>
  
  <p>Header component : </p>
  
  <pre><code>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() { }
  }
  </code></pre>
  
  <p>Header component template : </p>
  
  <pre><code>&lt;div&gt;
    &lt;div *ngIf="params.displayName == ''" &gt;&lt;input type="checkbox" class="selectAllCheckBox" (click)="toggleSelectAll()"&gt; &lt;/div&gt;
    &lt;div&gt;{{params.displayName}}&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Table component : </p>
  
  <pre><code>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 };
  
    }
  </code></pre>