Updating selectedRows in dash-ag-grid 31.0.0

Dash Python
1

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

2

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
3

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

4

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.

5

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.

6

Ok, let us know what you encounter…

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