AG Grid - Many editors in one column

Dash Python
1

Hi Dash Community:

If we look at the example here:
Cell Editors | Dash for Python Documentation | Plotly in the Dynamic Parameters.
Is there a way to restore normal cell input ( rather than cell editor )? For instance:

dagfuncs.dynamicOptions = function(params) {
const selectedCountry = params.data.country;
if (selectedCountry === ‘United States’) {
return {
values: [‘Boston’, ‘Chicago’, ‘San Francisco’],
};
} else {
return {
// Default way to input value in a cell
};
}
}

2

Hi @entropy_l

Great question - this isn’t in the Dash docs yet, but you can find more info in the AG Grid docs - Many Editors One Column section.

You need to use a function with the cellEditorSelector prop in the column definition. Here’s an example:

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

app = Dash(__name__)


columnDefs = [
    {
        "field": "country",
        "editable": False,
    },
    {    
        "field": "city",
        "cellEditorSelector": {"function": "dynamicCellEditor(params)"},
    },

]

rowData = [
    {"country": "United States", "city": "Boston"},
    {"country": "Canada", "city": "Montreal"},
    {"country": "Canada", "city": "Vancouver"},
]


app.layout = html.Div(
    [
        dcc.Markdown(
            """
            This grid has multiple editors in the same column. It's a Select Editor if the 
            country=United States otherwise it's a regular text editor.  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=True)


"""
Place the following in the dashAgGridFunctions.js file in the /assets folder

-------------
var dagfuncs = window.dashAgGridFunctions = window.dashAgGridFunctions || {};

dagfuncs.dynamicCellEditor = function(params) {
    if (params.data.country === 'United States') {        
        return {
            component: 'agSelectCellEditor',
            params: {values: ['Boston', 'Chicago', 'San Francisco']},
        };
    }
    return 'agTextCellEditor'
}

"""

dag-docs

2 Likes
3

thank you so much!
I saw the example before in Ag Grid ---- but don’t know how to implement it… Thank you!! I get great answers from you all the time!

1 Like
4

In this case, “cellEditor”: “agRichSelectCellEditor”, I want to be able to either select from the dropdown list or enter a new value. However, currently aggrid dash only allows to get values ​​in dropdown. Is there a way to add new values

5

Hi @luong275 and welcome to the Dash community :slightly_smiling_face:

In order to add new items, you would have to use a custom component. You can see an example using the dmc.Select here:

1 Like