Copy row selected dash ag-grid

Dash Python
1

Hi everyone,
My application is using dash-ag grid, and I need to implement the copy functionality. And I need to user attribute copySelectedRows: true, like rowSelection: { mode: "multiRow", copySelectedRows: true, },
In the documentation I don’t find any property copySelectedRows. So does Dash ag grid support this property?
Here is an example of javascript code using the copySelectRows property. Example use code javascript

2

Hi @ducnv

Valid AG Grid props can be passed to the grid using the dashGridOptions. Note that rowSelection requires a dict like this:

dashGridOptions={
            "enableRangeSelection": True,
            "rowSelection": {
                "mode": "multiRow",
                "copySelectedRows": True,
                "enableClickSelection": True
            },
        },


import dash
from dash import dcc, html, Input, Output, State
import dash_ag_grid as dag
import pandas as pd

app = dash.Dash(__name__)

df = pd.DataFrame({
    'Name': ['John', 'Jane', 'Doe'],
    'Age': [28, 34, 45],
    'City': ['New York', 'Paris', 'London']
})


columns = [
    {
        "headerName": "Name",
        "field": "Name",
        "checkboxSelection": True,
        # "headerCheckboxSelection": True
    },
    {"headerName": "Age", "field": "Age"},
    {"headerName": "City", "field": "City"},
]



# Layout
app.layout = html.Div([
    html.H3("Dash AG Grid - Example"),
    dag.AgGrid(
        id="my-grid",
        columnDefs=columns,
        rowData=df.to_dict("records"),
        defaultColDef={"editable": True},
        dashGridOptions={
            "enableRangeSelection": True,
            "rowSelection": {
                "mode": "multiRow",
                "copySelectedRows": True,
                "enableClickSelection": True
            },
        },
        style={'height': '300px', 'width': '100%'},
        enableEnterpriseModules=True,

    ),
    html.Button("Add new Row", id="add-row-btn", n_clicks=0),
])

# Callback add new row
@app.callback(
    Output("my-grid", "rowData"),
    Input("add-row-btn", "n_clicks"),
    State("my-grid", "rowData"),
    prevent_initial_call=True
)
def add_row(n_clicks, row_data):
    if n_clicks > 0:
        new_row = {"Name": "", "Age": 0, "City": ""}
        row_data.append(new_row)
    return row_data

# Run app
if __name__ == "__main__":
    app.run_server(debug=True)
1 Like
3

Hi @AnnMarieW

Thank you for your response. I tried setting up the copySelectedRow property as you suggested:

dashGridOptions={
            "enableRangeSelection": True,
            "rowSelection": {
                "mode": "multiRow",
                "copySelectedRows": True,
                "enableClickSelection": True
            },
        },

However, it seems that it’s not working exactly 100% like the JavaScript code (the code I attached in the Example use code javascript). When using the property as you suggested, I encounter the following issue:

  • The user clicks on a cell.
  • The user then clicks on the checkbox to select a row and presses ctrl+c.
  • The problem arises here; I can only copy one cell, not the entire row.
  • This issue does not occur with the JavaScript code.
    I think this might be a bug, and I’ve created an issue on GitHub. You can see it in the video attached to the issue. (issue github)

Thank you.

4

Hi @ducnv

I see the problem… it looks like AG Grid made big changes in the selected rows API in recent versions. The javascript link you provided uses 32.2.2. Dash AG Grid is using 31.2.1

If you are referring to the upstream docs, be sure to use the version that’s associated with the Dash version. For example this is the correct version of the AG grid docs for dag 31.2.0:

https://www.ag-grid.com/archive/31.2.0/react-data-grid/row-selection/

Here is how you do it in the current dash version:

You can see this example live on PyCafe

import dash
from dash import dcc, html, Input, Output, State
import dash_ag_grid as dag
import pandas as pd

app = dash.Dash(__name__)

df = pd.DataFrame({
    'Name': ['John', 'Jane', 'Doe'],
    'Age': [28, 34, 45],
    'City': ['New York', 'Paris', 'London']
})


columns = [
    {
        "headerName": "Name",
        "field": "Name",
        "checkboxSelection": True,
        # "headerCheckboxSelection": True
    },
    {"headerName": "Age", "field": "Age"},
    {"headerName": "City", "field": "City"},
]



# Layout
app.layout = html.Div([
    html.H3("Dash AG Grid - Example"),
    dag.AgGrid(
        id="my-grid",
        columnDefs=columns,
        rowData=df.to_dict("records"),
        defaultColDef={"editable": True},
        dashGridOptions={        
            "rowSelection": "multiple",        
            "rowMultiSelectWithClick": True,                       
        },
        style={'height': '300px', 'width': '100%'},
        enableEnterpriseModules=True,

    ),
    html.Button("Add new Row", id="add-row-btn", n_clicks=0),
])

# Callback add new row
@app.callback(
    Output("my-grid", "rowData"),
    Input("add-row-btn", "n_clicks"),
    State("my-grid", "rowData"),
    prevent_initial_call=True
)
def add_row(n_clicks, row_data):
    if n_clicks > 0:
        new_row = {"Name": "", "Age": 0, "City": ""}
        row_data.append(new_row)
    return row_data

# Run app
if __name__ == "__main__":
    app.run_server(debug=True)
1 Like