React AG-Grid columns flashing until is fully load - ag-grid

I am using Ag-grid with callback for onGridReady to add some additional columns. Every time when the grid is loading there are some seconds until columns fully fit the screen. Can I somehow catch the event when the columns are completely ready? Thanks in advance!

Related

Copy paste is not triggering cell renderer for all the rows

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]

How to increase ag-grid drawing performance

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.

ag-grid is not rendering all my rows.

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.

smartGWT grid not showing summary (need to load all records?)

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.

How can I force a ListBox to fill entire free area?

I put a ListBox into a tabele cell an want it to ocupy the whole cell (width="100% height="100%") and show as many rows as possible but:
not specifyng setVisibleItemCount causes to show a big dropdownbox (i want a list)
specifying setVisibleCout makes listbox to ignore height (it takes as much place as it needet to exacly display n rows)
i there a workaround ? (in Swing a number of wisible rows ia a funcion of height and I'd like it this way in gwt).
Thanks in advance
ListBox is a native GWT component, and that's the way it works. If you're using GWT 2.1 you can create your own CellRenderer
You could approximate a solution by calculating how many items should be shown based on the height you want.