Master Detail Dash AG Grid

[BalaNagendraReddy]

Hi Team,

In the below example, once you click on cellRender, it will display the cities as detailCellRendererParams, Is it possible to give cities and other columns below the cellRender just like Row Groups, then based on the selection needs to be display the detailCellRendererParams.

`from dash import Dash, html
import dash_ag_grid as dag
import os

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(
id="simplified-master-detail-example",
enableEnterpriseModules=True,
licenseKey=os.environ["AGGRID_ENTERPRISE"],
columnDefs=masterColumnDefs,
rowData=rowData,
columnSize="sizeToFit",
masterDetail=True,
detailCellRendererParams={
"detailGridOptions": {
"columnDefs": detailColumnDefs,
},
"detailColName": "cities",
"suppressCallback": True,
},
dashGridOptions={"detailRowAutoHeight": True, "animateRows": False},
),
]
)

if name == "main":
app.run(debug=True)
`

[BSd3v]

Hello @BalaNagendraReddy

All cellRenderers defined in the namespace are available to grids and master details recursively. That means as many master details will have access to the cell renderers.

Are you talking about this, or you want master details for different columns?

[BalaNagendraReddy]

Hi @BSd3v ,

Thanks for your response.

I need master details for various columns, but instead of displaying all at once, I would like to have an option to open the details of each selected column.

For instance, 'cities' is one column in the above example. Similarly, there is another column named 'misc'. If we click on 'misc', it should display details such as life expectancy, male-to-female ratio, and GDP.

[BSd3v]

Thanks for the clarification.

I believe that this issue also is inline with this, correct?

#296

[BalaNagendraReddy]

Hi @BSd3v ,

Sorry for the confusion.

I'm looking to achieve the following functionality with the rowData as defined below:

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"},
        ],
        "currency_details":[
            {"currency_name": "Chinese Yuan", "currency_code": "CNY"},
        ],
        "misc":[
            {"life_expectancy": 76.7, "internet_users": 765367947, "area": 9596961, "gdp": 11232100000000},
        ]
    },
    {
        "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,
            },
        ],
        "currency_details":[
            {"currency_name": "Indian Rupee", "currency_code": "Rs"},
        ],
        "misc":[
            {"life_expectancy": 69.7, "internet_users": 560000000, "area": 3287263, "gdp": 2875140000000},
        ]
    }
]

When I click on "China," I expect to see the following options:

> Cities
> Currency details
> Miscellaneous

Depending on the user's selection from these options, only the chosen details should be displayed. For instance, if the user selects "Cities," only the city-related information should be displayed.

[BSd3v]

Yes, that is considered dynamic Master Details.

This requires it to be a function, which is not currently supported.

There is a workaround on the forums that you can check out though.

[BalaNagendraReddy]

I have verified the below examples in community. But i have not find relevant work around.

AG-Grid Master Detail: how to access detail-grid data in a callbak

Column Drill-down using Master-Detail in AG Grid

Could you please share the link of relevant one.