Dash Ag-grid rowSelection - Forcing Checkboxes As Selected

Hey, is it possible to show all rows selected by default?

Something like: JavaScript Data Grid: Row Selection (part: Forcing Checkboxes As Selected)

This would require passing onFirstDataRendered I assume

Could function selectAll from Grid selection API be used somehow:

Hello @davzup89,

Yes, you can apply selectAll=True when the grid renders. This is available with a5, that was released to.

1 Like

@davzup89

See the docs Multi-Select with checkbox example here:

Here is a complete example where the grid starts with all rows selected:


import dash_ag_grid as dag
from dash import Dash, html, dcc, Input, Output
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"},
            selectAll=True
        ),
        html.Div(id="selections-checkbox-output"),
    ],
    style={"margin": 20},
)


@app.callback(
    Output("selections-checkbox-output", "children"),
    Input("selection-checkbox-grid", "selectedRows"),
    prevent_initial_call=True
)
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_server(debug=True)


1 Like

Thanks to both of you :slight_smile:

I am unable to make this work for my case though. I define df with dropdowns inside callback and pass rowData, columnDefs. I also tried passing selectAll as True within same callback but checkboxes won’t render as selected though. Using a5.

It might be due to the order of operations.

Have a chained callback, the rowData is probably not fully loaded when the selectAll gets processed.

1 Like

Agreed. This is the most likely cause.

Additional callback does the trick…

@callback(
    Output("data_table", "selectAll"),
    Input("data_table", "virtualRowData"),
    prevent_initial_call=True
)
def selectALL(rows):
    if len(rows) > 1:
        return True
2 Likes