@cdmx/wappler_ag_grid 1.2.6 → 1.2.8

package/README.md

@@ -3,6 +3,10 @@
 
 The AG Grid module allows you to create a flexible and customizable data grid with various options and properties. Below, you'll find the list of properties and options available for configuring the AG Grid module:
 
+**Important Changes in v1.2.5:**
+With the update to AG Grid v31, a built-in page limit dropdown feature has been introduced. Consequently, when utilizing external page limit selectors, it is necessary to configure the page selector settings accordingly. The defaults are 20, 50, and 100. If you wish to use values other than these defaults, kindly utilize the Page Size Selectors settings to define your preferred selections.
+
+
 ## AG Grid Properties
 
 1. **ID**: Unique ID for the grid. (Required)
@@ -12,6 +16,7 @@ The AG Grid module allows you to create a flexible and customizable data grid wi
    - "Alpine" (Default)
    - "Balham"
    - "Material"
+   - "Quartz"
    - "Custom"
 5. **Dark Mode** (Default: false)
 6. **Locale**: Select the locale for the grid. Currently supported locales: English (EN), Russian (RU) and Hebrew (HE). (Default: EN)
@@ -24,6 +29,7 @@ The overrides for the "Custom" theme can be applied in the ag-theme-custom.css f
 
 To use the "Custom" theme, copy "ag-theme-custom.css" to public/css/ag-theme-custom.css and include it in your layout file.
 
+
 ## AG Grid Options
 1. **Minimum Width**: The minimum width of the column. (Default: 150)
 2. **Resizable**: Specifies if the column can be resized. (Default: true)
@@ -36,7 +42,7 @@ To use the "Custom" theme, copy "ag-theme-custom.css" to public/css/ag-theme-cus
 9. **Suppress Row Deselection**: Specifies if rows can be deselected. (Default: false)
 10. **Pagination**: Enables pagination. (Default: true)
 11. **Auto Pagination**: Enables automatic pagination. (Default: false)
-12. **Pagination Size Selectors**: Allowed selectors for for page size. (Default: [20,50,100] ).
+12. **Page Size Selectors**: Allowed selectors for for page size. (Default: [20,50,100] ).
 13. **Pagination Page Size**: Number of rows to show per page. (Default: 20)
 14. **Row Selection**: Row Selection (single or multiple).
    - "Single"
@@ -130,6 +136,8 @@ This grid allows you to define custom data changes for specific fields. The grid
 
 **Amount Fields** (Type: textbox, Default: null)
 - Define the fields where the comma-separation and float parsing need to be applied.
+**Amount Field Precision** (Type: number, Default: 2)
+- Define the precision to be used for currency fields.
 
 ---
 

package/app_connect/components.hjson

@@ -858,7 +858,8 @@
               "display": "fieldset",
               "show": [
                 "dataChanges",
-                "amountFields"
+                "amountFields",
+                "amountFieldsPrecision"
               ],
               "noChangeOnHide": true,
               "groupEnabler": true,
@@ -920,7 +921,17 @@
                   "attribute": "amount_fields",
                   "title": "Amount Fields",
                   "type": "text",
+                  "initDisplay": "none",
+                  "help": "Fields (numeric/float data fields) where you desire currency formatting to be applied."
+                },
+                {
+                  "name": "amountFieldsPrecision",
+                  "attribute": "amount_field_precision",
+                  "title": "Amount Field Precision",
+                  "type": "number",
+                  "defaultValue": 2,
                   "initDisplay": "none"
+                  "help": "Setting precision digits after the decimal"
                 }
               ]
             }

package/dmx-ag-grid.js

