@cdmx/wappler_ag_grid 1.4.3 → 1.4.5

package/README.md

@@ -50,34 +50,36 @@ To use the "Custom" theme, copy "ag-theme-custom.css" to public/css/ag-theme-cus
    - "Multiple" (Default)
 16. **Timezone**: Timezone for Date Fields. Select the appropriate timezone from the dropdown list. (Default: Local)
 17. **Date Format**: Date Format for displaying date values. (Default: "dd/MM/yyyy hh:mm A")
-18. **Sticky Header and Horizontal Scrollbar**:  Optionally specify the header offset and topbar class.
+18. **Loading Overlay**: This enables loading overlay. (Default: false)
+19. **Loading Overlay Duration**: This sets loading overlay duration in ms. (Default: 500)
+20. **Sticky Header and Horizontal Scrollbar**:  Optionally specify the header offset and topbar class.
    - Fixed Header: Enables sticky header. (Default: false)
    - Header Offset: Specifies offset from the top of the viewport area (Optional). (Default: 100)
    - Topbar Class: Specify class, e.g., "topbar", to measure the offset from (Optional). (Default: "topbar")
    - Topbar Offset: Specify topbar offset (Default: 80)
    - Fixed Horizontal Scroll: Enables Hovering horizontal scrollbar which stays at the bottom all the time. (Default: false)
    - Fixed Horizontal Scroll Width: Fixed horizontal scroll width percentage. (Default: 80%)
-19. **Row Height**: Height of each row in pixels. (Default: Auto)
-20. **Header Height**: Height of the header row in pixels. (Default: Auto)
-21. **Wrap Header Text**: This will cause long headers to wrap. (Default: true)
-22. **Auto Header Height**: The header height is automatically set based on the content of the header. (Default: true)
-23. **Auto Height**: The height is automatically set based on the content of the cells. (Default: false)
-24. **Wrap Text**: This will cause long texts to wrap in the cells. (Default: false)
-25. **Suppress Row Click Selection**: Disables row selection on row click. (Default: false)
-26. **Suppress Menu Hide**: Prevents hiding the column menu. (Default: false)
-27. **Suppress Movable Columns**: Disables moving columns. (Default: false)
-28. **Enable Cell Expressions**: Enables expressions in cell values. (Default: false)
-29. **Animate Rows**: Enables row animation on data changes. (Default: false)
-30. **Suppress Aggregation Function in Header**: Hides the aggregation function in column headers. (Default: false)
-31. **Suppress Clipboard Paste**: Disables pasting data from the clipboard. (Default: false)
-32. **Suppress Scroll on New Data**: Prevents scrolling to newly added data. (Default: false)
-33. **Suppress Property Names Check**: Disables checking for duplicate property names. (Default: false)
-34. **Hide ID Field**: Hides the ID Field in the Grid. (Default: false)
-35. **Numeric Column Align**: Align numeric columns to the right. (Default: false)
-36. **Row Click Events**: Enables row click events. This can be used in Dynamic events => Grid Events => Row Clicked. (Default: false)
-37. **Row Double Click Events**: Enables row double click events. This can be used in Dynamic events => Grid Events => Row Double Clicked. (Default: false)
-38. **Enable Row Selection**: Enables row selection. This can be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked. (Default: false)
-39. **Enable Row Status Toggle**: Enables row status toggle events. This can be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked. (Default: false)
+21. **Row Height**: Height of each row in pixels. (Default: Auto)
+22. **Header Height**: Height of the header row in pixels. (Default: Auto)
+23. **Wrap Header Text**: This will cause long headers to wrap. (Default: true)
+24. **Auto Header Height**: The header height is automatically set based on the content of the header. (Default: true)
+25. **Auto Height**: The height is automatically set based on the content of the cells. (Default: false)
+26. **Wrap Text**: This will cause long texts to wrap in the cells. (Default: false)
+27. **Suppress Row Click Selection**: Disables row selection on row click. (Default: false)
+28. **Suppress Menu Hide**: Prevents hiding the column menu. (Default: false)
+29. **Suppress Movable Columns**: Disables moving columns. (Default: false)
+30. **Enable Cell Expressions**: Enables expressions in cell values. (Default: false)
+31. **Animate Rows**: Enables row animation on data changes. (Default: false)
+32. **Suppress Aggregation Function in Header**: Hides the aggregation function in column headers. (Default: false)
+32. **Suppress Clipboard Paste**: Disables pasting data from the clipboard. (Default: false)
+33. **Suppress Scroll on New Data**: Prevents scrolling to newly added data. (Default: false)
+34. **Suppress Property Names Check**: Disables checking for duplicate property names. (Default: false)
+35. **Hide ID Field**: Hides the ID Field in the Grid. (Default: false)
+36. **Numeric Column Align**: Align numeric columns to the right. (Default: false)
+37. **Row Click Events**: Enables row click events. This can be used in Dynamic events => Grid Events => Row Clicked. (Default: false)
+38. **Row Double Click Events**: Enables row double click events. This can be used in Dynamic events => Grid Events => Row Double Clicked. (Default: false)
+39. **Enable Row Selection**: Enables row selection. This can be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked. (Default: false)
+40. **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

