[AG-Grid] Get cellValueChanged and effected calculated column?

Dash Python
1

I have an app where I am letting a user edit some data and then insert it into a DB. I would like to capture the changed cell as well as the calculated column that also gets changed (Total in the example below.) Is there any easy way to do this?

import plotly.express as px
from dash import Dash, Input, Output, callback, dcc, html

app = Dash(
    __name__,
    suppress_callback_exceptions=True,
)

df = px.data.medals_wide()

columnDefs = [
    {
        "field": i,
    }
    for i in df.columns
]

total_medals = {
    "headerName": "Total",
    "colID": "medals_total",
    "valueGetter": {
        "function": "params.getValue('gold') + params.getValue('silver') + params.getValue('bronze');"
    },
}

columnDefs.insert(4, total_medals)

app.layout = html.Div(
    [
        dcc.Markdown("This grid has string editing enabled on all columns"),
        dag.AgGrid(
            id="basic-editing-example",
            columnDefs=columnDefs,
            rowData=df.to_dict("records"),
            columnSize="sizeToFit",
            defaultColDef={"editable": True},
            dashGridOptions={"animateRows": False},
        ),
        html.Div(id="edited-cell"),
    ]
)


@callback(
    Output("edited-cell", "children"),
    Input("basic-editing-example", "cellValueChanged"),
)
def cellChange(cell):
    return f"{cell}"


if __name__ == "__main__":
    app.run_server(debug=True, port=8080)
2

Hi @Zak

Try running this example. In this version the valueGetter adds the total to data


import plotly.express as px
from dash import Dash, Input, Output, callback, dcc, html
import dash_ag_grid as dag

app = Dash(
    __name__,
    suppress_callback_exceptions=True,
)

df = px.data.medals_wide()

columnDefs = [
    {
        "field": i,
    }
    for i in df.columns
]

total_medals = {
    "headerName": "Total",
    "valueGetter": {"function": "valueGetterTotal(params)"},
    "editable": False
}

columnDefs.insert(4, total_medals)

app.layout = html.Div(
    [
        dcc.Markdown("This grid has string editing enabled on all columns"),
        dag.AgGrid(
            id="basic-editing-example",
            columnDefs=columnDefs,
            rowData=df.to_dict("records"),
            columnSize="sizeToFit",
            defaultColDef={"editable": True},
            dashGridOptions={"animateRows": False},
        ),
        html.Div(id="edited-cell"),
    ]
)


@callback(
    Output("edited-cell", "children"),
    Input("basic-editing-example", "cellValueChanged"),
)
def cellChange(cell):
    return f"{cell}"


if __name__ == "__main__":
    app.run_server(debug=True, port=8080)
    

"""
Add the following to the dashAgGridFunctions.js file in the assets folder
-----------

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


dagfuncs.valueGetterTotal = (params) => {
   const newTotal = params.data.gold + params.data.silver + params.data.bronze  

   // save the calculated data to `rowData` in the  "total" column
   params.data.total = newTotal

   return newTotal
}

"""
2 Likes
4

Thank you! Works like a charm!

1 Like