@@ -62,6 +62,7 @@ dmx.Component('ag-grid', {
     date_locale: { type: String, default: 'en-US' },
     date_format: { type: String, default: 'dd/MM/yyyy hh:mm A' },
     amount_fields: { type: String, default: null },
+    amount_field_precision: { type: Number, default: 2 },
     min_width: { type: Number, default: 150 },
     sortable: { type: Boolean, default: true },
     resizable: { type: Boolean, default: true },
@@ -242,7 +243,7 @@ dmx.Component('ag-grid', {
   transactionUpdate: function () {
     // const oldRowData = this.get('oldData');
     const gridInstance = this.get('gridInstance');
-    const oldRowData = gridInstance.gridOptions.api.getModel().rowsToDisplay.map(row => row.data);
+    const oldRowData = gridInstance.getModel().rowsToDisplay.map(row => row.data);
     const newRowData = this.props.data;
     let transaction;
   
@@ -263,8 +264,8 @@ dmx.Component('ag-grid', {
       }
       
     if (gridInstance && gridInstance.gridOptions && transaction) {
-      gridInstance.gridOptions.api.applyTransaction(transaction);
-      gridInstance.gridOptions.api.refreshCells();
+      gridInstance.applyTransaction(transaction);
+      gridInstance.refreshCells();
     } else {
       console.error('AG Grid instance or transaction not found.');
     }
@@ -935,8 +936,8 @@ dmx.Component('ag-grid', {
               valueFormatter = function (params) {
                 if (params.value != null) {
                   return Number(params.value).toLocaleString(options.date_locale, {
-                    minimumFractionDigits: 2,
-                    maximumFractionDigits: 2,
+                    minimumFractionDigits: options.amount_field_precision,
+                    maximumFractionDigits: options.amount_field_precision
                   });
                 }
                 return '-';
@@ -1321,10 +1322,10 @@ dmx.Component('ag-grid', {
         columnsToCount.forEach(function (colObj) {
           const col = colObj.field;
           const uniqueValuesToCount = colObj.unique_values.split(',');
-      
+    
           result[0][col] = 0;
           let uniqueValues = new Set();
-      
+    
           rowData.forEach(function (line) {
             if (line.index < rowData.length) {
               const value = line.data[col];
@@ -1334,11 +1335,11 @@ dmx.Component('ag-grid', {
               }
             }
           });
-      
+    
           result[0][col + '_unique_count'] = uniqueValues.size;
         });
       }
-      api.setPinnedBottomRowData(result);
+      api.setGridOption('pinnedBottomRowData', result);
     }
 
     const gridDiv = document.getElementById(options.id+'-grid');
@@ -1424,8 +1425,8 @@ dmx.Component('ag-grid', {
         filter: customFilter.filter
       };
     });
-    gridInstance.gridOptions.api.setFilterModel(filterModel);
-    gridInstance.gridOptions.api.onFilterChanged();
+    gridInstance.setFilterModel(filterModel);
+    gridInstance.onFilterChanged();
     }
 
     const gridElement = document.getElementById(options.id+'-grid');
@@ -1436,7 +1437,7 @@ dmx.Component('ag-grid', {
     const gridContainer = gridElement.parentNode;
     // Add an event listener to the grid
     if (options.row_checkbox_event) {
-      gridConfig.api.addEventListener('rowSelected', (event) => {
+      gridInstance.addEventListener('rowSelected', (event) => {
         if (event.node && event.node.isSelected()) {
           const rowData = event.node.data;
           this.set('data', rowData);
@@ -1512,7 +1513,7 @@ dmx.Component('ag-grid', {
       });
     }
     exportSelectedRows = () => {
-      const selectedRows = gridConfig.api.getSelectedRows();
+      const selectedRows = gridInstance.getSelectedRows();
       this.set('selectedRows', selectedRows);
     }
     function updateHoveringBarStyles() {
@@ -1595,7 +1596,7 @@ dmx.Component('ag-grid', {
           return params.value;
         },
       };
-      gridConfig.api.exportDataAsCsv(params);
+      gridInstance.exportDataAsCsv(params);
     };
     // Create the export button
     if (exportToCSV) {

package/package.json

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