ag-grid is not rendering all my rows.

Question

I am scratching my head on this one but I am starting to think it may be a bug in ag-grid.

I have a grid that is (inconsistently) only rendering 3 rows of data when I am expecting 5. There is a blank space for the 2 missing rows.

The pager says 5 rows, and the grid seems to know there are 5 rows (when I step through the javascript debugger). In fact, if I sort on the grid, or resize the window such that the grid provides scrollbars, the other 2 rows suddenly appear.

Has anyone seen anything like this?

----More detail but may not be relevant: On this particular page, I have 2 grids. There is a main grid that has links in it, and when you click into a link, it hides the main grid and shows you the other grid. I was concerned that that was coming into play somehow, but I actually have seen this on another page I'm working on that has just 1 grid.

Cochineal

Exactly the same issue I am facing and it's been 4 days, I am trying to make it work. I am making an $http call and the data I get shows only first 3 rows. If I call the $http again (say I have a button on UI to do that) then the data shows. Also if you scroll in the grid it shows the data. Were you able to fix this? – Carabineer

Any one has updated working plunker or stackblitz for this issue. api.refreshview() is deprecated. Tried the api.cellrefresh() and api.renderrowData() – Granulate

Answer 1

Based on various explanations I have seen online, I tried this and it appears to be working:

setTimeout(function ()
{
   $scope.gridOptions.api.refreshView();
}, 0);

I call this after
params.successCallback(pResponse.data);

which invokes the grid's callback

Cochineal

Where was this answer for so many days? :) I don't know if this is anti-pattern or not but my frustration has ended. Thank you! – Carabineer

Glad it helped! – Cochineal

Answer 2

Based on your observations that sorting or resizing the window makes the data appear, I get the feeling that the code needs to force the screen refresh somehow.

this.gridOptions.api.refreshView();

Heaves

Thanks, I forgot to mention I had tried that and it didn't work, although perhaps I need to call it in a different location in the code. – Cochineal

Answer 3

I had a similar issue and discovered that my gridOptions.rowHeight value did not match the actual height of my rows (I had a checkbox element in each row that was pushing the height taller).

As it turns out, the AgGrid row renderer uses absolute pixel location to calculate which rows should be visible. So if your actual row heights result in the rows not being in the exact position they are expected to be in, the renderer will skip them.

Ironically, the positioning code uses actual position, so the rows that do get rendered are positioned as if the skipped rows are still there, resulting in the blank space described by the OP.

Towroy

Answer 4

I found the workaround for this in angular.

In Style.scss (global css file).

.ag-center-cols-container {
  //because in my case we are showing 10 rows by default.
  height: 420px !important; 
  overflow-y: auto;
}

In Component.html

<ag-grid-angular
        class="ag-theme-quartz {{ theme ?? 'primary' }}"
        [gridOptions]="gridOptions"
        [defaultColDef]="defaultColDef"
        [rowData]="rowData"
        [paginationPageSize]="paginationPageSize"
        [animateRows]="true"
        [cacheQuickFilter]="true"
        [pagination]="pagination"
        [paginationPageSizeSelector]="pageSelectorList"
        (gridReady)="onGridReady($event)"
        (paginationChanged)="onPaginationChanged($event)"
        suppressSizeToFit="true"
      />

In Component.ts

public gridOptions: GridOptions = {
    domLayout: 'autoHeight',
    ...otherOptions
  };
private gridApi!: GridApi;
.
.
.

onGridReady(params: GridReadyEvent) {
    this.gridApi = params?.api;
    // others things you want to do on grid ready state
  }

onPaginationChanged(evt: PaginationChangedEvent) {
    if (evt.newPageSize) {
      if (this.gridApi.paginationGetPageSize() <= 10) {
        this.gridApi.setGridOption('domLayout', 'autoHeight');
      } else {
        this.gridApi.setGridOption('domLayout', 'print');
      }
    }
  }

Analysis