Dash Aggrid : Callback when Dragging Rows

Dash Python
1

How can i trigger a callback after rows are dragged?

in the docs of the React Aggrig we can find the rowDragEnd event.

Here is a snippet where I used ‘columnState’ to trigger the callback
It runs when sorting rows by columns by clicking the headers.
But nothing happens when sorting by dragging rows.

import json, random
import dash
from dash import Dash, html, Input, Output, State
import dash_ag_grid as dag

app = dash.Dash(__name__)

row_data = [{'id':id, **{f'col{i}':random.randint(1,100) for i in range(5)}} for id in ['A','B','C','D','E']]
col_defs = [{'field' : col, 'suppressMovable':True, 'rowDrag': True} if col=='id' else {'field' : col} for col in row_data[0]]

app.layout = html.Div([
                    dag.AgGrid(
                        id="aggrid",
                        rowData=row_data,
                        columnDefs=col_defs,
                        defaultColDef={"resizable": True, "sortable": True, "filter": True, "minWidth":125},
                        columnSize="sizeToFit",
                        dashGridOptions={
                            "rowDragManaged": True,
                            "rowDragMultiRow": True, 
                            'animateRows': True,
                            "rowSelection": "multiple",
                            },
                        getRowId="params.data.id",
                        ),
                    html.Div('Columnstate :'),
                    html.Pre('My reordered columnstate...',id = 'out1'),
                    html.Div('rowData :'),
                    html.Pre('My reordered rowdata or something...',id = 'out2'),
                    ],
                      )


@app.callback(
    [
        Output("out1", "children"), 
        Output("out2", "children"),
        ], 
    #Input("aggrid", "rowDragEnd"),  # React Aggrid docs : https://www.ag-grid.com/javascript-data-grid/grid-events/#reference-rowDragDrop-rowDragEnd
    Input("aggrid", "columnState"),
 
    State("aggrid", "rowData"),

    prevent_initial_call=True,
)
def clear_sequence_table(
    #rowdragend,
    columnstate, 
    rowdata
    ):
    return (
        json.dumps(columnstate, indent = 4), 
        json.dumps(rowdata, indent = 4)
        )



if __name__ == '__main__':
    #app.run_server(debug=False)  # Bulletpoint DEBUG
    app.run(debug=True)

Does anyone know how to do this?

Thx

PS : Is there any place where we can find a list proper of the dash_aggrid callbacks ?
[cellchanged, filterchanged, rowdata, …]

2

Hello @popo,

This you can determine by listening to the virtualRowData, you can also subscribe to other event listeners by using the getApi and register event listeners using addEventListener

3

Ok virtualRowData does the trick

1 Like