Dash-ag-grid dropdown not working

Dash Python
1

Hi,

I’m having trouble with the dropdown in the dash-ag-grid and can’t find out the issue.
I tried it with dash-ag-grid dash-ag-grid-2.1.0 and dash-ag-grid-2.0.0a5, but I have the same issue with both.
I’m using python 3.10.2 and I also tried it with dash 2.9.1 and dash 2.10.2

So I have a simple pandas Dataframe:
IDs Names Color Symbol
0 6X3U 6X3U #636efa circle
1 7QND 7QND #EF553B circle
2 4COF 4COF #00cc96 circle
3 6HUP 6HUP #ab63fa circle
4 6HUO 6HUO #FFA15A circle
5 6HUK 6HUK #19d3f3 circle

and I want the columns color and symbol to be dropdowns and Names should be editable. My code:

symbols = ["circle", "square", "diamond", "cross", "x", "triangle-up", "triangle-down", "triangle-left",
           "triangle-right", "tirangle-ne", "triangle-se", "pentagon", "hexagon", "star", "hexagram",
           "star-triangle-up", "star-square", "diamond-tall"]

colors = ['#636efa', '#EF553B', '#00cc96', '#ab63fa', '#FFA15A', '#19d3f3', '#e23535', '#88c6a5', '#aee3b3', '#ebdb5e',
          '#eea3a3', '#81ea74', '#631919', '#b963ee', '#cfd5ff', '#fb7c54', '#fff4e6', '#b40056', '#3b185a', '#3e3f40',
          '#546918', '#c6d76b']

columnDefs = [
    {
        "headerName": "ID",
        "field": "ID",
        'filter': True
    },
    {
        "headerName": "Name",
        "field": "Name",
        'editable': True,
        'filter': True
    },
    {
        "headerName": "Color",
        "field": "Color",
        "cellRenderer": "Dropdown",
        "cellRendererParams": {
            "values": colors,
        },
        # "cellEditor": "agSelectCellEditor",
        # "cellEditorParams": {
        #    "values": colors,  # dropdown per Column
        # }
    },
    {
        "headerName": "Symbol",
        "field": "Symbol",
        "cellRenderer": "Dropdown",
        "cellRendererParams": {
            "values": symbols,
        },
        # "cellEditor": "agSelectCellEditor",
        # "cellEditorParams": {
        #    "values": colors,  # dropdown per Column
        # }
    }
]

        dag.AgGrid(
           id="table",
           className='ag-theme-material',
           columnDefs=columnDefs,
           rowData=df.to_dict('records'),
           columnSize="sizeToFit",
           defaultColDef={"resizable": True, "sortable": True}
        )

As you can see I tried two different variantions of columnDefs once with cellEditor and once with cellRenderer as it is shown it in the examples dash-ag-grid/docs/examples/components/cell_renderer_dropdown.py at dev · plotly/dash-ag-grid · GitHub and Dash-by-Plotly/Ag-Grid/icon-dropdown-link/app.py at master · Coding-with-Adam/Dash-by-Plotly · GitHub. Both are not working and my result looks like this:

table
table1304×384 4.47 KB

Thanks for the help.

Best,

Filip

2

Hello @ftk,

Just checking, but do you have the Js file that the examples say you need for the cellRenderer?

3

Hi @jinnyzor,

oh I totally missed that. Thanks for the information.

I added it now and the two dropdowns work, but what I still don’t get is why it’s not showing me the values of ID and Name.

Thanks for the help.

Best,
Filip

4

The field names dont match the dataframe. :slight_smile:

5

Awesome!

Thank you so much

1 Like