@cdmx/wappler_ag_grid 1.5.11 → 1.5.13

package/README.md

@@ -72,11 +72,12 @@ To use the "Custom" theme, copy "ag-theme-custom.css" to public/css/ag-theme-cus
 35. **Suppress Scroll on New Data**: Prevents scrolling to newly added data. (Default: false)
 36. **Suppress Property Names Check**: Disables checking for duplicate property names. (Default: false)
 37. **Hide ID Field**: Hides the ID Field in the Grid. (Default: false)
-38. **Numeric Column Align**: Align numeric columns to the right. (Default: false)
-39. **Row Click Events**: Enables row click events. This can be used in Dynamic events => Grid Events => Row Clicked. (Default: false)
-40. **Row Double Click Events**: Enables row double click events. This can be used in Dynamic events => Grid Events => Row Double Clicked. (Default: false)
-41. **Enable Row Selection**: Enables row selection. This can be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked. (Default: false)
-42. **Enable Row Status Toggle**: Enables row status toggle events. This can be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked. (Default: false)
+38. **ID Present**: Uses ID field data for performing transactional updates on the Grid. Required to be enabled when perfomring transaction updates (Reload on Grid). (Default: false)
+39. **Numeric Column Align**: Align numeric columns to the right. (Default: false)
+40. **Row Click Events**: Enables row click events. This can be used in Dynamic events => Grid Events => Row Clicked. (Default: false)
+41. **Row Double Click Events**: Enables row double click events. This can be used in Dynamic events => Grid Events => Row Double Clicked. (Default: false)
+42. **Enable Row Selection**: Enables row selection. This can be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked. (Default: false)
+43. **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

@@ -539,6 +539,14 @@
               "defaultValue": false,
               "help": "Hides the ID Field in Grid"
             },
+            {
+              "name": "idPreset",
+              "attribute": "dmx-bind:id_present",
+              "title": "ID Present",
+              "type": "boolean",
+              "defaultValue": false,
+              "help": "Uses ID field data for performing transactional updates on the Grid. Required to be enabled when perfomring transaction updates (Reload on Grid)"
+            },
             {
               "name": "numericColumnAlign",
               "attribute": "dmx-bind:numeric_column_align",

package/dmx-ag-grid.js

@@ -57,6 +57,7 @@ dmx.Component('ag-grid', {
     suppress_scroll_on_new_data: { type: Boolean, default: false },
     suppress_property_names_check: { type: Boolean, default: false },
     hide_id_field: { type: Boolean, default: false },
+    id_present: { type: Boolean, default: false },
     numeric_column_align: { type: Boolean, default: false },
     enable_rtl: { type: Boolean, default: false },
     locale_text: { type: String, default: null },
@@ -272,7 +273,7 @@ dmx.Component('ag-grid', {
     });
     const newRowData = this.props.data;
     let transaction;
-  
+
     if (oldRowData && oldRowData.length > 0) {
       const addedRows = newRowData.filter(newRow => !oldRowData.some(oldRow => newRow.id === oldRow.id));
       const removedRows = oldRowData.filter(oldRow => !newRowData.some(newRow => oldRow.id === newRow.id));
@@ -507,6 +508,7 @@ dmx.Component('ag-grid', {
       const container = document.createElement('div');
       container.style.display = 'flex';
       container.style.flexWrap = 'wrap';
+      container.style.paddingTop = '3px';
       buttons.forEach((buttonConfig) => {
           const button = document.createElement('button');
           button.classList.add('btn');
@@ -515,7 +517,7 @@ dmx.Component('ag-grid', {
           button.setAttribute('data-toggle', 'tooltip');
           // Call a function to get the dynamic tooltip content
           if (buttonConfig.tooltip.endsWith('()')) {
-            const tooltipFunction = buttonConfig.tooltip.slice(0, -2); // Remove the trailing '()'
+            const tooltipFunction = buttonConfig.tooltip.slice(0, -2); 
             const tooltipText = window[tooltipFunction](params.data)
             button.setAttribute('title', tooltipText);
           } else {
@@ -1290,6 +1292,7 @@ dmx.Component('ag-grid', {
       localeText = AG_GRID_LOCALE_PT
     }
     const gridOptions = {
+      ...(options.id_present ? { getRowId: params => params.data.id } : {}),
       columnDefs: (groupedColumnDefs && groupedColumnDefs.length > 0) ? groupedColumnDefs : columnDefs,
       localeText: localeText,
       enableRtl: options.enable_rtl,
@@ -1330,7 +1333,6 @@ dmx.Component('ag-grid', {
       suppressPropertyNamesCheck: this.props.suppress_property_names_check,
       suppressRowDeselection: this.props.suppress_row_deselection,
       columnHoverHighlight: this.props.column_hover_highlight,
-      getRowId: (params) => params.data.id,
       onFilterModified: function (params) { 
         const columnApi = params.columnApi.api;
         columnApi.hideOverlay();

package/package.json

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