@cdmx/wappler_ag_grid 1.2.0 → 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
 
@@ -135,9 +136,26 @@ This grid allows you to define custom data changes for specific fields. The grid
 The Display Data Manipulation feature allows you to add custom text, Combine fields data.
 The grid has the following settings:
 
+**Using Field Data**
+
 1. **Field**: The field name for which you want to apply the custom data changes. 
 2. **Data**: The value to be replaced in the field data ex: %first_name% %last_name%. 
 
+**Using JS Function**
+
+1. **Field**: The field name for which you want to apply the custom data changes. 
+2. **Function**: Create a JavaScript function that defines the custom rendering logic. In your HTML or script section, define the JS function. 
+ex: jsChanges. 
+
+<script>
+  function jsChanges(data) {
+    const html = `
+      <div style="color: red; line-height: 2;">${data.code}</div>
+      <div style="color: green; line-height: 2;">This is a new line in green.</div>`;
+    return html;
+  }
+</script>
+
 ---
 # Custom Headers
 

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"
             }
           ]
         },
@@ -904,6 +912,7 @@
               "display": "fieldset",
               "show": [
                 "displayDataChanges",
+                "jsDataChanges"
               ],
               "noChangeOnHide": true,
               "groupEnabler": true,
@@ -912,7 +921,7 @@
                 {
                   "name": "displayDataChanges",
                   "attribute": "dmx-bind:display_data_changes",
-                  "title": "Fields Data",
+                  "title": "Using Field Data",
                   "type": "grid",
                   "dataBindings": true,
                   "jsonFormat": true,
@@ -939,6 +948,37 @@
                     "field": "",
                     "data": ""
                   }
+                },
+                {
+                  "name": "jsDataChanges",
+                  "attribute": "dmx-bind:js_data_changes",
+                  "title": "Using JS Function",
+                  "type": "grid",
+                  "dataBindings": true,
+                  "jsonFormat": true,
+                  "encloseBT": true,
+                  "jsonBT": true,
+                  "initDisplay": "none",
+                  "columns": [
+                    {
+                      "field": "field",
+                      "caption": "Field",
+                      "editable": {
+                        "type": "text"
+                      }
+                    },
+                    {
+                      field: "function",
+                      caption: "Function",
+                      editable: {
+                        type: "text"
+                      }
+                    }
+                  ],
+                  "newRecord": {
+                    "field": "",
+                    "function": ""
+                  }
                 }
               ]
             }
@@ -2575,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

@@ -25,6 +25,7 @@ dmx.Component('ag-grid', {
     wrap_text: { type: Boolean, default: false },
     data_changes: { type: Array, default: [] },
     display_data_changes: { type: Array, default: [] },
+    js_data_changes: { type: Array, default: [] },
     data: { type: Array, default: [] },
     dom_layout: { type: String, default: 'autoHeight' },
     enable_cell_text_selection: { type: Boolean, default: true },
@@ -72,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 },
@@ -348,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 = [];
@@ -396,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;
@@ -728,7 +743,7 @@ dmx.Component('ag-grid', {
             return cellData;
           }, value);
         }
-    
+
         // Check if there's a matching change in dataChanges
         const matchingChange = dataChanges.find(change => change.field === key && change.value === String(value));
         if (matchingChange && matchingChange.area === 'cell' ) {
@@ -953,6 +968,27 @@ dmx.Component('ag-grid', {
         else {
           headerName = humanize(key);
         }
+        
+        if (options.js_data_changes.length > 0 && Array.isArray(options.js_data_changes)) {
+            // Check if there's a matching change in jsDataChanges
+            const matchingJsChange = options.js_data_changes.find(change => change.field === key);
+            if (matchingJsChange) {
+              cellRenderer = function (params) {
+              if (typeof window[matchingJsChange.function] === 'function') {
+                  const cellValue = window[matchingJsChange.function](params.data); 
+                  return cellValue;
+                }
+            }
+          }
+          else {
+            cellRenderer = undefined;
+            colId = undefined;
+          }
+        }
+        else {
+          cellRenderer = undefined;
+          colId = undefined;
+        }
         if (key =='status' && options.row_status_event) {
           cellRenderer = 'checkboxCellRenderer';
           colId = 'statusColumn';
@@ -965,10 +1001,8 @@ dmx.Component('ag-grid', {
             filter = null;
           }
         }
-        else {
-          cellRenderer = undefined;
-          colId = undefined;
-        }
+        
+        
         if (options.hide_sort) {
           const hideSortArray = options.hide_sort.split(',');
           if (hideSortArray.includes(key)) {
@@ -1040,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 = {
@@ -1158,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,
@@ -1547,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.0",
+    "version": "1.2.2",
     "type": "module",
     "description": "App Connect module for AG Grid Table Generation.",
     "license": "MIT",