Dash AG Grid分组父级复选框失效问题求助

使用Dash AG Grid构建分组表格，通过agGroupCellRenderer实现州-地区的分组展示。当前子级复选框点击功能正常，但父级复选框点击无响应。需要实现：

• 点击父级（州）复选框时，获取该州名称
• 点击子级（地区）复选框时，同时获取所属州和地区名称

原代码如下：

import dash_ag_grid as dag
from dash import ( Dash,
    Input,
    Output,
    State,
    callback,
    ctx,
    html,
    no_update,
)

data =[
    {
      "statename": "All India",
      "districtcode": None,
      "districtname": None,
    },
    {
      "statename": "Gujarat",
      "districtcode": 462,
      "districtname": "Valsad"
    },
    {
      "statename": "Haryana",
      "districtcode": 58,
      "districtname": "Ambala"
    },
    {
      "statename": "Haryana",
      "districtcode": 59,
      "districtname": "Bhiwani"
    },
    {
      "statename": "Haryana",
      "districtcode": 701,
      "districtname": "Charki Dadri"
    },
    {
      "statename": "Haryana",
      "districtcode": 60,
      "districtname": "Faridabad"
    },
    {
      "statename": "Haryana",
      "districtcode": 61,
      "districtname": "Fatehabad"
    },]
app = Dash()


columndefs = [
    {
     "field": "statename", "rowGroup": True, "hide": True , "checkboxSelection":True,
     
    }
 ]
options = {
        "autoGroupColumnDef":{ 
            "headerName": "State/District",
            "field": "districtname",
            "cellRenderer": "agGroupCellRenderer",
            "cellRendererParams": {"checkbox":True,"suppressCount": True},
            "headerCheckboxSelectionCurrentPageOnly": True,
        },
       
    }

app.layout = html.Div([dag.AgGrid(
        id="tab2-state-district-grid",
        className="ag-theme-balham",
        rowData=data,
        columnDefs=columndefs,
        dashGridOptions=options,
        defaultColDef=dict(
            resizable=False,
            flex=1,
            suppressSizeToFit=True,
            suppressMovable=True,
            floatingFilter=False,
            filter=False,
        ),
        enableEnterpriseModules=True,
        licenseKey="LICENSE_KEY_HERE",
        persistence=True,
        persistence_type="session",
        persisted_props=["selectedRows"],
    ),
    html.H1(id="data-dd")]
)

@callback(
    [
        Output("data-dd", "children"),
    ],
    [
       Input("tab2-state-district-grid", "selectedRows"),   
       Input("tab2-state-district-grid", "cellClicked"),


    ],
)
def test_grid(selcted_rows,cell_click):
    print(ctx.triggered_id,"selcted_rows",selcted_rows)
    print(ctx.triggered_id,"cell_click",cell_click)
    return no_update


app.run(debug=True)

关键修改点 #

1. 启用分组行的复选框选择：在autoGroupColumnDef中添加checkboxSelection配置，确保父级行的复选框能触发选择事件，而非仅通过cellRendererParams显示复选框。
2. 配置多行选择模式：在dashGridOptions中添加rowSelection: "multiple"，支持同时选中多个父级或子级行。
3. 区分分组行与普通行：在回调中通过行数据的group属性判断是否为父级分组行，提取对应名称；子级行直接获取statename和districtname。

修改后的完整代码 #

import dash_ag_grid as dag
from dash import ( Dash,
    Input,
    Output,
    callback,
    ctx,
    html,
    no_update,
)

data =[
    {
      "statename": "All India",
      "districtcode": None,
      "districtname": None,
    },
    {
      "statename": "Gujarat",
      "districtcode": 462,
      "districtname": "Valsad"
    },
    {
      "statename": "Haryana",
      "districtcode": 58,
      "districtname": "Ambala"
    },
    {
      "statename": "Haryana",
      "districtcode": 59,
      "districtname": "Bhiwani"
    },
    {
      "statename": "Haryana",
      "districtcode": 701,
      "districtname": "Charki Dadri"
    },
    {
      "statename": "Haryana",
      "districtcode": 60,
      "districtname": "Faridabad"
    },
    {
      "statename": "Haryana",
      "districtcode": 61,
      "districtname": "Fatehabad"
    },]
app = Dash()

columndefs = [
    {
     "field": "statename", "rowGroup": True, "hide": True,
    }
 ]

options = {
    "rowSelection": "multiple",  # 启用多行选择
    "autoGroupColumnDef":{ 
        "headerName": "State/District",
        "field": "districtname",
        "cellRenderer": "agGroupCellRenderer",
        "cellRendererParams": {"checkbox": True,"suppressCount": True},
        "checkboxSelection": True,  # 启用分组行的复选框选择
        "headerCheckboxSelectionCurrentPageOnly": True,
    },
}

app.layout = html.Div([
    dag.AgGrid(
        id="tab2-state-district-grid",
        className="ag-theme-balham",
        rowData=data,
        columnDefs=columndefs,
        dashGridOptions=options,
        defaultColDef=dict(
            resizable=False,
            flex=1,
            suppressSizeToFit=True,
            suppressMovable=True,
            floatingFilter=False,
            filter=False,
            checkboxSelection=True,  # 子级行启用复选框
        ),
        enableEnterpriseModules=True,
        licenseKey="LICENSE_KEY_HERE",
        persistence=True,
        persistence_type="session",
        persisted_props=["selectedRows"],
    ),
    html.H1(id="data-dd")
])

@callback(
    Output("data-dd", "children"),
    Input("tab2-state-district-grid", "selectedRows"),
)
def handle_selection(selected_rows):
    result = []
    for row in selected_rows:
        if row.get('group'):
            # 父级分组行，提取分组名称
            state_name = row['key']
            result.append(f"选中父级: {state_name}")
        else:
            # 子级行，提取州和地区名称
            state_name = row['statename']
            district_name = row['districtname']
            result.append(f"选中子级: {state_name} - {district_name}")
    return "<br>".join(result) if result else "未选中任何行"


app.run(debug=True)

说明 #

• 父级行的key属性对应分组的州名称，通过row['group']判断是否为分组行。
• 子级行直接从原始数据中获取statename和districtname。
• 回调函数将选中的结果展示在页面上，可根据需求在函数内添加控制台打印逻辑。

内容的提问来源于stack exchange，提问作者Mohit Chaniyal