Merge pull request #201 from Farkites/cell-double-click

Add onCellDoubleClicked event

CHANGELOG.md

@@ -6,24 +6,20 @@ Links "DE#nnn" prior to version 2.0 point to the Dash Enterprise closed-source D
 
 ## [unreleased]
 
-### Removed
-
 ### Added
+- [#201](https://github.com/plotly/dash-ag-grid/pull/201) Add `cellDoubleClicked` prop, which works exactly like `cellClicked`
 
 ### Updated
 - [#174](https://github.com/plotly/dash-ag-grid/pull/174)
   - `columnState` floats during grid interaction and only gets pushed when sent in a callback
   - `columnDefs` trumps `columnState` if it is pushed in a callback without a `columnState`
 
 ### Fixed
-- [#174](https://github.com/plotly/dash-ag-grid/pull/174)
-  - `Markdown` renderer now displays a blank cell rather than writing `undefined` if there is no value. Fixes [#171](https://github.com/plotly/dash-ag-grid/issues/171)
+- [#174](https://github.com/plotly/dash-ag-grid/pull/174) Fix [#171](https://github.com/plotly/dash-ag-grid/issues/171): `Markdown` renderer now displays a blank cell rather than writing `undefined` if there is no value
 
-- [#204](https://github.com/plotly/dash-ag-grid/pull/204)
-  - `filterOptions` now will working with being a regular object
+- [#204](https://github.com/plotly/dash-ag-grid/pull/204) `filterOptions` will now work as a regular object
 
-- [#206](https://github.com/plotly/dash-ag-grid/pull/206)
-  - fixes [#195](https://github.com/plotly/dash-ag-grid/issues/195) where if the user was to redo the exact same action causing the grid to not trigger the `cellValueChanged` another subsequent time
+- [#206](https://github.com/plotly/dash-ag-grid/pull/206) Fix [#195](https://github.com/plotly/dash-ag-grid/issues/195) where if the user was to redo the exact same action, callbacks on `cellValueChanged` would not trigger again. Fix by adding `timestamp` into the object, as we have in other event-type props to make them unique.
 
 ## [2.0.0] - 2023-05-02
 

docs/examples/getting_started/quickstart.py

@@ -10,7 +10,12 @@
     id="quickstart-grid",
     rowData=df.to_dict("records"),
     columnDefs=[{"field": i} for i in df.columns],
-    defaultColDef={"resizable": True, "sortable": True, "filter": True, "minWidth":125},
+    defaultColDef={
+        "resizable": True,
+        "sortable": True,
+        "filter": True,
+        "minWidth": 125,
+    },
     columnSize="sizeToFit",
 )
 

docs/examples/selection/double_clicked_cell.py

@@ -0,0 +1,33 @@
+from dash import Dash, html, Input, Output
+import dash_ag_grid as dag
+import pandas as pd
+
+df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/solar.csv")
+
+app = Dash(__name__)
+
+grid = dag.AgGrid(
+    id="grid",
+    rowData=df.to_dict("records"),
+    columnDefs=[{"field": i} for i in df.columns],
+    defaultColDef={
+        "resizable": True,
+        "sortable": True,
+        "filter": True,
+        "minWidth": 125,
+    },
+    columnSize="sizeToFit",
+)
+
+app.layout = html.Div([grid, html.Div(id="output")])
+
+
+@app.callback(Output("output", "children"), Input("grid", "cellDoubleClicked"))
+def display_cell_double_clicked_on(cell):
+    if cell is None:
+        return "Double click on a cell"
+    return f"Double clicked on cell value: {cell['value']}, column: {cell['colId']}, row index: {cell['rowIndex']}"
+
+
+if __name__ == "__main__":
+    app.run_server(debug=True)

docs/pages/selection/cell_selection.py

@@ -9,7 +9,6 @@
     order=0,
     description=app_description,
     title="Dash AG Grid - Cell Selection",
-
 )
 
 text1 = """
@@ -45,10 +44,18 @@
 """
 
 
+text3 = """
+### Cell selection with Double click
+
+In the same way you can use the prop `cellDoubleClicked` to select cells double clicking
+
+"""
 layout = html.Div(
     [
         make_md(text1),
         example_app("examples.getting_started.quickstart", make_layout=make_tabs),
+        make_md(text3),
+        example_app("examples.selection.double_clicked_cell", make_layout=make_tabs),
         # up_next("text"),
     ],
 )

src/lib/components/AgGrid.react.js

@@ -600,6 +600,36 @@ DashAgGrid.propTypes = {
         timestamp: PropTypes.any,
     }),
 
+    /**
+     * Cell is double clicked.
+     */
+    cellDoubleClicked: PropTypes.shape({
+        /**
+         * value of the double-clicked cell
+         */
+        value: PropTypes.any,
+
+        /**
+         * column where the cell was double-clicked
+         */
+        colId: PropTypes.any,
+
+        /**
+         * rowIndex, typically a row number
+         */
+        rowIndex: PropTypes.number,
+
+        /**
+         * Row Id from the grid, this could be a number automatically, or set via getRowId
+         */
+        rowId: PropTypes.any,
+
+        /**
+         * timestamp of last action
+         */
+        timestamp: PropTypes.any,
+    }),
+
     /**
      * The actively selected rows from the grid (may include filtered rows)
      * Can take one of three forms:

src/lib/fragments/AgGrid.react.js

@@ -112,6 +112,7 @@ export default class DashAgGrid extends Component {
         this.onGridReady = this.onGridReady.bind(this);
         this.onSelectionChanged = this.onSelectionChanged.bind(this);
         this.onCellClicked = this.onCellClicked.bind(this);
+        this.onCellDoubleClicked = this.onCellDoubleClicked.bind(this);
         this.onCellValueChanged = this.onCellValueChanged.bind(this);
         this.onRowDataUpdated = this.onRowDataUpdated.bind(this);
         this.onFilterChanged = this.onFilterChanged.bind(this);
@@ -814,6 +815,19 @@ export default class DashAgGrid extends Component {
         });
     }
 
+    onCellDoubleClicked({value, column: {colId}, rowIndex, node}) {
+        const timestamp = Date.now();
+        this.props.setProps({
+            cellDoubleClicked: {
+                value,
+                colId,
+                rowIndex,
+                rowId: node.id,
+                timestamp,
+            },
+        });
+    }
+
     onCellValueChanged({
         oldValue,
         value,
@@ -1250,6 +1264,7 @@ export default class DashAgGrid extends Component {
                     onGridReady={this.onGridReady}
                     onSelectionChanged={this.onSelectionChanged}
                     onCellClicked={this.onCellClicked}
+                    onCellDoubleClicked={this.onCellDoubleClicked}
                     onCellValueChanged={this.onCellValueChanged}
                     onFilterChanged={this.onFilterChanged}
                     onSortChanged={this.onSortChanged}