title: Ag-grid infinite model pagination server-side
body: <p>I'm attempting to use ag-grid with server side pagination. I updated the code sample from the ag-grid website ( below ). I retrieve the columnDefs in the ngOnInit method but alas neither the columnHeaders appear nor the rowdata. I can debug into the GetRows function and see that the rows are coming back. The total number of records gets set correctly. </p>
  
  <p>If anyone can see why the grid's not showing the columns/rows I'd really appreciate it.</p>
  
  <p>This is the output in the console. 
  ag-Grid.RowNodeBlockLoader: printCacheStatus: activePageLoadsCount = 0, blocks = {"0":{"blockNumber":0,"startRow":0,"endRow":10,"pageStatus":"loaded"}}
  ag-Grid.RowNodeBlockLoader: checkBlockToLoad: no pages to load
  ag-Grid.InfiniteCache: onPageLoaded: page = 0, lastRow = 5</p>
  
  <p>but while the total number of records is returned from the call and sets </p>
  
  <pre><code>import { Component, OnInit, Input } from '@angular/core';
  import {TableMetadata} from "../model/table-metadata";
  import { HttpClient } from "@angular/common/http";
  import { GridOptions } from "ag-grid";
  import { BrxTableService } from '../service/brx-table.service';
  
  @Component({
    selector: 'app-brx-delta-agrid',
    // templateUrl: './brx-delta-agrid.component.html',
    template: `&lt;ag-grid-angular
      #agGrid
      style="width: 100%; height: 100%;"
      id="myGrid"
      class="ag-theme-balham"
      [columnDefs]="columnDefs"
      [components]="components"
      [floatingFilter]="true"
      [debug]="true"
      [enableServerSideSorting]="true"
      [enableServerSideFilter]="true"
      [enableColResize]="true"
      [rowSelection]="rowSelection"
      [rowDeselection]="true"
      [rowModelType]="rowModelType"
      [paginationPageSize]="paginationPageSize"
      [cacheOverflowSize]="cacheOverflowSize"
      [maxConcurrentDatasourceRequests]="maxConcurrentDatasourceRequests"
      [infiniteInitialRowCount]="infiniteInitialRowCount"
      [maxBlocksInCache]="maxBlocksInCache"
      [pagination]="true"
      [cacheBlockSize]="cacheBlockSize"
      [getRowNodeId]="getRowNodeId"
      (gridReady)="onGridReady($event)"
      &gt;&lt;/ag-grid-angular&gt;
  `,
    styleUrls: ['./brx-delta-agrid.component.css'],
    providers: [BrxTableService]
  })
  export class BrxDeltaAgridComponent implements OnInit{
  
    public state = {
      skip: 0,
      take: 5
    };
  
  
    private columnDefs = [];
    private gridApi;
    private gridColumnApi;
  
    private components;
    private rowSelection;
    private rowModelType;
    private paginationPageSize;
    private cacheBlockSize;
    private cacheOverflowSize;
    private maxConcurrentDatasourceRequests;
    private infiniteInitialRowCount;
    private maxBlocksInCache;
    private getRowNodeId;
  
  
    @Input('tableMetadata') tableMetadata:TableMetadata;
  
    constructor(private http: HttpClient, private brxTableService:BrxTableService) {
  
      this.components = {
        loadingRenderer: function(params) {
          if (params.value !== undefined) {
            return params.value;
          } else {
            return '&lt;img src="../assets/loading.gif"&gt;';
          }
        }
      };
      this.rowSelection = "multiple";
      this.rowModelType = "infinite";
      this.paginationPageSize = 10;
      this.cacheBlockSize = 10;
      this.cacheOverflowSize = 2;
      this.maxConcurrentDatasourceRequests = 2;
      this.infiniteInitialRowCount = 1;
      this.maxBlocksInCache = 2;
      this.getRowNodeId = function(item) {
        return item.R_ID;
      };
    }
  
    ngOnInit() {
      this.columnDefs = this.getColumnDefs();
  
    }
  
    onGridReady(params) {
      this.gridApi = params.api;
      this.gridColumnApi = params.columnApi;
  
      this.http
        .get("http://localhost:8080/api/"+ this.tableMetadata.tableName)
        .subscribe(data =&gt; {
          data._embedded[this.tableMetadata.tableName +"s"].forEach(function(data, index) {
            data.R_ID = "R" + (index + 1);
          });
          var dataSource = {
            rowCount: null,
            getRows: function(params) {
              console.log("asking ford " + params.startRow + " to " + params.endRow);
              setTimeout(function() {
  
                let collectionName ='';
                for (var property in data._embedded) {
                  if (property.startsWith("BRX")) {
                    collectionName = property;
                  }
                }
                var dataAfterSortingAndFiltering = sortAndFilter(data._embedded[collectionName], params.sortModel, params.filterModel);
                var rowsThisPage = dataAfterSortingAndFiltering.slice(params.startRow, params.endRow);
                var lastRow = 5; // data.page.totalElements;
                // if (dataAfterSortingAndFiltering.length &lt;= params.endRow) {
                //   lastRow = dataAfterSortingAndFiltering.length;
                // }
                params.successCallback(rowsThisPage, lastRow);
              }, 500 );
            }
          };
          params.api.setDatasource(dataSource);
        });
    }
  
    public getColumnDefs() {
  
      let columnDefs = [];
      for (let i=0; i&lt;this.tableMetadata.columnNames.length; i++) {
        let columnName = this.tableMetadata.columnNames[i];
        let columnDef = {
          headerName: columnName,
          field: columnName,
          width:100
        };
  
        columnDefs.push(columnDef);
      }
  
      return columnDefs;
    }
  }
  
  function sortAndFilter(allOfTheData, sortModel, filterModel) {
    return sortData(sortModel, filterData(filterModel, allOfTheData));
  }
  function sortData(sortModel, data) {
    var sortPresent = sortModel &amp;&amp; sortModel.length &gt; 0;
    if (!sortPresent) {
      return data;
    }
    var resultOfSort = data.slice();
    resultOfSort.sort(function(a, b) {
      for (var k = 0; k &lt; sortModel.length; k++) {
        var sortColModel = sortModel[k];
        var valueA = a[sortColModel.colId];
        var valueB = b[sortColModel.colId];
        if (valueA == valueB) {
          continue;
        }
        var sortDirection = sortColModel.sort === "asc" ? 1 : -1;
        if (valueA &gt; valueB) {
          return sortDirection;
        } else {
          return sortDirection * -1;
        }
      }
      return 0;
    });
    return resultOfSort;
  }
  function filterData(filterModel, data) {
    var filterPresent = filterModel &amp;&amp; Object.keys(filterModel).length &gt; 0;
    if (!filterPresent) {
      return data;
    }
    var resultOfFilter = [];
    for (var i = 0; i &lt; data.length; i++) {
      var item = data[i];
      if (filterModel.age) {
        var age = item.age;
        var allowedAge = parseInt(filterModel.age.filter);
        if (filterModel.age.type == "equals") {
          if (age !== allowedAge) {
            continue;
          }
        } else if (filterModel.age.type == "lessThan") {
          if (age &gt;= allowedAge) {
            continue;
          }
        } else {
          if (age &lt;= allowedAge) {
            continue;
          }
        }
      }
      if (filterModel.year) {
        if (filterModel.year.values.indexOf(item.year.toString()) &lt; 0) {
          continue;
        }
      }
      if (filterModel.country) {
        if (filterModel.country.values.indexOf(item.country) &lt; 0) {
          continue;
        }
      }
      resultOfFilter.push(item);
    }
    return resultOfFilter;
  }
  </code></pre>