How to update a single-cell value in plotly dash ag grid?

Question

I am a bit new to Plotly Dash and AG Grid, but basically I am creating an Ag grid with dash and i am trying to update a cell value based on another editable cell:

curves_grid = dash.Dash(__name__, external_stylesheets=[dbc.themes.LITERA])

# Define the layout of the app
gbp_curves_grid.layout = html.Div([
    dag.AgGrid(
        id='curves_grid',
        columnDefs=[
            {'field': 'A', 'editable': False},
            {'field': 'B', 'editable': True},
            {'field': 'C', 'editable': False, "cellRenderer": "agAnimateShowChangeCellRenderer"},
            {'field': 'D', 'editable': False},
        ],
        rowData=df_curves.to_dict("records"),
        enableEnterpriseModules=True,
        getRowId="params.data.id",
    ),

])

@curves_grid.callback(Output('curves_grid', 'rowTransaction'), 
                          Input('curves_grid', 'cellValueChanged'),
                         prevent_initial_call=True,)
def update_close(row_changed):

    if row_changed: row_changed[0]['data']['D'] = 40
    
    return {"update": row_changed}

So basically I am trying to update the cell in column D to 40 if something is entered in the cell in column B...

Any idea?

Thanks

Answer 1

I tested with some sample data and it's working fine. You need some adjustments in the update function like below:

import dash
from dash.dependencies import Input, Output
from dash import html
import dash_ag_grid as dag
import dash_bootstrap_components as dbc

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.LITERA])

# Define the layout of the app
app.layout = html.Div([
    dag.AgGrid(
        id='curves_grid',
        columnDefs=[
            {'field': 'A', 'editable': False},
            {'field': 'B', 'editable': True},
            {'field': 'C', 'editable': False, "cellRenderer": "agAnimateShowChangeCellRenderer"},
            {'field': 'D', 'editable': False},
        ],
        rowData=[
            {"id": 1, "A": 1, "B": 0, "C": 10, "D": 20},
            {"id": 2, "A": 2, "B": 0, "C": 15, "D": 25}
        ],
        enableEnterpriseModules=True,
        getRowId="params.data.id",
    ),
])

# Callback to update column D based on changes in column B
@app.callback(
    Output('curves_grid', 'rowTransaction'),
    Input('curves_grid', 'cellValueChanged'),
    prevent_initial_call=True
)
def update_close(cell_changes):
    if cell_changes and isinstance(cell_changes, list):
        change = cell_changes[0]  # Get the first change event
        
        # Check if the change is in column 'B'
        if change['colId'] == 'B':
            # Get the row data and update column 'D'
            updated_row = change['data']
            updated_row['D'] = 40  # Set the value of column D to 40
            
            # Return the updated row as a transaction to update the grid
            return {"update": [updated_row]}
    
    return dash.no_update

if __name__ == '__main__':
    app.run_server(debug=True)