search

CompositionalIT / feliz-ag-grid

9 stars 4 forks source link

Any idea what would cause "cannot get grid to draw rows when it is in the middle of drawing rows." #9

Closed travis-leith closed 1 year ago

travis-leith commented 1 year ago

Full error:

Uncaught Error: AG Grid: cannot get grid to draw rows when it is in the middle of drawing rows. Your code probably called a grid API method while the grid was in the render stage. To overcome this, put the API call into a timeout, e.g. instead of api.refreshView(), call setTimeout(function() { api.refreshView(); }, 0). To see what part of your code that caused the refresh check this stacktrace.
    at RowRenderer.getLockOnRefresh (ag-grid-community.cjs.js?982d:22864:1)
    at RowRenderer.redrawAfterModelUpdate (ag-grid-community.cjs.js?982d:22796:1)
    at RowRenderer.onPageLoaded (ag-grid-community.cjs.js?982d:22698:1)
    at eval (ag-grid-community.cjs.js?982d:1351:1)
    at Set.forEach (<anonymous>)
    at processEventListeners (ag-grid-community.cjs.js?982d:1346:60)
    at EventService.dispatchToListeners (ag-grid-community.cjs.js?982d:1356:1)
    at EventService.dispatchEvent (ag-grid-community.cjs.js?982d:1335:1)
    at PaginationProxy.onModelUpdated (ag-grid-community.cjs.js?982d:35832:1)
    at eval (ag-grid-community.cjs.js?982d:1351:1)
RowRenderer.getLockOnRefresh @ ag-grid-community.cjs.js?982d:22864
RowRenderer.redrawAfterModelUpdate @ ag-grid-community.cjs.js?982d:22796
RowRenderer.onPageLoaded @ ag-grid-community.cjs.js?982d:22698
eval @ ag-grid-community.cjs.js?982d:1351
processEventListeners @ ag-grid-community.cjs.js?982d:1346
EventService.dispatchToListeners @ ag-grid-community.cjs.js?982d:1356
EventService.dispatchEvent @ ag-grid-community.cjs.js?982d:1335
PaginationProxy.onModelUpdated @ ag-grid-community.cjs.js?982d:35832
eval @ ag-grid-community.cjs.js?982d:1351
processEventListeners @ ag-grid-community.cjs.js?982d:1346
EventService.dispatchToListeners @ ag-grid-community.cjs.js?982d:1356
EventService.dispatchEvent @ ag-grid-community.cjs.js?982d:1335
ClientSideRowModel.refreshModel @ ag-grid-community.cjs.js?982d:44650
eval @ ag-grid-community.cjs.js?982d:1351
processEventListeners @ ag-grid-community.cjs.js?982d:1346
EventService.dispatchToListeners @ ag-grid-community.cjs.js?982d:1356
EventService.dispatchEvent @ ag-grid-community.cjs.js?982d:1335
ColumnController.dispatchNewColumnsLoaded @ ag-grid-community.cjs.js?982d:3941
ColumnController.setColumnDefs @ ag-grid-community.cjs.js?982d:3933
GridApi.setColumnDefs @ ag-grid-community.cjs.js?982d:31118
ComponentUtil.processOnChange @ ag-grid-community.cjs.js?982d:8410
eval @ agGridReact.js?d244:276
setTimeout (async)
AgGridReact.processAsynchronousChanges @ agGridReact.js?d244:273
AgGridReact.processPropsChanges @ agGridReact.js?d244:179
AgGridReact.shouldComponentUpdate @ agGridReact.js?d244:165
checkShouldComponentUpdate @ react-dom.development.js?e444:12525
updateClassInstance @ react-dom.development.js?e444:13039
updateClassComponent @ react-dom.development.js?e444:17432
beginWork @ react-dom.development.js?e444:19073
beginWork$1 @ react-dom.development.js?e444:23940
performUnitOfWork @ react-dom.development.js?e444:22779
workLoopSync @ react-dom.development.js?e444:22707
renderRootSync @ react-dom.development.js?e444:22670
performSyncWorkOnRoot @ react-dom.development.js?e444:22293
eval @ react-dom.development.js?e444:11327
unstable_runWithPriority @ scheduler.development.js?ab12:468
runWithPriority$1 @ react-dom.development.js?e444:11276
flushSyncCallbackQueueImpl @ react-dom.development.js?e444:11322
flushSyncCallbackQueue @ react-dom.development.js?e444:11309
discreteUpdates$1 @ react-dom.development.js?e444:22420
discreteUpdates @ react-dom.development.js?e444:3756
dispatchDiscreteEvent @ react-dom.development.js?e444:5889

I don't think I am doing anything special here. I have 2 grids, on 2 different tabs. I click a button which is located in the first grid, which opens the other tab and populates content on the other grid. Switching back to the first tab raises this error.

travis-leith commented 1 year ago

seems to be related: https://stackoverflow.com/questions/60716050/aggrid-server-side-paging-cannot-get-grid-to-draw-rows-when-it-is-in-the-middle#:~:text=ERROR%20Error%3A%20%22ag%2DGrid,timeout%2C%20eg%20instead%20of%20api.

travis-leith commented 1 year ago

Seems to be something to do with DateTime and converting to string. If I remove all valueFormatters for DateTime columns, everything works. If I try to convert to string in the valueGetter instead of the valueFormatter, I get a different error:

Uncaught TypeError: Cannot read properties of undefined (reading 'offset')
    at toString (Date.js?22b6:133:1)
    at GridHelpers_dateTimeString (DeskOrders.fs?a349:86:20)
    at eval (DeskOrders.fs?a349:186:47)
    at ExpressionService.evaluate (ag-grid-community.cjs.js?982d:32392:1)
    at ValueService.executeValueGetter (ag-grid-community.cjs.js?982d:28459:1)
    at ValueService.getValue (ag-grid-community.cjs.js?982d:28288:1)
    at CellComp.getValue (ag-grid-community.cjs.js?982d:21414:1)
    at CellComp.getValueAndFormat (ag-grid-community.cjs.js?982d:21397:1)
    at new CellComp (ag-grid-community.cjs.js?982d:20699:1)
    at RowComp.newCellComp (ag-grid-community.cjs.js?982d:42687:1)

Incidentally, if I navigate to a 3rd empty tab with no grid render at all, then back to first tab, everything works fine. So I don't know if this bug is in this repo, or in the underlying agGrid repo.

theprash commented 1 year ago

if I navigate to a 3rd empty tab with no grid render at all, then back to first tab

This makes me wonder if setting a different AgGrid.key for the two grids would fix the problem. I believe this sets the React key which only needs to be unique amongst its siblings (and in this case different in the two grids as well).

travis-leith commented 1 year ago

This worked! Thanks. Although I don't understand why and searching this is difficult because results for "aggrid key" all refer to a license key.

theprash commented 1 year ago

Try this instead: https://reactjs.org/docs/lists-and-keys.html

My understanding is that every React element has a key and if not specified, they are generated automatically. In most cases that works fine. The whole "path" of keys (from the root element through the descendants down to the element), uniquely determines the element on the page.

Sometimes, if a component appears in the same position as one before it, it will have a the same auto-generated key. And if it's a stateful component like ag-grid, then the wrong state will be carried over to the new element and things will go wrong.

It's best to give every ag-grid in your app a unique key. And it's also best for performance to give list elements a key based that uniquely identifies the list item, if possible.