AG Grid Master Detail row pinning

Dash Python
1

Hi everyone,

I’m using AG grid master detail feature. I’m wondering if it’s possible to pin the first row in each detail grid. If it’s possible, how can I achieve this?

Thank you!!!

2

Hello @leatqy,

This should be possible.

You can utilize the detail grid’s api and pin the first row to the top. :slight_smile:

3

Hi,

Thanks for reply. Since I’m not that familiar with the detail grid’s API, cloud you please kindly show me an example?

Thank you.

4

Sure, check out here:

1 Like
5

Hi, I tried to change the addEventListener(‘cellValueChanged’, … to addEventListener(‘rowSelected’, … It didn’t work. But when I changed it to addEventListener(‘cellClicked’, … , it works. Do you know why ‘rowSelected’ doesn’t work? I’ve already made “rowSelection”: “multiple” in “detailGridOptions”.

6

Hello @leatqy,

Could you please provide an example app with your adjustments in it?

This will help with the troubleshooting.

7

I used your example, I just changed gridDetail.api.addEventListener(‘cellValueChanged’,… to gridDetail.api.addEventListener(‘rowSelected’,… because I want the last callback triggered by selecting rows instead of changing values in a cell.

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,
            licenseKey=os.environ["AG_GRID_KEY"],
            id="nested-grid-detail-table-request-2",
            columnDefs=masterColumnDefs,
            rowData=rowData,
            columnSize="sizeToFit",
            masterDetail=True,
            detailCellRendererParams={
                "detailGridOptions": {
                    "columnDefs": detailColumnDefs,
                    "defaultColDef": {'editable': True},
                    "rowSelection": "multiple",
                },
                "detailColName": "cities",
                "suppressCallback": True,
            },
            dashGridOptions={"detailRowAutoHeight": True, "rowSelection": "multiple",},
            getRowId='params.data.country'
        ),
        html.Div(id='output')
    ]
)


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('rowSelected', 
                    (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.clientside_callback(
    """function (d) {
        return JSON.stringify(d)
    }""",
    Output('output', 'children'),
    Input('nested-grid-detail-table-request-2', 'cellValueChanged')
)


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

You are looking for the selectionChanged event. rowSelected is for testing specific rows to see if they are selected.

Check here:

9

I tried this, but it doesn’t work. I guess it’s because I’m not familiar with JS. Could please show me in this example how I can print the data of the row selected in the detail grid. Thank you.