@cdmx/wappler_ag_grid 1.2.1 → 1.2.2

package/README.md

@@ -65,8 +65,9 @@ To use the "Custom" theme, copy "ag-theme-custom.css" to public/css/ag-theme-cus
 31. **Hide ID Field**: Hides the ID Field in the Grid. (Default: false)
 33. **Numeric Column Align**: Align numeric columns to the right. (Default: false)
 34. **Row Click Events**: Enables row click events. This can be used in Dynamic events => Grid Events => Row Clicked. (Default: false)
-35. **Enable Row Selection**: Enables row selection. This can be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked. (Default: false)
-36. **Enable Row Status Toggle**: Enables row status toggle events. This can be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked. (Default: false)
+35. **Row Double Click Events**: Enables row double click events. This can be used in Dynamic events => Grid Events => Row Double Clicked. (Default: false)
+36. **Enable Row Selection**: Enables row selection. This can be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked. (Default: false)
+37. **Enable Row Status Toggle**: Enables row status toggle events. This can be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked. (Default: false)
 
 # Data Type Overrides
 

package/app_connect/components.hjson

@@ -488,7 +488,15 @@
               "title": "Row Click Events",
               "type": "boolean",
               "defaultValue": false,
-              "help": "This enabled row click events which can then be used in Dynamic events => Grid Events => Row Clicked"
+              "help": "This enables row click events which can then be used in Dynamic Events => Grid Events => Row Clicked"
+            },
+            {
+              "name": "rowDoubleClickEvent",
+              "attribute": "dmx-bind:row_double_click_event",
+              "title": "Row Double Click Events",
+              "type": "boolean",
+              "defaultValue": false,
+              "help": "This enables row double click events which can then be used in Dynamic Events => Grid Events => Row Double Clicked"
             },
             {
               "name": "rowCheckboxEvent",
@@ -496,7 +504,7 @@
               "title": "Enable Row Selection",
               "type": "boolean",
               "defaultValue": false,
-              "help": "This enables row selection which can then be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked"
+              "help": "This enables row selection which can then be used in Dynamic Events => Grid Events => Checkbox Checked || Checkbox Unchecked"
             },
             {
               "name": "rowStatusEvent",
@@ -504,7 +512,7 @@
               "title": "Enable Row Status Toggle",
               "type": "boolean",
               "defaultValue": false,
-              "help": "This enabled row status events which can then be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked"
+              "help": "This enables row status events which can then be used in Dynamic Events => Grid Events => Checkbox Checked || Checkbox Unchecked"
             }
           ]
         },
@@ -2607,6 +2615,40 @@
         "dmx-ag-grid": true
       }
     },
