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.
Related
I have implemented ag-grid in angular application.
ag-grid version: 21.0.0
angular version: 6
I am having a grid, which has 108 columns and 200 rows.
Around 50 of those columns are having separate cell renderers.
I am copying certain column values from a cell and pasting them into a column for all the rows.
On processCellFromClipboard event, I expected all the rows refresh method will be triggered. But it didn't happen.
But the cell renderer is refreshed only for the rows which are visible in the DOM at that particular time. Only for 20 rows cell renderer is getting triggered. For others it is not getting triggered.
Is there any option to refresh/re-render for all the rows which are not visible by that time?
agGrid has a rowBuffer attribute that handles the number of rows that the grid can actually interact with at a time.
If you are using pagination you can easily set it to the current page size, otherwise set it to the number you want or the one that you display at a time.
[If that didn't help please post more code and ping me]
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?
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.
So it turns out that we'd like to use fixed height mode, because it's faster and it doesn't constantly try to update the treeview — we saw a significant decrease in CPU use with a table that, unfortunately, may contain a few thousand rows and some 20-ish columns.
Oddly enough, merely turning off autosizing on all the columns doesn't help, one needs to set fixed height mode too.
But of course, the cell contents are of varying length (they're text and numbers), and it would be nice to update the column size time to time (ie. when I know they should be updated, and not all the time like autosizing unfortunately does).
So what I need is being able to figure out that the newly inserted row / cell has insufficient size (I guess something to do with the GtkCellRendererText and Pango will come handy), and then resize the affected GtkTreeViewColumn using set_fixed_width. I've looked at the source of GTK+ to see what they do when autosizing, but couldn't really make head or tails of it. My main problem here is getting to the text layout and/or the cell size requirements from a given TreeView/ListStore/iter combination.
I use perl-Gtk2, but answers are welcome in any commonly used language.