AG Grid Master Detail: "cellClicked" and "selectedRows" in detail-table

Dash Python
1

Hi,

I’m using Master Detail feature to display some nested data. I want to click a cell in the detail-table access “cellClicked” and “selectedRows” like in the normal table. For example, in this table:

Screenshot 2024-04-03 at 11.46.24
Screenshot 2024-04-03 at 11.46.241428×708 33.4 KB

If I click any cell in Pop.(City proper), I want to get the corresponding value in “City” column and also the value of “Country” column in the corresponding top-level master grid. If I click the first cell in Pop.(City proper) column here, I can get “Shanghai” and “China”

For the normal grid, I can do something like Input(“quickstart-grid”, “cellClicked”), Input(“quickstart-grid”, “selectedRows”) to achieve this. But for Master Detail, how can I achieve this?

Thank you very much!

2

Inspired by https://community.plotly.com/t/ag-grid-master-detail-how-to-access-detail-grid-data-in-a-callbak/81695

I solved this problem:

from dash import Dash, html, Input, Output, callback, State
import dash_ag_grid as dag

import os

import time

app = Dash(__name__)
masterColumnDefs = [
    {
        "headerName": "Country",
        "field": "country",
        "cellRenderer": "agGroupCellRenderer",
    },
    {"headerName": "Region", "field": "region"},
    {"headerName": "Population", "field": "population"},
]

detailColumnDefs = [
    {"headerName": "City", "field": "city"},
    {"headerName": "Pop. (City proper)", "field": "population_city"},
    {"headerName": "Pop. (Metro area)", "field": "population_metro"},
]

rowData = [
    {
        "country": "China",
        "region": "Asia",
        "population": 1411778724,
        "cities": [
            {"city": "Shanghai", "population_city": 24870895, "population_metro": "NA"},
            {"city": "Beijing", "population_city": 21893095, "population_metro": "NA"},
            {
                "city": "Chongqing",
                "population_city": 32054159,
                "population_metro": "NA",
            },
        ],
    },
    {
        "country": "India",
        "region": "Asia",
        "population": 1383524897,
        "cities": [
            {
                "city": "Delhi",
                "population_city": 16753235,
                "population_metro": 29000000,
            },
            {
                "city": "Mumbai",
                "population_city": 12478447,
                "population_metro": 24400000,
            },
            {
                "city": "Kolkata",
                "population_city": 4496694,
                "population_metro": 14035959,
            },
        ],
    },
    {
        "country": "United States",
        "region": "Americas",
        "population": 332593407,
        "cities": [
            {
                "city": "New York",
                "population_city": 8398748,
                "population_metro": 19303808,
            },
            {
                "city": "Los Angeles",
                "population_city": 3990456,
                "population_metro": 13291486,
            },
            {
                "city": "Chicago",
                "population_city": 2746388,
                "population_metro": 9618502,
            },
        ],
    },
    {
        "country": "Indonesia",
        "region": "Asia",
        "population": 271350000,
        "cities": [
            {
                "city": "Jakarta",
                "population_city": 10154134,
                "population_metro": 33430285,
            },
        ],
    },
]


app.layout = html.Div(
    [
        dag.AgGrid(
            enableEnterpriseModules=True,

            id="nested-grid-detail-table-request-2",
            licenseKey=os.environ["AG_GRID_KEY"],
            columnDefs=masterColumnDefs,
            rowData=rowData,
            columnSize="sizeToFit",
            masterDetail=True,
            detailCellRendererParams={
                "detailGridOptions": {
                    "columnDefs": detailColumnDefs,
                    "defaultColDef": {'editable': True}
                },
                "detailColName": "cities",
                "suppressCallback": True,
                'rowSelection':'multiple',
                'suppressRowClickSelection':True,

            },
            dashGridOptions={"detailRowAutoHeight": True},
            getRowId='params.data.country'
        ),
        html.Div(id='output',style={'height':'50px'})
    ]
)

app.clientside_callback(
    """(id) => {
        dash_ag_grid.getApiAsync(id).then((grid) => {
            grid.addEventListener('rowGroupOpened', (em) => {
                if (em.node.detailNode && em.expanded) {
                    gridDetail = em.node.detailNode.detailGridInfo
                    gridDetail.api.addEventListener('cellClicked', 
                    (ed) => {
                    const newChange = {...ed, node: {id:`${gridDetail.id} - ${ed.node.id}`}}
                    em.api.getGridOption('onCellValueChanged')(newChange)
                    })
                }
            })
        })
        return window.dash_clientside.no_update
    }""",
    Output('output', 'id'),
    Input('nested-grid-detail-table-request-2', 'id')
)



@app.callback(
    Output('output', 'children'),
    Input('nested-grid-detail-table-request-2', 'cellValueChanged')
)
def test_show_col(list_dat):
    if list_dat is None or len(list_dat) == 0:
        return "None"
    else:
        dic_data = list_dat[0]
        colid = dic_data.get('colId')
        city = dic_data.get('data', {}).get('city')
        row_id = dic_data.get('rowId')
        dic_output = {'ColId': colid, 'City': city, 'RowId': row_id}
        return str(dic_output)




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

Just simply change " gridDetail.api.addEventListener(‘cellValueChanged’, …" to “gridDetail.api.addEventListener(‘cellClicked’, …”

1 Like