Dash AG Grid Clicking on row deselects other selected rows

[mrel]

Hi everyone!

I have a a WebApp that is using AG Grid Table in it.
Because I want to be able to select multiple rows I am using "rowSelection": "multiple" in dashGridOptions.

What I am also using is checkbox "checkboxSelection": True in columnDefs.

I want the user to be able to select multiple rows via checkbox column.

The problem I am encountering is that clicking on any row removes all selections.

Example: I selected multiple rows via checkbox, then I click on some random row, that random row gets selected in the checkbox, other previously selected rows are now deselected.

How do I prevent that from happening?

When I click on the row, I want the row to be highlighted as it is now, but I do not want a check in checkbox, I don’t want deselection of selected rows (if any). Clicking on the row shouldn’t have selection at all. Just highlighting the row is enough.

table = grid.AgGrid(
            id="sql-table",
            rowData=dff.to_dict("records"),
            columnDefs=column_info.month_columnDefs,
            defaultColDef={
                "resizable": True,
                "sortable": True,
                "filter": True,
                "floatingFilter": True,
                "editable": True,
                "minWidth":125
            },
            columnSize="sizeToFit",
            dashGridOptions={
                "undoRedoCellEditing": True,
                "rowDragManaged": True,
                "animateRows": True,
                "rowDragMultiRow": True,
                "rowSelection": "multiple",
                "rowDragEntireRow": True,
            },
    )

[jinnyzor]

Hello @mrel,

You need to suppressRowClickSelection in the dashGridOptions.

[AnnMarieW]

Good point @jinnyzor - this needs to be added to the dash docs too.

In the meantime, for anyone else running into this issue, please see the upstream AG Grid docs for more details, including other Row Selection options that can be configured using dashGridOptions

React Data Grid: Row Selection

[mrel]

Thank you, @jinnyzor , it worked.

It just stopped highlighting the row when a cell is clicked.
I guess now I need to add a separate callback for that.

Maybe something like this below taken from here:

@app.callback(
    Output("table", "style_data_conditional"),
    Input("table", "derived_viewport_selected_row_ids"),
)
def style_selected_rows(selRows):
    if selRows is None:
        return dash.no_update
    return [
        {"if": {"filter_query": "{{id}} ={}".format(i)}, "backgroundColor": "yellow",}
        for i in selRows
    ]

[AnnMarieW]

@mrel

That callback you posted above won’t work because those props are for the Dash DataTable and are valid Dash AG Grid props.

Do you have any other custom style in your grid that might cause the selected rows to not be highlighted when a cell is clicked? I can’t replicate the issue. Try running the code below. It should look like this:

import dash_ag_grid as dag
from dash import Dash, html, dcc, Input, Output, callback
import pandas as pd

app = Dash(__name__)


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


columnDefs = [
    {"field": "athlete", "checkboxSelection": True, "headerCheckboxSelection": True},
    {"field": "age", "maxWidth": 100},
    {"field": "country"},
    {"field": "year", "maxWidth": 120},
    {"field": "date", "minWidth": 150},
    {"field": "sport"},
    {"field": "gold"},
    {"field": "silver"},
    {"field": "bronze"},
    {"field": "total"},
]


defaultColDef = {
    "flex": 1,
    "minWidth": 150,
    "sortable": True,
    "resizable": True,
    "filter": True,
}


app.layout = html.Div(
    [
        dcc.Markdown("This grid has multi-select rows with checkboxes."),
        dag.AgGrid(
            id="selection-checkbox-grid",
            columnDefs=columnDefs,
            rowData=df.to_dict("records"),
            defaultColDef=defaultColDef,
            dashGridOptions={"rowSelection":"multiple", "suppressRowClickSelection": True},            
        ),
        html.Div(id="selections-checkbox-output"),
    ],
    style={"margin": 20},
)


@callback(
    Output("selections-checkbox-output", "children"),
    Input("selection-checkbox-grid", "selectedRows"),
)
def selected(selected):
    if selected:
        selected_athlete = [s["athlete"] for s in selected]
        return f"You selected athletes: {selected_athlete}"
    return "No selections"


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

dag-docs

[jinnyzor]

Hello @mrel,

If you want to do something to highlight the whole row when a column is clicked, you’d need to probably have some custom css.

[jinnyzor]

.ag-theme-alpine .ag-row:not(.ag-row-no-focus) {
    background: silver !important;
}

With the above example.

[mrel]

It worked. Thank you so much for help, @jinnyzor , @AnnMarieW !

[hrid]

Hi @AnnMarieW ,
i have tried your code, but suppressRowClickSelection does not work in case.
do you have any idea,what can be the reason?
config:dash_ag_gri verison = 2.3.0, firefox, python3.9

[AnnMarieW]

Hi @hrid

Did you run the exact code I posted?
If not, are you getting any error messages? Can you post an example that replicates the issue?

[hrid]

hi @AnnMarieW , thank you for quick response, its exactly same code.
when i click on checkbox, it does not react at all and does not show any error as well.

[jinnyzor]

Hello @hrid,

What version of Dash are you using?

[hrid]

Hi @jinnyzor , i am using dash = 2.13.0 with python 3.9.13 and right now i have tried with 3.11. but still
dashGridOptions={“rowSelection”:“multiple”, “suppressRowClickSelection”: True}, it does not work, the way it should.

[jinnyzor]

And there are no errors in the browser console when you try to do this?

[hrid]

it does not show any error, few warning only.
surprisingly it works when execute from jupyter-notebook.
But it does not work when i execute .py from terminal or vsCode, although enviroment is same.

[jinnyzor]

Drop to dash 2.11.1 and try.

[AnnMarieW]

Hi @hrid

This is so strange. I tried it with dash 2.13.0 and it worked fine.
Is it the same with other browsers?
Does the selection work if you change it to: dashGridOptions={“rowSelection”:“multiple”}

Also, add this to see if the app is actually running the correct version
print(dag.__version__)

[hrid]

Hi @jinnyzor , @AnnMarieW ,
thank you so much for your effort and time.
the problem was, it has some conflict with bWLwgP.css data, once i remove this .css file from my assets folder or i discard the css code related to checkbox or i rename this assets folder, then it works fine.