@cdmx/wappler_ag_grid 0.1.3 → 0.1.5

package/app_connect/components.hjson

@@ -18,6 +18,11 @@
           "title": "Id",
           "type": "number"
         },
+        {
+          "name": "data",
+          "title": "Data",
+          "type": "object"
+        }
         {
           "name": "fields",
           "title": "Fields",
@@ -357,7 +362,7 @@
               "title": "Row Click Events",
               "type": "boolean",
               "defaultValue": false,
-              "help": "This enables row click events which can then be used in Dynamic events => Grid Events => Row Clicked"
+              "help": "This enabled row click events which can then be used in Dynamic events => Grid Events => Row Clicked"
             },
             {
               "name": "rowCheckboxEvent",
@@ -373,7 +378,7 @@
               "title": "Enable Row Status Toggle",
               "type": "boolean",
               "defaultValue": false,
-              "help": "This enables row status events which can then be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked"
+              "help": "This enabled row status events which can then be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked"
             }
           ]
         },

package/dmx-ag-grid.js

@@ -1,7 +1,8 @@
 dmx.Component('ag-grid', {
   initialData: {
     id: null,
-    rowData: [],
+    data: {},
+    fields: {},
     column_defs: [],
     cstyles: null,
     cnames: null,
@@ -39,8 +40,7 @@ dmx.Component('ag-grid', {
     fixedHeaderOffset: 100,
     fixedTopOffset: 80,
     fixedHorizonatalScroll: false,
-    timezone: null,
-    fields: {}
+    timezone: null
   },
 
   attributes: {
@@ -85,6 +85,7 @@ dmx.Component('ag-grid', {
     fixedTopOffset: { type: Number, default: 80 },
     fixedHorizonatalScroll: { type: Boolean, default: false },
     timezone: {type: Text, default: '' },
+    cell_click_event: {type: Boolean, default: false },
     row_click_event: {type: Boolean, default: false },
     row_checkbox_event: {type: Boolean, default: false },
     row_status_event: {type: Boolean, default: false }
@@ -138,24 +139,10 @@ dmx.Component('ag-grid', {
         return blankOrNullValueFormatter(params);
       }
     }
-    window.clickEvent = (columnName, value, idValue) => {
+    window.cellClickEvent = (columnName, value, idValue) => {
       this.set('fields', {"field": columnName, "data": value});
       this.set('id', idValue);
-      this.dispatchEvent('row_clicked')
-    };
-    window.handleCheckboxClick = (event, columnName, value, idValue) => {
-      const isChecked = event.target.checked;
-      if (isChecked) {
-        // Code for when the checkbox is checked
-        this.set('id', idValue);
-        this.set('fields', {"field": columnName, "data": value});
-        this.dispatchEvent('row_checkbox_checked')
-      } else {
-        // Code for when the checkbox is unchecked
-        this.set('id', idValue);
-        this.set('fields', {"field": columnName, "data": value});
-        this.dispatchEvent('row_checkbox_unchecked')
-      }
+      this.dispatchEvent('cell_clicked')
     };
     window.handleStatusToggle = (event, columnName, value, idValue) => {
       const isChecked = event.target.checked;
@@ -176,19 +163,7 @@ dmx.Component('ag-grid', {
       const columnName = params.colDef.field;
       const dataType = detectDataType([params.value]);
       const value = formatValue(params.value, columnName, dataType, timezone);
-      return `<div onclick="clickEvent('${columnName}', '${value}', '${idValue}')" style="cursor: pointer;">${value}</div>`;
-    }
-    function idCheckboxCellRenderer(params) {
-      const idValue = params.data.id;
-      const columnName = params.colDef.field;
-      const dataType = detectDataType([params.value]);
-      const value = formatValue(params.value, columnName, dataType, timezone);
-      return `
-          <input 
-            type="checkbox" 
-            onclick="handleCheckboxClick(event, '${columnName}', '${value}', '${idValue}')"
-          />
-        `;
+      return `<div onclick="cellClickEvent('${columnName}', '${value}', '${idValue}')" style="cursor: pointer;">${value}</div>`;
     }
 
     function checkboxCellRenderer(params) {
@@ -411,7 +386,8 @@ dmx.Component('ag-grid', {
           }
         cnames = this.props.cnames
         cwidths = this.props.cwidths
-        enableClickEvent = this.props.row_click_event;
+        enableRowClickEvent = this.props.row_click_event;
+        enableCellClickEvent = this.props.cell_click_event;
         if (cnames.hasOwnProperty(key)) {
         console.log(key)
         const cname = cnames[key]
@@ -432,28 +408,38 @@ dmx.Component('ag-grid', {
             minWidth: parseInt(cwidths[key].min_width),
             maxWidth: parseInt(cwidths[key].max_width),
           }),
-          cellRenderer: enableClickEvent ? 'clickCellRenderer' : (enableStatusToggle ? 'checkboxCellRenderer' : undefined)
+          cellRenderer: enableCellClickEvent ? 'clickCellRenderer' : (enableStatusToggle ? 'checkboxCellRenderer' : undefined)
         };
       });
     }
+    window.onRowClicked = (event) => {
+      const rowData = event.data;
+      this.set('data', rowData);
+      this.set('id', rowData.id);
+      this.dispatchEvent('row_clicked')
+    }
     let checkboxColumn;
     if (enableCheckboxEvent) {
-        // Duplicate the column for 'id'
         checkboxColumn = {
+          headerCheckboxSelection: true,
+          headerCheckboxSelectionFilteredOnly: false,
           headerName: '',
           field: 'id', 
           filter: '',
-          cellRenderer: 'idCheckboxCellRenderer',
+          checkboxSelection: true,
+          showDisabledCheckboxes: true,
           resizable: false,
           width: 50,
           maxWidth: 50, 
-          suppressMenu: true,
+          suppressMenu: true
       };
       columnDefs.unshift(checkboxColumn);
     }
     
     const gridOptions = {
       columnDefs: columnDefs,
+      onRowClicked: enableRowClickEvent ? onRowClicked : undefined,
+      rowStyle: enableRowClickEvent ? { cursor: 'pointer' } : undefined,
       defaultColDef: {
         flex: 1,
         minWidth: this.props.minWidth,
@@ -483,12 +469,12 @@ dmx.Component('ag-grid', {
       localeText: this.props.localeText,
       components: {
         clickCellRenderer: clickCellRenderer,
-        checkboxCellRenderer: checkboxCellRenderer,
-        idCheckboxCellRenderer: idCheckboxCellRenderer
+        checkboxCellRenderer: checkboxCellRenderer
       }
     };
 
     const gridDiv = document.getElementById(gridId+'-grid');
+    
 
     if (!gridDiv) {
       console.error(`Grid container element with ID '${gridId}' not found.`);
@@ -507,7 +493,20 @@ dmx.Component('ag-grid', {
     new agGrid.Grid(gridDiv, gridConfig);
     const gridElement = document.getElementById(gridId+'-grid');
     const gridContainer = gridElement.parentNode;
-
+    // Add an event listener to the grid
+    gridConfig.api.addEventListener('rowSelected', (event) => {
+      if (event.node && event.node.isSelected()) {
+        const rowData = event.node.data;
+        this.set('data', rowData);
+        this.set('id', rowData.id);
+        this.dispatchEvent('row_checkbox_checked');
+      } else {
+        const rowData = event.node.data;
+        this.set('data', rowData);
+        this.set('id', rowData.id);
+        this.dispatchEvent('row_checkbox_unchecked');
+      }
+    });
     if (!gridContainer) {
       console.error('Grid container not found.');
       return;
@@ -563,15 +562,15 @@ dmx.Component('ag-grid', {
 
   events: {
     row_clicked: Event,
+    cell_clicked: Event,
     row_checkbox_checked: Event,
     row_checkbox_unchecked: Event,
     row_status_enabled: Event,
-    row_status_disabled: Event
+    row_status_disabled: Event,
   },
 
   render: function(node) {
     if (this.$node) {
-      
       this.$parse();
     }
   },

package/package.json

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