+    {
+      "name": "dmx-ag-grid-row-double-clicked",
+      "attributeStartsWith": "dmx-on",
+      "attribute": "row_double_clicked",
+      "display": "fieldset",
+      "title": "Row Double Clicked",
+      "icon": "fa fa-lg fa-chevron-right",
+      "groupTitle": "Grid Events",
+      "groupIcon": "fa fa-lg fa-cubes",
+      "defaultValue": false,
+      "show": [
+        "rowDoubleClicked"
+      ],
+      "noChangeOnHide": true,
+      "type": "boolean",
+      "groupEnabler": true,
+      "children": [
+        {
+          "name": "rowDoubleClicked",
+          "attributeStartsWith": "dmx-on",
+          "attribute": "row_double_clicked",
+          "isValue": true,
+          "actionsPicker": true,
+          "title": "Action:",
+          "type": "text",
+          "help": "Choose the action to execute.",
+          "defaultValue": "",
+          "initDisplay": "none"
+        }
+      ],
+      "allowedOn": {
+        "dmx-ag-grid": true
+      }
+    },
     {
       "name": "dmx-ag-grid-checkbox-checked",
       "attributeStartsWith": "dmx-on",

package/dmx-ag-grid.js

@@ -73,6 +73,7 @@ dmx.Component('ag-grid', {
     timezone: {type: String, default: '' },
     cell_click_event: {type: Boolean, default: false },
     row_click_event: {type: Boolean, default: false },
+    row_double_click_event: {type: Boolean, default: false },
     row_checkbox_event: {type: Boolean, default: false },
     row_status_event: {type: Boolean, default: false },
     enable_actions: {type: Boolean, default: false },
@@ -349,7 +350,9 @@ dmx.Component('ag-grid', {
     const cwidths = this.props.cwidths
     const ctypes = this.props.ctypes
     const enableRowClickEvent = this.props.row_click_event && !this.props.enable_actions && !this.props.row_checkbox_event;
-    const enableCellClickEvent = this.props.row_click_event && (this.props.enable_actions || this.props.row_checkbox_event); 
+    const enableRowDoubleClickEvent = this.props.row_double_click_event && !this.props.enable_actions && !this.props.row_checkbox_event;
+    const enableCellClickEvent = this.props.row_click_event && (this.props.enable_actions || this.props.row_checkbox_event);
+    const enableCellDoubleClickEvent = this.props.row_double_click_event && (this.props.enable_actions || this.props.row_checkbox_event);
     let localeText;
     let columnDefs = [];
     let groupedColumnDefs = [];
@@ -397,6 +400,17 @@ dmx.Component('ag-grid', {
       this.set('id', rowData.id);
       this.dispatchEvent('row_clicked')
     }
+    onCellDoubleClicked = (event) => {
+      const rowData = event.data;
+      const columnId = event.column.colId
+      const excludedColIds = ['checkboxColumn', 'actionsColumn', 'statusColumn'];
+      if (excludedColIds.includes(columnId)) {
+        return;
+      }
+      this.set('data', rowData);
+      this.set('id', rowData.id);
+      this.dispatchEvent('row_double_clicked')
+    }
 
     function checkboxCellRenderer(params) {
       const idValue = params.data.id;
@@ -1060,6 +1074,12 @@ dmx.Component('ag-grid', {
       this.set('id', rowData.id);
       this.dispatchEvent('row_clicked')
     }
+    window.onRowDoubleClicked = (event) => {
+      const rowData = event.data;
+      this.set('data', rowData);
+      this.set('id', rowData.id);
+      this.dispatchEvent('row_double_clicked')
+    }
     let checkboxColumn;
     if (options.row_checkbox_event) {
         checkboxColumn = {
@@ -1178,8 +1198,10 @@ dmx.Component('ag-grid', {
       enableRtl: options.enable_rtl,
       noRowsOverlayComponent: '<div>No Records Found.</div>',
       onRowClicked: enableRowClickEvent ? onRowClicked : undefined,
+      onRowDoubleClicked: enableRowDoubleClickEvent ? onRowDoubleClicked : undefined,
       onCellClicked: enableCellClickEvent ? onCellClicked : undefined,
-      rowStyle: enableRowClickEvent || enableCellClickEvent ? { cursor: 'pointer' } : undefined,
+      onCellDoubleClicked: enableCellDoubleClickEvent ? onCellDoubleClicked : undefined,
+      rowStyle: enableRowClickEvent || enableCellClickEvent || enableRowDoubleClickEvent || enableCellDoubleClickEvent  ? { cursor: 'pointer' } : undefined,
       defaultColDef: {
         flex: 1,
         minWidth: options.min_width,
@@ -1567,6 +1589,7 @@ dmx.Component('ag-grid', {
 
   events: {
     row_clicked: Event,
+    row_double_clicked: Event,
     cell_clicked: Event,
     row_checkbox_checked: Event,
     row_checkbox_unchecked: Event,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cdmx/wappler_ag_grid",
-    "version": "1.2.1",
+    "version": "1.2.2",
     "type": "module",
     "description": "App Connect module for AG Grid Table Generation.",
     "license": "MIT",