Dash AG Grid Dynamic Parameters

Dash Python
6

Hi @mrel

The error is likely in the list of countries. For debugging try this:

countries = [c["country"] for c in sql_cat_json()]
print(countries)

Your function returns a json formated string. In order for the above to work, you would have to turn it back into a python object with json.loads().

Here’s one solution - make the sql_cat_json function return the list of countries to use in the dropdown of countries column, and the country_json to use for the options in the city dropdown.

def sql_cat_json():
    data = [
                {"country": "USA", "city": ["Boston", "NY", "LA"]},
                {"country": "Canada", "city":  ["Montreal", "Vancouver", "Calgary'"]},
                {"country": "Japan", "city": ["Kyoto", "Osaka"]},
                {"country": "Germany", "city": ["Berlin", "Frankfurt", "Hamburg", "Dresden"]}
        ]
    country_json = json.dumps(data, indent=4)
    countries =  [c["country"] for c in data]
    return country_json, countries


import dash_ag_grid as dag
from dash import Dash, html, dcc
from json_dump import sql_cat_json

app = Dash(__name__)

country_json, countries = sql_cat_json()

columnDefs = [
    {
        "field": "country",
        "cellEditor": "agSelectCellEditor",
        "cellEditorParams": {
            "values": countries
        }

    },
    {
        "headerName": "Select Editor",
        "field": "city",
        "cellEditor": "agSelectCellEditor",
        "cellEditorParams": {
            "function": f"dynamicOptions2(params, {country_json})"

        },
    },
]

rowData = [{"country": "", "city": ""} for i in range(6)]


app.layout = html.Div(
    [
        dcc.Markdown(
            "This grid has dynamic options for city based on the country.  Try editing the cities."
        ),
        dag.AgGrid(
            id="cell-editor-grid-2",
            columnDefs=columnDefs,
            rowData=rowData,
            columnSize="sizeToFit",
            defaultColDef={"editable": True},
        ),
    ],
    style={"margin": 20},
)


if __name__ == "__main__":
    app.run(debug=False)
2 Likes