@cdmx/wappler_ag_grid 1.5.1 → 1.5.3

package/app_connect/components.hjson

@@ -2216,7 +2216,18 @@
           icon : 'fa fa-lg fa-sync',
           state : 'opened',
           help: 'Reload the AG Grid',
-          properties : []
+          properties: [
+            {
+              group: 'Properties',
+              variables: [
+                {
+                  name: '1', optionName: '1', title: 'Load Grid', type: 'boolean',
+                  dataBindings: true, defaultValue: false, required: true,
+                  help: 'Load Gird if no data is available.'
+                }
+              ]
+            }
+          ]
         },
         {
           addTitle: 'Export',

package/dmx-ag-grid.js

@@ -191,9 +191,9 @@ dmx.Component('ag-grid', {
       this.set('columnDefs', columnDefs);
       this.refreshGrid();
     },
-    reloadGrid: function () {
+    reloadGrid: function (loadGridInstance) {
       dmx.nextTick(function() {
-        this.transactionUpdate();
+        this.transactionUpdate(loadGridInstance);
       }, this);
     },
     loadGrid: function () {
@@ -244,11 +244,19 @@ dmx.Component('ag-grid', {
     }
   },
 
-  transactionUpdate: function () {
+  transactionUpdate: async function (loadGridInstance) {
     // const oldRowData = this.get('oldData');
-    const gridInstance = this.get('gridInstance');
-    //const oldRowData = gridInstance.getModel().rowsToDisplay.map(row => row.data);
-      // Retrieve old row data from the grid instance directly
+    var gridInstance = this.get('gridInstance');
+    if (!gridInstance) {
+      if (loadGridInstance) {
+       gridInstance = await this.refreshGrid();
+       await this.set('gridInstance', gridInstance);
+      }
+      else {
+        console.error('AG Grid instance not loaded.');
+        return;
+      }
+    }
     const oldRowData = [];
     gridInstance.forEachNode(node => {
       if (node.data) {
@@ -259,13 +267,12 @@ dmx.Component('ag-grid', {
     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));
-        const updatedRows = newRowData.filter(newRow => {
-          const oldRow = oldRowData.find(old => old.id === newRow.id);
-          return oldRow && JSON.stringify(oldRow) !== JSON.stringify(newRow);
-        });
-  
+      const addedRows = newRowData.filter(newRow => !oldRowData.some(oldRow => newRow.id === oldRow.id));
+      const removedRows = oldRowData.filter(oldRow => !newRowData.some(newRow => oldRow.id === newRow.id));
+      const updatedRows = newRowData.filter(newRow => {
+        const oldRow = oldRowData.find(old => old.id === newRow.id);
+        return oldRow && JSON.stringify(oldRow) !== JSON.stringify(newRow);
+      });
         // Apply transactional updates to AG Grid
         transaction = {
           add: addedRows,
@@ -274,10 +281,10 @@ dmx.Component('ag-grid', {
         };
       }
     if (gridInstance && transaction) {
-      gridInstance.applyTransaction(transaction);
-      gridInstance.refreshCells();
+       gridInstance.applyTransaction(transaction);
+      // gridInstance.refreshCells();
     } else {
-      console.error('AG Grid instance or transaction not found.');
+      return;
     }
   },
   parseFileData: async function (fieldId) {
@@ -368,6 +375,8 @@ dmx.Component('ag-grid', {
     const cnames = this.props.cnames
     const cwidths = this.props.cwidths
     const ctypes = this.props.ctypes
+    let gridInstance = this.get('gridInstance') ? this.get('gridInstance') : null;
+    let pagination_page_size = gridInstance ? gridInstance.paginationGetPageSize() : this.props.pagination_page_size
     const enableRowClickEvent = 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);
@@ -376,7 +385,6 @@ dmx.Component('ag-grid', {
     let columnDefs = [];
     let groupedColumnDefs = [];
     let exportToCSV = this.props.export_to_csv;
-    let gridInstance = null; 
     let cellRenderer;
     const gridThemeClass = options.dark_mode ? `${options.grid_theme}-dark` : options.grid_theme;
     this.$node.innerHTML = `<div id=${options.id}-grid class="${gridThemeClass}"></div>`;
@@ -1300,7 +1308,7 @@ dmx.Component('ag-grid', {
       suppressRowDeselection: this.props.suppress_row_deselection,
       pagination: this.props.pagination,
       paginationAutoPageSize: this.props.pagination_auto_page_size,
-      paginationPageSize: this.props.pagination_page_size,
+      paginationPageSize: pagination_page_size,
       paginationPageSizeSelector: options.pagination_page_size_selector,
       rowHeight: this.props.row_height,
       headerHeight: this.props.header_height,

package/package.json

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