Dash AG Grid: Grouped Rows Rendering Selection Boxes to Leaf Nodes

Dash Python
1

To emulate the functionality seen here: React Data Grid: Group Cell Renderer with Group Renderer C:

image
image851×398 20.2 KB

image
image1130×439 14.5 KB

Use a code similar to this:

import dash_ag_grid as dag
import dash
from dash import html, dcc
import pandas as pd


app = dash.Dash(__name__)


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

columnDefs = [
    # Row group by country and by year is enabled.
    {"field": "country", "sortable": True, "filter": True, "rowGroup": True, "hide": True},
    {"field": "year", "sortable": True, "filter": True, "rowGroup": True, "hide": True},
    {"field": "athlete", "sortable": True, "filter": True, 
     "cellRendererParams": {
                        "checkbox": True,
                    },
     "cellRenderer": "agGroupCellRenderer"
     },
    {"field": "age", "sortable": True, "filter": True},
    {"field": "date", "sortable": True, "filter": True},
    {"field": "sport", "sortable": True, "filter": True},
    {"field": "total", "sortable": True, "filter": True},
]

app.layout = html.Div(
    [
        dcc.Markdown("Demonstration of row groupings in a Dash AG Grid."),
        dcc.Markdown("This grid groups first by country and then by year."),
        dag.AgGrid(
            columnDefs=columnDefs,
            rowData=df.to_dict("records"),
            dashGridOptions={
                "autoGroupColumnDef": {
                    "cellRenderer": "agGroupCellRenderer",
                    "cellRendererParams": {
                        "checkbox": True,
                    },
                    "headerCheckboxSelection": True,
                },
                "rowSelection": "multiple",
                "groupSelectsChildren": True,
                "suppressRowClickSelection": True,
                "suppressAggFuncInHeader": True,
                "groupDisplayType": "multipleColumns",
            },
            defaultColDef=dict(
                resizable=True,
            ),
            id="grouped-grid",
            enableEnterpriseModules=True,
        ),
    ]
)


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

Note, adding a "checkboxSelection":True to the columnDef renders the checkbox on every row, including those that are grouped.

{"field": "athlete", "sortable": True, "filter": True, 
     "cellRendererParams": {
                        "checkbox": True,
                    },
     "cellRenderer": "agGroupCellRenderer"
     },

Makes use of the available default cellRenderer "agGroupCellRenderer", this allows the renderer to only render the checkbox on the ungrouped rows. :slight_smile:

4 Likes
2

Thanks for sharing this, Bryan!

Isn’t the Grouped Rows feature an enterprise one? Can we actually just enable enterprise features without a license key, as in this example? and if so, what are the limitations on this?

3

Hello @mo.elauzei,

Yes, this is an enterprise feature.

You can use it without a license, they watermark the grid in display.

You can find out more info here:

4

Thanks for the clarification, @jinnyzor !

The grid wasn’t watermarked for me hence my confusion. Turns out the watermark is not displayed on ‘localhost’ environment .

5

Yup.

But you do get the plethora of console errors when using enterprise without a license, even on the localhost.

1 Like