plotly / dash-ag-grid

Dash AG Grid is a high-performance and highly customizable component that wraps AG Grid, designed for creating rich datagrids.
https://dash.plotly.com/dash-ag-grid
MIT License
174 stars 24 forks source link

[BUG] copy selected rows #335

Open ducnv123 opened 1 day ago

ducnv123 commented 1 day ago

Hello everyone,

My application is using dash-ag grid, and I need to implement the copy functionality. Currently, my application is encountering the following issue:

  1. When a user clicks on a row and presses Ctrl+C to copy (note that my application needs to set the enableRangeSelection property to True).
  2. However, when pressing Ctrl+C, I can only copy a single cell. My expectation is that pressing Ctrl+C should allow me to copy the entire row. (In the video I’ve attached, you will see the issue.)
  3. I have built an application that only uses ag-grid and found that when the "cell selection" (enableRangeSelection:True) property is set to True, I can still copy the entire row (I’m sending that code snippet in the attached link). Link code example ag-grid
  4. I think this is a bug with dash ag-grid; perhaps dash ag-grid does not allow setting the copySelectedRows property to true. I read the documentation but did not find any mention of the copySelectedRows property.
  5. Is there a solution for me to set up the copySelectedRows property in dash ag-grid?

https://github.com/user-attachments/assets/298d5abb-d20b-4bf5-8283-73cd08a3496e

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": "multiple",  
        },
        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)
BSd3v commented 1 day ago

Hello @ducnv123

Any property that is not explicitly listed, can be placed in DashGridOptions key in the component.

AnnMarieW commented 1 day ago

Answered on the forum with an example https://community.plotly.com/t/copy-row-selected-dash-ag-grid/88026/2?u=annmariew