@cdmx/wappler_ag_grid 0.3.8 → 0.4.0

package/app_connect/components.hjson

@@ -58,6 +58,14 @@
               "required": true,
               "help": "Enter Data Source"
             },
+            { 
+            "name": "gridNoLoad", 
+            "hasAttribute": "noload", 
+            "title": "No Auto Load", 
+            "type": "boolean", 
+            "defaultValue": "", 
+            "initValue": true
+            },
             {
               "name": "grid_theme",
               "attribute": "grid_theme",
@@ -962,14 +970,23 @@
       ],
       actionsScheme: [
         {
-          addTitle: 'Reload Grid',
-          title : 'Reload Grid',
-          name : 'reloadGrid',
+          addTitle: 'Load',
+          title : 'Load',
+          name : 'loadGrid',
           icon : 'fa fa-lg fa-play',
           state : 'opened',
-          help: 'Reload the AG Grid',
+          help: 'Load the AG Grid',
           properties : []
         },
+        {
+          addTitle: 'Reload',
+          title : 'Reload',
+          name : 'reloadGrid',
+          icon : 'fa fa-lg fa-sync',
+          state : 'opened',
+          help: 'Reload the AG Grid',
+          properties : []
+        }
       ],
       "children": [],
       "allowed_children": {},

package/dmx-ag-grid.js

@@ -8,6 +8,7 @@ dmx.Component('ag-grid', {
 
   attributes: {
     id: { default: null },
+    noload: { type: Boolean, default: false },
     grid_theme: { type: String, default: 'ag-theme-alpine' },
     column_defs: { type: Array, default: [] },
     cstyles: { type: Array, default: [] },
@@ -81,6 +82,11 @@ dmx.Component('ag-grid', {
       dmx.nextTick(function() {
         this.refreshGrid();
       }, this);
+    },
+    loadGrid: function () {
+      dmx.nextTick(function() {
+        this.refreshGrid();
+      }, this);
     }
   },
 
@@ -96,6 +102,7 @@ dmx.Component('ag-grid', {
     let localeText;
     let columnDefs = [];
     let exportToCSV = this.props.export_to_csv;
+    let gridInstance = null; 
     this.$node.innerHTML = `<div id=${options.id}-grid class="${options.grid_theme}"></div>`;
     if (!rowData || rowData.length === 0) {
       console.error('No row data provided.');
@@ -646,8 +653,9 @@ dmx.Component('ag-grid', {
       return;
     }
 
-    if (this.props.gridInstance) {
-      this.props.gridInstance.destroy(); // Destroy the previous grid instance if it exists
+    if (gridInstance) {
+        gridInstance.destroy();
+        gridInstance = null;
     }
     const gridConfig = {
       columnDefs: columnDefs,
@@ -655,7 +663,7 @@ dmx.Component('ag-grid', {
       ...gridOptions
     };
     // Create ag-Grid instance
-    new agGrid.Grid(gridDiv, gridConfig);
+    gridInstance = new agGrid.Grid(gridDiv, gridConfig);
     const gridElement = document.getElementById(options.id+'-grid');
     const gridContainer = gridElement.parentNode;
     // Add an event listener to the grid
@@ -752,6 +760,7 @@ dmx.Component('ag-grid', {
       gridContainer.parentNode.insertBefore(exportButton, gridContainer);
       exportButton.style.marginBottom = '10px';
     }
+    return gridInstance;
     
   },
 
@@ -774,8 +783,9 @@ dmx.Component('ag-grid', {
 
   update: function (props) {
     this.set('count', this.props.data.length);
-    if (!dmx.equal(this.props.data, props.data)) {
-      this.refreshGrid();
+    if (!dmx.equal(this.props.data, props.data) && !this.props.noload) {
+      let gridInstance = this.refreshGrid();
+      this.set('gridInstance', gridInstance);
     }
   },
 });

package/package.json

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