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.

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

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();

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.