Dash AG Grid - Infinite Row Model - Updating startRow and endRow

Dash Python
21

To close down the topic. I tried to implement my previous reply with maxBlocksInCache: 1 to my bigger app. It works great with pagination but without it it seems like there is more than one block in cache despite the maxBlocksInCache parameter and the app breaks again (in MRE it works so there might be some naother issue breaking it). BUT! It works great using @jinnyzor API solution so I marked it as a solution. Moreover if you want to utilize cache it is the only working solution.

One more thing I noticed which was not obvious in example since Afghanistan had only 2 rows. When you swap Afghanistan for i.e. Germany you see that when dataframe change your scrolling position is not reset. So I upgraded the clientside callback a litle to utilize scrollTo.

from dash import Dash, html, Input, Output, no_update, State, ctx
from dash_ag_grid import AgGrid
import dash_mantine_components as dmc
import pandas as pd


df = pd.read_csv(
        "https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
    )
app = Dash()

# basic columns definition with column defaults
columnDefs = [{"field": c} for c in df.columns]

app.layout = html.Div(
    [
        AgGrid(
            id="grid",
            columnDefs=columnDefs,
            defaultColDef={"resizable": True, "sortable": True, "filter": True},
            rowModelType="infinite",
            dashGridOptions={
                # "pagination": True
                "maxBlocksInCache": 10,
            },
        ),
        dmc.ChipGroup(
            [dmc.Chip(x, value=x) for x in ["United States", "Germany"]],
            value="United States",
            id="filters",
        ),
        html.Button(id="fire-filters", children="Fire Filters"),
    ]
)


@app.callback(
    Output("grid", "getRowsResponse"),
    Input("grid", "getRowsRequest"),
    State("filters", "value"),
)
def update_grid(request, filters_data):
    if request:
        filtered_df = df[df['country'] == filters_data]

        partial = filtered_df.iloc[request["startRow"]: request["endRow"]]
        return {"rowData": partial.to_dict("records"), "rowCount": len(filtered_df.index)}


app.clientside_callback(
    """function (n) {
        dash_ag_grid.getApi('grid').purgeInfiniteCache()
        return {"rowIndex": 0, "rowPosition": "top"}
    }""",
    Output("grid", "scrollTo"),
    Input("fire-filters", "n_clicks"),
    prevent_initial_call=True
)


if __name__ == '__main__':
    app.run(debug=True)

I have to say 2.2.0 was a fantastic upgrade for AG Grid when you are using infinite row model!

3 Likes