Dash AG Grid Cell Renderer for delete button doesn't remove row from row Data

Dash Python
1

hi,
i want to add to dash ag grid, a column with button for delete the row.
i use cell renderer, and in the GUI i really see the row removeג but when i enter again to the grid i see the deleted row, it seems that this only remove for gui and not behind from the row data list
please see my code:
under assets i added js file - dashAgGridComponentFunctions.js
Code in js file:
var dagfuncs = window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {};

dagfuncs.DeleteButton = function (props) {
function onClick() {
props.api.applyTransaction({ remove: [props.node.data] })
}
return React.createElement(
“button”,
{onClick},
‘X’);
};

The columns defs of the grid:

self.objectives_column_defs = [
{‘headerName’: ‘Task’, ‘field’: ‘task’},
{‘headerName’: ‘Objective’, ‘field’: ‘objective’},
{‘headerName’: ‘Goal’, ‘field’: ‘goal’, ‘cellDataType’: ‘text’, ‘editable’: True},
{‘headerName’: ‘Weight’, ‘field’: ‘weight’, ‘cellDataType’: ‘number’, ‘editable’: True},
{‘cellRenderer’: ‘DeleteButton’}
]

I would be very grateful if you can help me with that!!

2

Hi @leah

In the callback, try using the virtualRowData as the Input.

3

hi @AnnMarieW ,
first, thanks you!!
in which callback do you mean to change to virtualRowData ?
i have many callbacks in my app
do you mean to add new callback for that?

4

Oh, I was assuming that you were using a callback to access the grid data after the rows were deleted.

Can you give more information on why you say it’s not updating the row data? It seems to work for me.

5

for one grid i have a callback with input ‘cellValueChanged’
and for the second grid i have a callback with input ‘selectedRows’
both grid doest realy delete the rows

6

Sorry, I’m not fully understanding the issue. Could you please make a complete minimal example that reproduces the issue?

1 Like
7

@AnnMarieW
please look at minimal example, if i delete a row and after that add new row
its show me again the deleted row

Code:

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},
							{'cellRenderer': 'DeleteButton'}],
				rowData=[{'first_name': ''}],
				dashGridOptions={'rowSelection': 'single', "rowMultiSelectWithClick": False,
								 "suppressRowClickSelection": True, "animateRows": False},
				columnSize="responsiveSizeToFit",
				persistence=True,
			)

app.layout = html.Div(children=[grid, html.Button(id='add_row', children=['Add Row'])])

@app.callback(
	Output('grid', 'rowData'),
	Input('add_row', 'n_clicks'),
	State('grid', 'rowData')
)
def add_row(click, row_data):
	if click:
		row_data.append({'first_name': ''})
	return row_data

@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)

**The js code for cell renderer:**

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


dagfuncs.DeleteButton = function (props) {
	function onClick() {
 props.api.applyTransaction({ remove: [props.node.data] })
 	}
	return React.createElement(
			"AmtButton",
			{onClick},
			'X');
};
8

i try to use as the callback State also the virtualRowData and not its look goood
can you explain me way
what the uses of virtualRowData vs rowData?

9

Try changing your first callback to:


@app.callback(
	Output('grid', 'rowData'),
	Input('add_row', 'n_clicks'),
	State('grid', 'virtualRowData')
)

Although this isn’t the best way to do it - the second callback where you use rowTransactions is more efficient.