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,
              
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
              
@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
              
image1054×485 19.5 KB
.ag-theme-alpine .ag-row:not(.ag-row-no-focus) {
    background: silver !important;
With the above example. 
              
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
              
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.
              
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.
              
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__)