# How to trigger "cellValueChanged" callback on a custom "cellRenderer" dropdown in a Dash Ag Grid Cell?

**URL:** <https://community.plotly.com/t/how-to-trigger-cellvaluechanged-callback-on-a-custom-cellrenderer-dropdown-in-a-dash-ag-grid-cell/82630>\
**Category:** Dash Python\
**Created:** [February 27, 2024, 10:31pm UTC](https://community.plotly.com/t/how-to-trigger-cellvaluechanged-callback-on-a-custom-cellrenderer-dropdown-in-a-dash-ag-grid-cell/82630 "2024-02-27T22:31:26Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![manish1022iiti](https://avatars.discourse-cdn.com/v4/letter/m/97f17d/32.png) [@manish1022iiti](https://community.plotly.com/u/manish1022iiti)\
**Post date:** [February 27, 2024, 10:31pm UTC](https://community.plotly.com/t/how-to-trigger-cellvaluechanged-callback-on-a-custom-cellrenderer-dropdown-in-a-dash-ag-grid-cell/82630/1 "2024-02-27T22:31:26Z")

</div>

Hello Everyone:

I have a Dash Ag Grid table on which I have a callback defined based on “cellValueChanged” property. It works fine for normal columns but is not getting triggered with a column where I have custom cellRendered defined for having a dropdown in each cell.

I don’t know React; and I referred to this [link](https://github.com/plotly/dash-ag-grid/blob/main/docs/examples/components/cell_renderer_dropdown.py) and some minor tweaking to get the below renderer:

dagcomponentfuncs.Dropdown = function (props) {  
const { setData, api, node, column } = props;

```
function selectionHandler(event) {
    // update data in the grid
    const newValue = event.target.value;
    const colId = column.colId;
    node.setDataValue(colId, newValue);

    // update cellRendererData prop so it can be used to trigger a callback
    setData(newValue);

    // Close the dropdown after selection (if this is desired behavior)
    api.stopEditing(false);
}

// Create the dropdown options using values and labels
const options = props.colDef.cellRendererParams.values.map((value, index) => {
    const label = props.colDef.cellRendererParams.labels[index];
    return React.createElement(
        'option',
        { value: value, key: value },
        label
    );
});

// The current value of the dropdown should match the current cell value
const currentValue = props.value;

return React.createElement(
    'div',
    { style: { width: '100%', height: '100%' } },
    React.createElement(
        'select',
        {
            value: currentValue, // Controlled component: the value is set by the cell's value
            onChange: selectionHandler,
            style: { width: '100%', height: '100%' }
        },
        options
    )
);

```

};

And I am setting these properties in the column definition for this column:

col\_meta[“cellEditor”] = “Dropdown”  
col\_meta[“cellRenderer”] = “Dropdown”  
col\_meta[“cellRendererParams”] = {  
“labels”: list\_of\_labels,  
“values”: list\_of\_values,  
}

Does anyone see any obvious mistake here? Is there any other way to have dropdowns in each cell and have callback triggered on them?

Thanks a lot!

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [February 28, 2024, 12:00am UTC](https://community.plotly.com/t/how-to-trigger-cellvaluechanged-callback-on-a-custom-cellrenderer-dropdown-in-a-dash-ag-grid-cell/82630/2 "2024-02-28T00:00:18Z")

</div>

I have some examples of using a `dmc.Select` in AG Grid cells here. This component will be a lot easier to configure.

> **[Dash AG Grid Examples: dmc components](https://dashaggridexamples.pythonanywhere.com/components-dmc)**
>
> Tutorials, tips & tricks and additional examples to supplement the Dash AG Grid documentation.

---

<div class="post-metadata">

**Author:** ![manish1022iiti](https://avatars.discourse-cdn.com/v4/letter/m/97f17d/32.png) [@manish1022iiti](https://community.plotly.com/u/manish1022iiti)\
**Post date:** [March 1, 2024, 9:04pm UTC](https://community.plotly.com/t/how-to-trigger-cellvaluechanged-callback-on-a-custom-cellrenderer-dropdown-in-a-dash-ag-grid-cell/82630/3 "2024-03-01T21:04:56Z")

</div>

Hello @AnnMarieW , sorry for a late reply, but I tried this out yesterday, and works great. I am sticking with your solution.

One thing though that I was trying to accomplish based on your code was to have the notion of “value” and “label” for this custom component, however was not able to do so. So for now, I am showing UI-friendly values on the UI and manually converting them back to back-end values, something which is implicitly provided by dmc Select if used directly in a Dash App.

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [March 1, 2024, 9:44pm UTC](https://community.plotly.com/t/how-to-trigger-cellvaluechanged-callback-on-a-custom-cellrenderer-dropdown-in-a-dash-ag-grid-cell/82630/4 "2024-03-01T21:44:29Z")

</div>

Hi @manish1022iiti

It’s possible to have the labels and values different. Check out the City column in the example called [dmc.Select with grouping](https://dashaggridexamples.pythonanywhere.com/components-dmc)

Also, since you found a way to handle it without that feature, you could simplify things by using the built-in select cell editor:

> **[Provided Cell Editors | Dash for Python Documentation | Plotly](https://dash.plotly.com/dash-ag-grid/provided-cell-editors#select-cell-editor)**
>
> Provided Cell Editors in Dash AG Grid

---

<div class="post-metadata">

**Author:** ![manish1022iiti](https://avatars.discourse-cdn.com/v4/letter/m/97f17d/32.png) [@manish1022iiti](https://community.plotly.com/u/manish1022iiti)\
**Post date:** [March 1, 2024, 9:56pm UTC](https://community.plotly.com/t/how-to-trigger-cellvaluechanged-callback-on-a-custom-cellrenderer-dropdown-in-a-dash-ag-grid-cell/82630/5 "2024-03-01T21:56:31Z")

</div>

Ahh, should have scrolled further down. Added unnecessary complexity in my code.

Thanks for sharing this. Will definitely incorporate this whenever I get to this next.

Another thing I was wondering is if there is a way to make it obvious that a particular cell/column has dropdowns without actually clicking on the cell. Any way to show the dropdown icon without clicking on the cell?

Thank you.

---

<div class="post-metadata">

**Author:** ![manish1022iiti](https://avatars.discourse-cdn.com/v4/letter/m/97f17d/32.png) [@manish1022iiti](https://community.plotly.com/u/manish1022iiti)\
**Post date:** [March 1, 2024, 10:06pm UTC](https://community.plotly.com/t/how-to-trigger-cellvaluechanged-callback-on-a-custom-cellrenderer-dropdown-in-a-dash-ag-grid-cell/82630/6 "2024-03-01T22:06:42Z")

</div>

Ah figured it, I used another render in the col def of my Dash Ag Grid table, below renderer for showing Pencil Icon:

dagcomponentfuncs.PencilIconRenderer = function(params) {  
var icon = React.createElement(‘i’, {  
className: “fa fa-pencil”,  
‘aria-hidden’: “true”  
});  
var container = React.createElement(‘span’, {}, icon, ’ ', params.value);  
return container;  
};

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [March 1, 2024, 10:12pm UTC](https://community.plotly.com/t/how-to-trigger-cellvaluechanged-callback-on-a-custom-cellrenderer-dropdown-in-a-dash-ag-grid-cell/82630/7 "2024-03-01T22:12:01Z")

</div>

Oh, that’s a good idea! Yes, you can add a cellrenderer to show a small dropdown icon. You can see some examples with some other component examples. I’ll add that example next week too 🙂

---

<div class="post-metadata">

**Author:** ![manish1022iiti](https://avatars.discourse-cdn.com/v4/letter/m/97f17d/32.png) [@manish1022iiti](https://community.plotly.com/u/manish1022iiti)\
**Post date:** [March 1, 2024, 10:14pm UTC](https://community.plotly.com/t/how-to-trigger-cellvaluechanged-callback-on-a-custom-cellrenderer-dropdown-in-a-dash-ag-grid-cell/82630/8 "2024-03-01T22:14:32Z")

</div>

That sounds awesome @AnnMarieW. Thank you.

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [March 1, 2024, 10:16pm UTC](https://community.plotly.com/t/how-to-trigger-cellvaluechanged-callback-on-a-custom-cellrenderer-dropdown-in-a-dash-ag-grid-cell/82630/9 "2024-03-01T22:16:17Z")

</div>

You could also just use a cellRenderer as the drop-down, and turn off the cell editor if you want to.

The downside is you need to use set the value of the cell using the api in a slightly different way.

You also wouldn’t be able to go into the editing the same way. So, from a UX perspective it’s a little confusing.

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [March 4, 2024, 4:50pm UTC](https://community.plotly.com/t/how-to-trigger-cellvaluechanged-callback-on-a-custom-cellrenderer-dropdown-in-a-dash-ag-grid-cell/82630/10 "2024-03-04T16:50:43Z")

</div>

@manish1022iiti

Here is an example of using a cell renderer to add a right aligned icon to indicate a cell is editable. This demo uses the [Provided Cell Editors](https://dash.plotly.com/dash-ag-grid/provided-cell-editors), but it can be used with custom cell editors (like the dmc.Select) component as well.

The same cell render component `cellEditorIcon` is used to add icons to both the Company column and the Date column. You can specify the icon using the “icon” prop in the `cellRendererParams`

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/0/2/02fea20cb6cabf67a187fed4f477788d863f5418.png)

```auto
import dash_ag_grid as dag
from dash import Dash, html
import pandas as pd

app = Dash( __name__ , external_stylesheets=["https://use.fontawesome.com/releases/v5.15.4/css/all.css"])

df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/space-mission-data.csv")

columnDefs = [
    {
        "field": "company",
        "cellRenderer": "cellEditorIcon",
        "cellRendererParams": {
            "icon": "fas fa-caret-down",
        },
        "cellEditor": "agSelectCellEditor",
        "cellEditorParams": {
            "values": df["company"].unique(),
        }
    },
    {"field": "mission"},
    {
        "field": "date",
        "cellRenderer": "cellEditorIcon",
        "cellRendererParams": {
            "icon": "far fa-calendar",
        },
    },
    {"field": "successful"}
]

app.layout = html.Div(
    [
        dag.AgGrid(
            rowData=df.to_dict("records"),
            columnDefs=columnDefs,
            defaultColDef={"flex":1, "editable":True},
            dashGridOptions = {"singleClickEdit": True}

        ),
    ],
)

"""
Put the following in the dashAgGridComponentFunctions.js file in the assets folder

-----------

var dagcomponentfuncs = window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {};

// adds a right aligned icon to a cell
dagcomponentfuncs.cellEditorIcon = function (props) {
  return React.createElement(
    'span',
    {
      style: {
        width: '100%',
        height: '100%',
        display: 'flex',
        alignItems: 'center',
      },
    },
    props.value,
    React.createElement('i', {
      className: props.icon,
      style: { marginLeft: 'auto' },
    })
  );
}

"""

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

```

You can find a live version of this example, along with other custom component examples here:

> **[Dash AG Grid Examples: html components](https://dashaggridexamples.pythonanywhere.com/components-html)**
>
> Tutorials, tips & tricks and additional examples to supplement the Dash AG Grid documentation.

---

<div class="post-metadata">

**Author:** ![manish1022iiti](https://avatars.discourse-cdn.com/v4/letter/m/97f17d/32.png) [@manish1022iiti](https://community.plotly.com/u/manish1022iiti)\
**Post date:** [March 8, 2024, 10:23pm UTC](https://community.plotly.com/t/how-to-trigger-cellvaluechanged-callback-on-a-custom-cellrenderer-dropdown-in-a-dash-ag-grid-cell/82630/11 "2024-03-08T22:23:52Z")

</div>

Ah I see, yeah, makes sense! thanks.

---

<div class="post-metadata">

**Author:** ![manish1022iiti](https://avatars.discourse-cdn.com/v4/letter/m/97f17d/32.png) [@manish1022iiti](https://community.plotly.com/u/manish1022iiti)\
**Post date:** [March 8, 2024, 10:24pm UTC](https://community.plotly.com/t/how-to-trigger-cellvaluechanged-callback-on-a-custom-cellrenderer-dropdown-in-a-dash-ag-grid-cell/82630/12 "2024-03-08T22:24:35Z")

</div>

This looks great @AnnMarieW Definitely going to use this! Thank you.

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [March 8, 2024, 10:43pm UTC](https://community.plotly.com/t/how-to-trigger-cellvaluechanged-callback-on-a-custom-cellrenderer-dropdown-in-a-dash-ag-grid-cell/82630/13 "2024-03-08T22:43:55Z")

</div>

I will note, that with the version of 2.16.1 from dash, you can now trigger your own cellValueChanged event via set\_props on the dash\_clientside, you just need to know the id and the props that you are setting.

This would allow for a cellRenderer to interact just like a regular cellEditor. This does require using an id in the grid, which could be passed as a cellRendererParams. 😁

---

<div class="post-metadata">

**Author:** ![manish1022iiti](https://avatars.discourse-cdn.com/v4/letter/m/97f17d/32.png) [@manish1022iiti](https://community.plotly.com/u/manish1022iiti)\
**Post date:** [March 21, 2024, 12:30am UTC](https://community.plotly.com/t/how-to-trigger-cellvaluechanged-callback-on-a-custom-cellrenderer-dropdown-in-a-dash-ag-grid-cell/82630/14 "2024-03-21T00:30:17Z")

</div>

Hello @jinnyzor a bit too late to this thread, and not sure if I understand this fully correctly, but I get the idea that with the said Dash version, we will be able to use “cellRenderer” on clientside to achieve the benefits of a cellEditor too without explicitly defining a “cellEditor”. Is my understanding correct on this? If any example, that would be great.

Thank you.

---

<div class="post-metadata">

**Author:** ![manish1022iiti](https://avatars.discourse-cdn.com/v4/letter/m/97f17d/32.png) [@manish1022iiti](https://community.plotly.com/u/manish1022iiti)\
**Post date:** [March 21, 2024, 12:37am UTC](https://community.plotly.com/t/how-to-trigger-cellvaluechanged-callback-on-a-custom-cellrenderer-dropdown-in-a-dash-ag-grid-cell/82630/15 "2024-03-21T00:37:19Z")

</div>

Hello @AnnMarieW

So I am back to this problem, this time with a slight enhancement that I am trying to achieve.

Now, I want to have a “different” set of dropdown values in each cell of the column. For example, for a column named “Food”, one cell might have options “[veg salad; tofu]” and the other cell might have “[chicken salad, salmon]” for two different people with different food preferences (Assume that this information person-to-food-preferences is available to us and we now to need to display it in the dropdowns in various cells).

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [March 21, 2024, 4:18am UTC](https://community.plotly.com/t/how-to-trigger-cellvaluechanged-callback-on-a-custom-cellrenderer-dropdown-in-a-dash-ag-grid-cell/82630/16 "2024-03-21T04:18:54Z")

</div>

Hi @manish1022iiti

Yes that’s possible - there is an example in the docs where the dropdown in the cell of one column (the city) is based on the value of another column (the country)

> **[Cell Editors | Dash for Python Documentation | Plotly](https://dash.plotly.com/dash-ag-grid/cell-editors#dynamic-parameters)**
>
> Cell Editors in Dash AG Grid

---

<div class="post-metadata">

**Author:** ![manish1022iiti](https://avatars.discourse-cdn.com/v4/letter/m/97f17d/32.png) [@manish1022iiti](https://community.plotly.com/u/manish1022iiti)\
**Post date:** [March 21, 2024, 8:29pm UTC](https://community.plotly.com/t/how-to-trigger-cellvaluechanged-callback-on-a-custom-cellrenderer-dropdown-in-a-dash-ag-grid-cell/82630/17 "2024-03-21T20:29:22Z")

</div>

Hello @AnnMarieW Thanks for sharing this. This is helpful. Do you know how I can maybe pass an additional parameter to the cellEditorParams function that provides the map b/w country-to-cities. Imagine 100 countries and several cities in each of those; I can not hardcode the mapping b/w these countries and cities inside the java script function used by the cellEditorParams, is there a way to do it eloquently?

Thank you.

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [March 22, 2024, 2:10am UTC](https://community.plotly.com/t/how-to-trigger-cellvaluechanged-callback-on-a-custom-cellrenderer-dropdown-in-a-dash-ag-grid-cell/82630/18 "2024-03-22T02:10:19Z")

</div>

Hi @manish1022iiti

Great question!

You can pass a dict from the app to the JavaScript function. It makes the JS function even simpler! Might need update the docs to use this example 🙂

Here’s an example based on the one in the docs:

Put this in the `dashAgGridFunctions.js` file in the `assets` folder:

```js
var dagfuncs = (window.dashAgGridFunctions = window.dashAgGridFunctions || {});

dagfuncs.dynamicOptions = function (params, options) {
    return {values: options[params.data.country]}
};

```

```auto

import dash_ag_grid as dag
from dash import Dash, html

app = Dash( __name__ )

options = {
    "United States": ["Boston", "Seattle", "Chicago"],
    "Canada": ["Vancouver", "Montreal", "Toronto"]
}

columnDefs = [
    {"field": "country"},
    {
        "headerName": "Select Editor",
        "field": "city",
        "editable": True,
        "cellEditor": "agSelectCellEditor",
        "cellEditorParams": {"function": f"dynamicOptions(params, {options})"},
    },

]

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

app.layout = html.Div(
    [
        dag.AgGrid(
            id="cell-editors-dynamic",
            columnDefs=columnDefs,
            rowData=rowData,
            columnSize="sizeToFit",
            dashGridOptions={"animateRows": False},
        ),
    ]
)

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

```

---

<div class="post-metadata">

**Author:** ![manish1022iiti](https://avatars.discourse-cdn.com/v4/letter/m/97f17d/32.png) [@manish1022iiti](https://community.plotly.com/u/manish1022iiti)\
**Post date:** [March 22, 2024, 4:18am UTC](https://community.plotly.com/t/how-to-trigger-cellvaluechanged-callback-on-a-custom-cellrenderer-dropdown-in-a-dash-ag-grid-cell/82630/19 "2024-03-22T04:18:06Z")

</div>

@AnnMarieW Thanks for getting back. This worked for me, thanks a ton!

---

<div class="post-metadata">

**Author:** ![manish1022iiti](https://avatars.discourse-cdn.com/v4/letter/m/97f17d/32.png) [@manish1022iiti](https://community.plotly.com/u/manish1022iiti)\
**Post date:** [March 22, 2024, 4:25am UTC](https://community.plotly.com/t/how-to-trigger-cellvaluechanged-callback-on-a-custom-cellrenderer-dropdown-in-a-dash-ag-grid-cell/82630/20 "2024-03-22T04:25:49Z")

</div>

@AnnMarieW It’s so interesting and exciting to see how Dash has support for doing such nuanced UI things directly or via leveraging ReactJS. I have been using Dash for a few months and now see myself often running into use cases where I might benefit from creating custom components/options as we have been discussing in this thread. I think I should take up a React course to further utilize Dash, haha!

[Next page](https://community.plotly.com/t/how-to-trigger-cellvaluechanged-callback-on-a-custom-cellrenderer-dropdown-in-a-dash-ag-grid-cell/82630.md?page=2)