@cdmx/wappler_ag_grid 0.2.0 → 0.2.1

package/app_connect/components.hjson

@@ -1046,6 +1046,74 @@
       "allowedOn": {
         "dmx-ag-grid": true
       }
+    },
+    {
+      "name": "dmx-ag-grid-edit-clicked",
+      "attributeStartsWith": "dmx-on",
+      "attribute": "row_action_edit",
+      "display": "fieldset",
+      "title": "Edit Clicked",
+      "icon": "fa fa-lg fa-chevron-right",
+      "groupTitle": "Grid Events",
+      "groupIcon": "fa fa-lg fa-cubes",
+      "defaultValue": false,
+      "show": [
+        "rowActionEdit"
+      ],
+      "noChangeOnHide": true,
+      "type": "boolean",
+      "groupEnabler": true,
+      "children": [
+        {
+          "name": "rowActionEdit",
+          "attributeStartsWith": "dmx-on",
+          "attribute": "row_action_edit",
+          "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-view-clicked",
+      "attributeStartsWith": "dmx-on",
+      "attribute": "row_action_view",
+      "display": "fieldset",
+      "title": "View Clicked",
+      "icon": "fa fa-lg fa-chevron-right",
+      "groupTitle": "Grid Events",
+      "groupIcon": "fa fa-lg fa-cubes",
+      "defaultValue": false,
+      "show": [
+        "rowActionView"
+      ],
+      "noChangeOnHide": true,
+      "type": "boolean",
+      "groupEnabler": true,
+      "children": [
+        {
+          "name": "rowActionView",
+          "attributeStartsWith": "dmx-on",
+          "attribute": "row_action_view",
+          "isValue": true,
+          "actionsPicker": true,
+          "title": "Action:",
+          "type": "text",
+          "help": "Choose the action to execute.",
+          "defaultValue": "",
+          "initDisplay": "none"
+        }
+      ],
+      "allowedOn": {
+        "dmx-ag-grid": true
+      }
     }
   ],
   "static_events": []

package/dmx-ag-grid.js

@@ -135,8 +135,6 @@ dmx.Component('ag-grid', {
 
     let columnDefs = [];
     let exportToCSV = this.props.exportToCSV;
-    console.log(this.props)
-
     this.$node.innerHTML = `<div id=${gridId}-grid class="${grid_theme}"></div>`;
     if (!rowData || rowData.length === 0) {
       console.error('No row data provided.');
@@ -214,8 +212,12 @@ dmx.Component('ag-grid', {
           button.setAttribute('title', buttonConfig.tooltip);
           button.innerHTML = `<i class="${buttonConfig.icon}"></i> ${buttonConfig.action}`;
           container.appendChild(button);
+          button.addEventListener('click', function () {
+            if (typeof buttonConfig.onClick === 'function') {
+                buttonConfig.onClick(params.data);
+            }
+        });
       });
-  
       // Add spacing between buttons (margin-right)
       const buttonSpacing = '5px'; // You can adjust the spacing as needed
       const buttonsInContainer = container.querySelectorAll('button');
@@ -516,8 +518,7 @@ dmx.Component('ag-grid', {
                   onClick: (rowData) => {
                     this.set('data', rowData);
                     this.set('id', rowData.id);
-                    this.dispatchEvent('action_edit');
-                    console.log('Custom Action 1 clicked for row with ID:', rowData.id);
+                    this.dispatchEvent('row_action_edit');
                   },
                 },
                 {
@@ -528,8 +529,7 @@ dmx.Component('ag-grid', {
                   onClick: (rowData) => {
                     this.set('data', rowData);
                     this.set('id', rowData.id);
-                    this.dispatchEvent('action_view');
-                    console.log('Custom Action 2 clicked for row with ID:', rowData.id);
+                    this.dispatchEvent('row_action_view');
                   },
                 },
                 // Add more custom buttons as needed
@@ -675,8 +675,8 @@ dmx.Component('ag-grid', {
     row_checkbox_unchecked: Event,
     row_status_enabled: Event,
     row_status_disabled: Event,
-    action_edit: Event,
-    action_view: Event
+    row_action_edit: Event,
+    row_action_view: Event
   },
 
   render: function(node) {

package/package.json

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