Urgent issue: Dash callback with ag grid rowData output return the rowdata twice

Dash Python
1

hi i have an issue in dash callback, try to solve it many hours and didn’t success
i added the following callback to dash Ag Grid in order to add new row for editing
each time user start to edit the last row
but in the output i got more rows then i expected its seems that the output is updated twice
but i have no callback with the same output
this is my code
the callback:
@callback(
Output(‘numeric_table’, ‘rowData’),
[Input(‘numeric_table’, ‘cellValueChanged’)],
[State(‘numeric_table’, ‘rowData’)]
)
def add_new_row(cell_value_changed, row_data):
meas_params.numeric_parameters_row_data = row_data
if ctx.triggered[0][‘prop_id’] == ‘numeric_table.cellValueChanged’:
meas_params.numeric_parameters_row_data = row_data
last_row = row_data[-1]
if last_row[‘name’] != ‘’:
new_row = {‘name’: ‘’}
meas_params.numeric_parameters_row_data.append(new_row)
return meas_params.numeric_parameters_row_data
return dash.no_update

the ag grid :
ag.AgGrid(
id=‘numeric_table’,
columnDefs=self.numeric_parameters_column_defs,
rowData=self.numeric_parameters_row_data,
dashGridOptions={‘rowSelection’: ‘single’, “rowMultiSelectWithClick”: False,
“suppressRowClickSelection”: True, “animateRows”: False},
columnSize=“responsiveSizeToFit”,
getRowId=“params.data.index”,
persistence=True,
style={‘width’: ‘100%’, ‘height’: ‘85%’}
)
I would be very grateful to anyone who has a solution for me

2

Hi @leah

Please see this post for more information and examples

3

hi
thanks for responding
i change the callback using ‘rowTransaction’ in output
and again, when i editing one row its return me multiple redundant rows
attached the updated code:
image

4

Hi @leah

Can you please provide a complete minimal example that reproduces the issue?

The likely issue is that you need to also include the id when you add a row.

5

hi @AnnMarieW
please see minimal and simple example that reproduce my problem:(you can run it by yourself and see the issue)

import dash
from dash import dcc, html, ctx
from dash.dependencies import Input, Output, State
from meas_param_component import MeasParameters
import dash_ag_grid as ag


app = dash.Dash(__name__)

grid = ag.AgGrid(id='grid',
				columnDefs=[{'headerName': 'First Name', 'field': 'first_name', 'cellDataType': 'string', 'editable': True},
							{'headerName': 'Last Name', 'field': 'last_name', 'cellDataType': 'string', 'editable': True}],
				rowData=[{'first_name': ''}],
				dashGridOptions={'rowSelection': 'single', "rowMultiSelectWithClick": False,
								 "suppressRowClickSelection": True, "animateRows": False},
				columnSize="responsiveSizeToFit",
				getRowId="params.data.index",
				persistence=True,
			)

app.layout = grid


@app.callback(
	Output('grid', 'rowTransaction'),
	[Input('grid', 'cellValueChanged')],
	[State('grid', 'rowData')]
)
def add_new_row(cell_value_changed, row_data):
	if ctx.triggered[0]['prop_id'] == 'grid.cellValueChanged':
		last_row = row_data[-1]
		if last_row['first_name'] != '':
			new_row = {'first_name': ''}
			return {
				"addIndex": 0,
				"add": [new_row]
			}
if __name__ == '__main__':
    app.run_server(debug=True)
6

getRowId="params.data.index" is causing the issue. Comment it out.

7

Thank you very very much