Dash AG Grid with Infinite Scroll caching "wrong" data when fetching multiple blocks`

Dash Python
1

Hi! I’m using Dash AG Grid with Infinite Scroll & pagination. I have some complex sort/filter options, so I have a separate component. What I have working correctly right now is:

  1. Pick some sort/filter options in the custom component
  2. Click “sort” button
  3. Update getRowsResponse with new rowData, which correctly returns the sorted data for the block size (100 rows)

The bug:
4. Scroll through the pages until Dash fetches another block of data, e.g. rows 100 - 200
5. The Dash AG Grid correctly fetches the next 100 rows of data
6. Change sort/filter options
7. Rows 100-200 are correct, but rows 1 - 100 are incorrect, because The AG Grid is using the cached blocks from the first sort

I’ve also tried to generate an entirely new AG Grid table each time a custom sort/filter is entered in, but since it has the same component ID, I think Dash isn’t properly updating the previous component with the new component.

Is there a way to “force” Dash AG Grid to fetch each block? Or an alternative that I’m missing?

Pseudocode:

# Generate the container component, including the table and misc related components
@callback(
  Output({"type": IDs.TABLE_CONTAINER, "index": MATCH}, "children"),
  Input({"type": IDs.TABLE_CONTAINER, "index": MATCH}, "children")
)
def generate_table(children):
  ...
  table = AgGrid(
    id={"type": IDs.TABLE, "index": MATCH},
    "rowModelType": "infinite",
    "rowData": data.to_dict("records"),
    "columnDefs": column_defs,
    ...
  )
  return [
    component_1,
    table,
  ]


@callback(
  Output({"type": IDs.TABLE, "index": MATCH}, "getRowsResponse"),
  Input({"type": IDs.TABLE, "index": MATCH}, "getRowsRequest"),
  Input({"type": IDs.SORT_TABLE_BUTTON, "index": MATCH}, "n_clicks"),
  # Various user inputs to sort/filter by, etc.
  State({"type": "sort-input-1", "index": MATCH}, "value"),
  State({"type": "sort-input-2", "index": MATCH}, "value"),
  State({"type": "sort-input-3", "index": MATCH}, "value"),
  # more states below, etc.
)
def sort_table(get_rows_request, n_clicks, value_1, value_2, value_3):
  ...
  table_fetch_params = { ... }
  sorted_data, total_row_count = fetch_data(table_fetch_params, value_1, value_2, value_3)
  return {
        "rowData": sorted_data.to_dict("records"),
        "rowCount": total_row_count,
    }
2

Hello @spicycactus,

Sure, check out here:

1 Like
3

Thank you!

In case others read this, I also found this thread which I’m reading right now that might be useful Dash AG Grid - Infinite Row Model - Updating startRow and endRow

4

@jinnyzor I’m doing the same type of clientside callback as mentioned in the other two threads, i.e.

"""
function (component_id) {
        dash_ag_grid.getApi(component_id).purgeInfiniteCache()
        return dash_clientside.no_update
}
"""

But it’s erroring and saying that neither purgeInfiniteCache nor refreshInfiniteCache exist. I’ve console.log()'ed dash_ag_grid.getApi(component_id) which returns a valid value, so I think the getApi call is working. dash_ag_grid.getApi(component_id) does have a infiniteRowModel property, but no purgeInfiniteCache or refreshInfiniteCache

I’m on
dash-ag-grid version: 31.0.1
AG Grid version: 31.0.3

5

For others, I think I found a kind of workaround, which is setting

dashGridOptions = {"maxBlocksInCache": 1}

But @jinnyzor if you happen to know what might be causing the confusing in the post above, would be super helpful! That was I can “refresh” the table only when a button is clicked and keep my maxBlocksInCache number larger, which wouldn’t cause any bugs unless I change my sorting and then click on my button :slight_smile:

6

Hmm, the purge and refresh should be working…

More than likely its an issue with not finding the grid. You’ll need to make sure the grid’s api is being found.