Updating selectedRows in dash-ag-grid 31.0.0

Hi,

I have an AgGrid without data defined in layout and I update the rowData and selectedRows in a callback like in the example below:

from dash import Dash, html, Output, Input

import dash_ag_grid as dag
import pandas as pd

df = pd.DataFrame(
    dict(
        A=[1,2,3],
        B=[3,4,5]
    )
)

app = Dash(prevent_initial_callbacks=True)

app.layout = html.Div(
    [
        html.Button(id="btn", children="Select first row"),
        dag.AgGrid(
            id="aggrid",
            dashGridOptions={
                "rowSelection": "single",
                "suppressRowClickSelection": True,
            },
            columnDefs=[
                {
                    "headerName": "A",
                    "field": "A",
                    "showDisabledCheckboxes": True,
                    "checkboxSelection": True,
                },
                {
                
                    "headerName": "B",
                    "field": "B",
                },
            ]
        )
    ]
)

@app.callback(
    Output("aggrid", "rowData"),
    Output("aggrid", "selectedRows"),
    Input("btn", "n_clicks"),
)
def update_selected_rows(n_clicks):
    return [df.to_dict("records"), df.head(1).to_dict("records")]

if __name__ == "__main__":
    app.run_server(debug=True)

The problem is that when I run this with

  • dash = “2.14.2”
  • dash-ag-grid = “31.0.0”

the selected rows passed in the callback do not show as selected.
image

It works as expected when using

  • dash = “2.13.0”
  • dash-ag-grid = “2.4.0”

image

Hello @valsorim,

It looks like the grid made applying the rowData as an asynchronous process vs sync, which means passing the data and selecting a row happens at the same time instead of rowData update → selectedRows implemented.

To make it so that this doesnt happen, you need to use rowTransaction and pass async: False to it, here is an example:

from dash import Dash, html, Output, Input

import dash_ag_grid as dag
import pandas as pd

df = pd.DataFrame(
    dict(
        A=[1, 2, 3],
        B=[3, 4, 5]
    )
)

app = Dash(prevent_initial_callbacks=True)

app.layout = html.Div(
    [
        html.Button(id="btn", children="Select first row"),
        dag.AgGrid(
            id="aggrid",
            dashGridOptions={
                "rowSelection": "single",
                "suppressRowClickSelection": True,
            },
            columnDefs=[
                {
                    "headerName": "A",
                    "field": "A",
                    "showDisabledCheckboxes": True,
                    "checkboxSelection": True,
                },
                {

                    "headerName": "B",
                    "field": "B",
                },
            ],
        )
    ]
)


@app.callback(
    Output("aggrid", "rowTransaction"),
    Output("aggrid", "selectedRows"),
    Input("btn", "n_clicks"),
)
def update_selected_rows(n_clicks):
    return {'add': df.to_dict("records"), 'async': False}, df.head(1).to_dict("records")


if __name__ == "__main__":
    app.run_server(debug=True)

With the above code, you are adding all of the data, to the grid. For your purposes, I dont know if this 100% works for you.

2 Likes

Wow, thanks for the quick reply, @jinnyzor! It works perfect for me.

If you keep hitting the button, it will stack, you’ll have to determine if that’s what you want, or if you want to clear the data first.

Thanks, I actually had to switch back to 2.4.0 for now because of another problem with selectedRows I encountered. I will try to create a minimal example when I have time.

Ok, let us know what you encounter…

I also recommend using getRowId, this could ease a lot of the issues you may be facing.