@@ -316,6 +316,28 @@
               "defaultValue": "dd/MM/yyyy hh:mm A",
               "help": "Date Format"
             },
+            {
+              "name": "loadingOverlay",
+              "attribute": "dmx-bind:loading_overlay",
+              "title": "Enable Loading Overlay",
+              "type": "boolean",
+              "defaultValue": false,
+              "help": "This enables loading overlay",
+              "display": "fieldset",
+              "show": [
+                "loadingOverlayDuration"
+              ],
+              "children": [
+                {
+                  "name": "loadingOverlayDuration",
+                  "attribute": "loading_overlay_duration",
+                  "title": "Loading Overlay Duration",
+                  "type": "number",
+                  "defaultValue": 500,
+                  "help": "Loading Overlay Duration in ms"
+                }
+              ]
+            },
             {
               "name": "fixedHeader",
               "title": "Sticky Header and Horizontal Scrollbar",

package/dmx-ag-grid.js

@@ -86,6 +86,8 @@ dmx.Component('ag-grid', {
     row_double_click_event: {type: Boolean, default: false },
     row_checkbox_event: {type: Boolean, default: false },
     row_status_event: {type: Boolean, default: false },
+    loading_overlay: { type: Boolean, default: false },
+    loading_overlay_duration: { type: Number, default: 500 },
     enable_actions: {type: Boolean, default: false },
     actions_column_position: {type: String, default: 'right' },
     actions_column_min_width: {type: Number, default: null },
@@ -722,11 +724,16 @@ dmx.Component('ag-grid', {
     }
     // comparator for case-insensitive sorting
     const caseInsensitiveComparator = (valueA, valueB) => {
-      if (!valueA) {
-        return valueB ? -1 : 0;
+      if (valueA === null || valueA === undefined) {
+        return valueB === null || valueB === undefined ? 0 : -1;
       }
-      return valueA.toLowerCase().localeCompare(valueB.toLowerCase())
+      
+      if (valueB === null || valueB === undefined) {
+        return 1;
       }
+      
+      return valueA.toLowerCase().localeCompare(valueB.toLowerCase());
+    };
     dateFilterParams = {
         comparator: function (filterLocalDateAtMidnight, cellValue) {
           var cellDate = new Date(cellValue);
@@ -1271,7 +1278,6 @@ dmx.Component('ag-grid', {
       columnDefs: (groupedColumnDefs && groupedColumnDefs.length > 0) ? groupedColumnDefs : columnDefs,
       localeText: localeText,
       enableRtl: options.enable_rtl,
-      noRowsOverlayComponent: '<div>No Records Found.</div>',
       onRowClicked: enableRowClickEvent ? onRowClicked : undefined,
       onRowDoubleClicked: enableRowDoubleClickEvent ? onRowDoubleClicked : undefined,
       onCellClicked: enableCellClickEvent ? onCellClicked : undefined,
@@ -1309,6 +1315,15 @@ dmx.Component('ag-grid', {
       suppressPropertyNamesCheck: this.props.suppress_property_names_check,
       suppressRowDeselection: this.props.suppress_row_deselection,
       columnHoverHighlight: this.props.column_hover_highlight,
+      onFilterChanged: function (params) {
+        const columnApi = params.columnApi.api;
+        columnApi.hideOverlay();
+        if (!params.api.filterManager.rowModel.rowsToDisplay.length) {
+          columnApi.showNoRowsOverlay();
+        } else {
+          columnApi.hideOverlay();
+        }
+      },
       onGridReady: (params) => {
         const columnApi = params.columnApi.api;
         hideColumn = (fieldToHide) => {
@@ -1434,7 +1449,6 @@ dmx.Component('ag-grid', {
     };
     const gridConfig = {
       columnDefs: columnDefs,
-      rowData: rowData,
       ...gridOptions
     };
     // Conditionally add event listeners based on whether columnsToSum or columnsToCount are defined
@@ -1454,6 +1468,13 @@ dmx.Component('ag-grid', {
     }
     // Create ag-Grid instance
     gridInstance = agGrid.createGrid(gridDiv, gridConfig);
+    gridInstance.setGridOption('rowData', rowData)
+    if (options.loading_overlay) {
+      gridInstance.showLoadingOverlay()
+      setTimeout(() => {
+        gridInstance.hideOverlay()
+      }, options.loading_overlay_duration);
+    }
 
     if (options.cfilters && options.cfilters.length > 0) {
         var filterModel = {};

package/package.json

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