# Update selectedRows and rowData of AgGrid at once

**URL:** <https://community.plotly.com/t/update-selectedrows-and-rowdata-of-aggrid-at-once/84045>\
**Category:** Dash Python\
**Created:** [April 26, 2024, 10:25am UTC](https://community.plotly.com/t/update-selectedrows-and-rowdata-of-aggrid-at-once/84045 "2024-04-26T10:25:11Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![luggie](https://avatars.discourse-cdn.com/v4/letter/l/0ea827/32.png) [@luggie](https://community.plotly.com/u/luggie)\
**Post date:** [April 26, 2024, 10:25am UTC](https://community.plotly.com/t/update-selectedrows-and-rowdata-of-aggrid-at-once/84045/1 "2024-04-26T10:25:12Z")

</div>

I’d like to select rows in a grid, according to a selection made in a graph. At the same time I’d like to move the selected points on top. As far as I can see, there is now order-by-selection-method or anything like that.  
When trying to do so: The ordering done but that resets the grid and the `selectedData` disappears:

```auto
import numpy as np
import plotly.graph_objects as go
from dash import Dash, html, dcc, callback
from dash.dependencies import Input, Output, State
import dash_ag_grid as dag

app = Dash( __name__ )

np.random.seed(0)
x = np.random.rand(50)
y = np.random.rand(50)

app.layout = html.Div([
    dcc.Graph(
        id='graph',
        figure={
            'data': [go.Scatter(x=x, y=y, mode='markers')],
            'layout': go.Layout(
                xaxis=dict(title='X'),
                yaxis=dict(title='Y'),
                hovermode='closest'
            )
        }
    ),
    dag.AgGrid(
        id="grid",
        columnDefs=[
            {"field": "x", "sortable": True, "filter": True},
            {"field": "y", "sortable": True, "filter": True},
        ],
        rowData=[{"x": x_val, "y": y_val, "id": i} for i, (x_val, y_val) in enumerate(zip(x, y))]),
])

@callback(
    Output('grid', 'rowData'),
    Input('graph', 'selectedData'),
    State('grid', 'rowData'),
    prevent_initial_call=True,
)
def update_grid(selected_data, row_data):
    if selected_data:
        selected_points = selected_data['points']
        selected_ids = [point['pointIndex'] for point in selected_points]
        for row in row_data:
            if row['id'] in selected_ids:
                row['selected'] = True
            else:
                row['selected'] = False
        sorted_row_data = sorted(row_data, key=lambda row: not row['selected'])
        return sorted_row_data
    return row_data

@callback(
    Output('grid', 'selectedRows'),
    Input('graph', 'selectedData'),
    State('grid', 'rowData'),
    prevent_initial_call=True,
)
def update_selected_rows(selected_data, row_data):
    if selected_data:
        selected_points = selected_data['points']
        selected_ids = [point['pointIndex'] for point in selected_points]
        selected_rows = [str(row['id']) for row in row_data if row['id'] in selected_ids]
        return {"ids": selected_rows}
    return {"ids": []}

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

```

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [April 26, 2024, 10:32am UTC](https://community.plotly.com/t/update-selectedrows-and-rowdata-of-aggrid-at-once/84045/2 "2024-04-26T10:32:07Z")

</div>

Hello @luggie,

This is a known issue and will be fixed with an updated release shortly.

@nathandrezner is so close to being done with his updates. 😁

---

<div class="post-metadata">

**Author:** ![luggie](https://avatars.discourse-cdn.com/v4/letter/l/0ea827/32.png) [@luggie](https://community.plotly.com/u/luggie)\
**Post date:** [June 2, 2024, 7:43am UTC](https://community.plotly.com/t/update-selectedrows-and-rowdata-of-aggrid-at-once/84045/3 "2024-06-02T07:43:33Z")

</div>

> - [#283](https://github.com/plotly/dash-ag-grid/pull/283)/[#290](https://github.com/plotly/dash-ag-grid/pull/290) by [@BSd3v](https://github.com/BSd3v)
> - `selectedRows` can now be passed along with the `rowData`
> - fixes [#274](https://github.com/plotly/dash-ag-grid/issues/274)
> - fixes [#282](https://github.com/plotly/dash-ag-grid/issues/282)

I thought this fix in [Dash-AG-Grid 31.2.0](https://github.com/plotly/dash-ag-grid/releases/tag/v31.2.0) would have solved this. Was it concerning something else or am I missing something?

I tried my above example again and another, slightly altered one with an intermediate trigger-div:

```auto

import numpy as np
import plotly.graph_objects as go
from dash import Dash, html, dcc, callback, no_update
from dash.dependencies import Input, Output, State
import dash_ag_grid as dag

app = Dash( __name__ )

np.random.seed(0)
x = np.random.rand(10)
y = np.random.rand(10)

app.layout = html.Div([
    dcc.Graph(
        id='graph',
        figure={
            'data': [go.Scatter(x=x, y=y, mode='markers')],
            'layout': go.Layout(
                xaxis=dict(title='X'),
                yaxis=dict(title='Y'),
                hovermode='closest'
            )
        }
    ),
    dag.AgGrid(
        id="grid",
        columnDefs=[
            {"field": "x", "sortable": True, "filter": True},
            {"field": "y", "sortable": True, "filter": True},
        ],
        rowData=[{"x": x_val, "y": y_val, "id": i} for i, (x_val, y_val) in enumerate(zip(x, y))]),
    html.Div(id='trigger-selection', style={'display': 'none'}, children=None),
])

@callback(
    Output('trigger-selection', 'children'),
    Output('grid', 'rowData'),
    Input('graph', 'selectedData'),
    State('grid', 'rowData'),
    prevent_initial_call=True,
)
def update_and_sort_grid(selected_data, row_data):
    if selected_data:
        selected_points = selected_data['points']
        selected_ids = [point['pointIndex'] for point in selected_points]
        for row in row_data:
            if row['id'] in selected_ids:
                row['selected'] = True
            else:
                row['selected'] = False
        sorted_row_data = sorted(row_data, key=lambda row: not row['selected'])
        return "select", sorted_row_data
    return None, row_data

@callback(
    Output('grid', 'selectedRows'),
    Input('trigger-selection', 'children'),
    State('graph', 'selectedData'),
    State('grid', 'rowData'),
    prevent_initial_call=True,
)
def update_selected_rows(trigger, selected_data, row_data):
    if selected_data and trigger is not None:
        selected_points = selected_data['points']
        selected_ids = [point['pointIndex'] for point in selected_points]
        selected_rows = [str(row['id']) for row in row_data if row['id'] in selected_ids]
        return {"ids": selected_rows}
    return {"ids": []}

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

```

or with all functionality in just one callback:

```auto
import numpy as np
import plotly.graph_objects as go
from dash import Dash, html, dcc, callback
from dash.dependencies import Input, Output, State
import dash_ag_grid as dag

app = Dash( __name__ )

np.random.seed(0)
x = np.random.rand(10)
y = np.random.rand(10)

app.layout = html.Div([
    dcc.Graph(
        id='graph',
        figure={
            'data': [go.Scatter(x=x, y=y, mode='markers')],
            'layout': go.Layout(
                xaxis=dict(title='X'),
                yaxis=dict(title='Y'),
                hovermode='closest'
            )
        }
    ),
    dag.AgGrid(
        id="grid",
        columnDefs=[
            {"field": "x", "sortable": True, "filter": True},
            {"field": "y", "sortable": True, "filter": True},
        ],
        rowData=[{"x": x_val, "y": y_val, "id": i} for i, (x_val, y_val) in enumerate(zip(x, y))]),
])

@callback(
    Output('grid', 'selectedRows'),
    Output('grid', 'rowData'),
    Input('graph', 'selectedData'),
    State('grid', 'rowData'),
    prevent_initial_call=True,
)
def update_and_sort_grid(selected_data, row_data):
    if selected_data:
        selected_points = selected_data['points']
        selected_ids = [point['pointIndex'] for point in selected_points]
        selected_rows = [str(row['id']) for row in row_data if row['id'] in selected_ids]
        selected_points = selected_data['points']
        selected_ids = [point['pointIndex'] for point in selected_points]
        for row in row_data:
            if row['id'] in selected_ids:
                row['selected'] = True
            else:
                row['selected'] = False
        sorted_row_data = sorted(row_data, key=lambda row: not row['selected'])
        return {"ids": selected_rows}, sorted_row_data
    return None, row_data

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

```

but both are still not able to select and sort the grid at the same time ☹

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [June 2, 2024, 2:31pm UTC](https://community.plotly.com/t/update-selectedrows-and-rowdata-of-aggrid-at-once/84045/4 "2024-06-02T14:31:43Z")

</div>

Hi @luggie

Starting from the code in the original post, it will work if you add ` getRowId="params.data.id",`  
It’s also easier to see that the rows are selected by using checkboxes.

Try it with the grid defined like this:

```auto
dag.AgGrid(
        id="grid",
        columnDefs=[
            {"field": "x", "sortable": True, "filter": True, "checkboxSelection": True},
            {"field": "y", "sortable": True, "filter": True},
        ],
        rowData=[{"x": x_val, "y": y_val, "id": i} for i, (x_val, y_val) in enumerate(zip(x, y))],
        getRowId="params.data.id",
        dashGridOptions={
            "rowSelection": "multiple",
            "suppressRowClickSelection": True,
            "animateRows": False},
    ),

```