AG Grid Server-side model- What is the maximum number of records that can be rendered in the server side ag grid model? We are facing intermittent browser crash issue when we tried to render 10000 records in a grid
There really should be no limit.
The whole point of the server-side model is that only the rows that are being shown in the viewport (plus a small buffer) should be held on the client-side at any one time.
As the user scrolls (or pages), the grid 'throws away' the rows that are no longer shown,
and replaces them with rows from the server.
Related
I'm virtualizing a large Master-Detail AG-Grid for performance. A rowBuffer can be set at the master and detail level. Through experimentation I know these settings can cause my grid to lock up completely or to work. I cannot find any documentation on how they work.
Documentation says:
By default the grid will render 10 rows before the first visible row
and 10 rows after the last visible row, thus 20 additional rows get
rendered. This is to act as a buffer as on some slower machines and
browsers, a blank space can be seen as the user scrolls.
To change the row buffer, set grid property rowBuffer to the number of
rows you would like to render in addition to the visible rows. Set
rowBuffer=0 to turn off row buffering.
How does rowBuffer function on child rows?
Is there a way in chrome or chromium to determine a performance score for scrolling in the tuning process?
ag-grid-enterprise v20.2.0.
Chrome v73.
I have several columns and a large data set with a full-screen grid. I don't have any custom renders and I'm using batchUpdateRowData() to add to the grid.
When my app loads, I load a history of up-to 20000 records. Each time the grid draws it takes ~150ms (as per the console).
Are there any suggestions for improving the draw performance...or am I expecting too much? Due to the amount of data being loaded at start, each draw is a full re-draw of grid.
Unfortunately I cannot avoid loading these records.
Extra info:
The reason why there is a redraw is because my grid is sorted by timestamp descending and the history is loaded oldest to newest. It's loaded from a persistent topic, so has to be loaded in that order annoyingly.
1) Given that you are loading 20000 rows, your biggest issue would be Ag-Grid trying to load and display all 20000 of them when your component starts up. You should use infinite scrolling, which displays only a fixed amount of rows on your viewport/Ag-grid table, and dynamically removing the 'hidden' ones loading the rest while you scroll along the grid. In short, you have to set the rowModelType property to infinite.
2) This point is regarding your row buffers, and it has a similar concept as the point above.
3) Another alternative to doing infinite scrolling is to use server-side pagination, whereby you only fetch x-number of rows for that given page, and fetch more as you scroll down/to the next page.
4) If possible, try not to disable suppressColumnVirtualization, as the original settings for can have a slight improvement on performance since the non-visible columns are rendered until it is scrolled to.
Since the way in the MS excel when we click on the grid it auto adjust to the size of the data in the grid. Can we have same functionality here also in GWt.
You can program this by hand by getting the offsetWidth of all elements in the dataGrid or whatever you are using and keep track of the max.
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.
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
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();
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.
i have a grid where i need to show the sum of a column at the end of the grid. I use the function
myListGrid.setShowGridSummary(true);
if the grid contains 60 records it will do the summary without problems, if it goes >61 the summary will show no data at all. I believe this problem is caused by the grid paging (not loading all the data at once). Is there a possible workaround for this or maybe a function to load all the data that i'm missing?
myListGrid.setShowAllRecords(true)
Drawing all rows causes longer initial rendering time, but allows smoother vertical scrolling. With a very large number of rows, showAllRows will become too slow.