Merge pull request #352 from BSd3v/adding-event-data

Adding EventData Prop

Author: gvwilson

CHANGELOG.md

@@ -10,6 +10,9 @@ Links "DE#nnn" prior to version 2.0 point to the Dash Enterprise closed-source D
  - [#346](https://github.com/plotly/dash-ag-grid/pull/346) Fixes issue [#347](https://github.com/plotly/dash-ag-grid/issues/347) where styling wasnt considering if the grid had rows without `data`. This is related to the alteration in [#332](https://github.com/plotly/dash-ag-grid/pull/332)
  - [#353](https://github.com/plotly/dash-ag-grid/pull/353) Adjustments for support of Dash 3
 
+### Added
+- [#352](https://github.com/plotly/dash-ag-grid/pull/352) Adds `eventData` prop for devs to send arbitrary events from the grid events complete with an auto timestamp
+
 ## [31.3.0] - 2024-11-22
 
 ### Fixed

src/lib/components/AgGrid.react.js

@@ -533,6 +533,21 @@ DashAgGrid.propTypes = {
      */
     eventListeners: PropTypes.objectOf(PropTypes.array),
 
+    /**
+     * Object of Event Data from the grid, based upon when a user triggered an event with an event listener.
+     */
+    eventData: PropTypes.shape({
+        /**
+         * Data that the developers passes back
+         */
+        data: PropTypes.any,
+
+        /**
+         * Timestamp of when the event was fired
+         */
+        timestamp: PropTypes.any,
+    }),
+
     /********************************
      * GRID PROPS
      *******************************/

src/lib/fragments/AgGrid.react.js

@@ -174,6 +174,15 @@ export default class DashAgGrid extends Component {
                 this.props.setProps(propsToSet);
             }
         };
+        this.setEventData = (data) => {
+            const timestamp = Date.now();
+            this.customSetProps({
+                eventData: {
+                    data,
+                    timestamp,
+                },
+            });
+        };
 
         this.convertedPropCache = {};
 
@@ -1100,6 +1109,7 @@ export default class DashAgGrid extends Component {
             ...customFunctions,
             ...window.dashAgGridFunctions,
             setGridProps: this.customSetProps,
+            setEventData: this.setEventData,
         };
         return (params) => evaluate(parsedCondition, {params, ...context});
     });

src/lib/utils/propCategories.js

@@ -347,6 +347,7 @@ export const PROPS_NOT_FOR_AG_GRID = [
     'columnSize',
     'scrollTo',
     'eventListeners',
+    'eventData',
 ];
 
 /**
@@ -364,6 +365,7 @@ export const OMIT_PROP_RENDER = [
     'paginationInfo',
     'cellRendererData',
     'cellDoubleClicked',
+    'eventData',
 ];
 
 /**

tests/assets/dashAgGridFunctions.js

@@ -499,3 +499,9 @@ dagfuncs.showOutput = (params, setGridProps) => {
 dagfuncs.sortColumns = (a, b) => b.localeCompare(a)
 
 // BEGIN test_pivot_column_order.py
+
+
+dagfuncs.TestEvent = (params, setEventData) => {
+    console.log(params)
+    setEventData('here I am')
+}

tests/test_event_listeners.py

@@ -1,8 +1,11 @@
 import dash_ag_grid as dag
-from dash import Dash, html, dcc, Input, Output, State
+from dash import Dash, html, dcc, Input, Output, State, Patch
 import plotly.express as px
 from . import utils
 import json
+from selenium.webdriver.common.by import By
+from dash.testing.wait import until
+
 
 df = px.data.medals_wide()
 
@@ -84,3 +87,38 @@ def test_el002_event_listener(dash_duo):
     # Test left click.
     grid.get_cell(1, 2).click()
     assert dash_duo.find_element('#log').text == "rawr"
+
+def test_el003_event_listener(dash_duo):
+    app = Dash(__name__, suppress_callback_exceptions=True)
+    app.layout = html.Div([
+        dag.AgGrid(id='grid',
+                   columnDefs=[{'field': 'test'}],
+                   rowData=[{'test': '1'}],
+                   eventListeners={'cellClicked': ['TestEvent(params, setEventData)']}
+                   ),
+        html.Div(id='output', children=[])
+    ]
+    )
+
+    @app.callback(
+        Output('output', 'children'),
+        Input('grid', 'eventData')
+    )
+    def show_event_data(v):
+        children = Patch()
+        if v:
+            children.append(html.Div(json.dumps(v)))
+        return children
+
+    dash_duo.start_server(app)
+
+    grid = utils.Grid(dash_duo, "grid")
+    grid.wait_for_cell_text(0, 0, "1")
+
+    for i in range(5):
+        grid.get_cell(0, 0).click()
+
+        # Assert that the output element has children
+        until(lambda: len(dash_duo.find_element("#output").find_elements(By.XPATH, "*")) == (i + 1), timeout=3)
+
+