@cdmx/wappler_ag_grid 1.6.3 → 1.6.4

package/README.md

@@ -33,54 +33,52 @@ To use the "Custom" theme, copy "ag-theme-custom.css" to public/css/ag-theme-cus
 4. **Case-Insensitive Sort**: Specifies if the columns are sorted in case-insensitive manner. (Default: false)
 5. **Filter**: Specifies if the column has a filter. (Default: true)
 6. **Floating Filter**: Specifies if the column has a floating filter. (Default: true)
-7. **Editiable Cells**: Makes cells editable. (Default: false)
-8. **Editiable Rows**: Makes row data editable. (Default: false)
-9. **Exclude Hidden Fields**: Specifies if Hidden fields are to be excluded in CSV export. (Default: false)
-10. **CSV Export**: Specifies if Export to CSV is enabled. (Default: true)
-11. **Enable RTL**: Enabled Right to Left, used for Hebrew and Arabic. (Default: false)
-12. **Column Hover Highlight**: Specifies column hover highlighting. (Default: true)
-13. **Suppress Row Deselection**: Specifies if rows can be deselected. (Default: false)
-14. **Pagination**: Enables pagination. (Default: true)
-15. **Auto Pagination**: Enables automatic pagination. (Default: false)
-16. **Page Limit Selectors**: Allowed selectors for for page size. Set to false to hide the page size selector. (Default: [20,50,100] ).
-17. **Page Limit**: Number of rows to show per page. (Default: 20)
-18. **Row Selection**: Row Selection (single or multiple).
+7. **Exclude Hidden Fields**: Specifies if Hidden fields are to be excluded in CSV export. (Default: false)
+8. **CSV Export**: Specifies if Export to CSV is enabled. (Default: true)
+9. **Enable RTL**: Enabled Right to Left, used for Hebrew and Arabic. (Default: false)
+10. **Column Hover Highlight**: Specifies column hover highlighting. (Default: true)
+11. **Suppress Row Deselection**: Specifies if rows can be deselected. (Default: false)
+12. **Pagination**: Enables pagination. (Default: true)
+13. **Auto Pagination**: Enables automatic pagination. (Default: false)
+14. **Page Limit Selectors**: Allowed selectors for for page size. Set to false to hide the page size selector. (Default: [20,50,100] ).
+15. **Page Limit**: Number of rows to show per page. (Default: 20)
+16. **Row Selection**: Row Selection (single or multiple).
    - "Single"
    - "Multiple" (Default)
-19. **Timezone**: Timezone for Date Fields. Select the appropriate timezone from the dropdown list. (Default: Local)
-20. **Date Format**: Date Format for displaying date values. (Default: "dd/MM/yyyy hh:mm A")
-21. **Filter Field ID**: Specifies the field ID of the search field when using grid quick filter. Applicable when using Quick Filter feature of AG Grid, called from Dynamic Events on change event on the field. (Default: search_field)
-22. **Loading Overlay**: This enables loading overlay. (Default: false)
-23. **Loading Overlay Duration**: This sets loading overlay duration in ms. (Default: 500)
-24. **Sticky Header and Horizontal Scrollbar**:  Optionally specify the header offset and topbar class.
+17. **Timezone**: Timezone for Date Fields. Select the appropriate timezone from the dropdown list. (Default: Local)
+18. **Date Format**: Date Format for displaying date values. (Default: "dd/MM/yyyy hh:mm A")
+19. **Filter Field ID**: Specifies the field ID of the search field when using grid quick filter. Applicable when using Quick Filter feature of AG Grid, called from Dynamic Events on change event on the field. (Default: search_field)
+20. **Loading Overlay**: This enables loading overlay. (Default: false)
+21. **Loading Overlay Duration**: This sets loading overlay duration in ms. (Default: 500)
+22. **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%)
-25. **Row Height**: Height of each row in pixels. (Default: Auto)
-26. **Header Height**: Height of the header row in pixels. (Default: Auto)
-27. **Wrap Header Text**: This will cause long headers to wrap. (Default: true)
-28. **Auto Header Height**: The header height is automatically set based on the content of the header. (Default: true)
-29. **Auto Height**: The height is automatically set based on the content of the cells. (Default: false)
-30. **Wrap Text**: This will cause long texts to wrap in the cells. (Default: false)
-31. **Center Align (V)**: Specifies if the cell data should be vertically centered. (Default: false)
-32. **Suppress Row Click Selection**: Disables row selection on row click. (Default: false)
-33. **Suppress Menu Hide**: Prevents hiding the column menu. (Default: false)
-34. **Suppress Movable Columns**: Disables moving columns. (Default: false)
-35. **Enable Cell Expressions**: Enables expressions in cell values. (Default: false)
-36. **Animate Rows**: Enables row animation on data changes. (Default: false)
-37. **Suppress Aggregation Function in Header**: Hides the aggregation function in column headers. (Default: false)
-38. **Suppress Clipboard Paste**: Disables pasting data from the clipboard. (Default: false)
-39. **Suppress Scroll on New Data**: Prevents scrolling to newly added data. (Default: false)
-40. **Suppress Property Names Check**: Disables checking for duplicate property names. (Default: false)
-41. **Hide ID Field**: Hides the ID Field in the Grid. (Default: false)
-42. **Numeric Column Align**: Align numeric columns to the right. (Default: false)
-43. **Row Click Events**: Enables row click events. This can be used in Dynamic events => Grid Events => Row Clicked. (Default: false)
-44. **Row Double Click Events**: Enables row double click events. This can be used in Dynamic events => Grid Events => Row Double Clicked. (Default: false)
-45. **Enable Row Selection**: Enables row selection. This can be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked. (Default: false)
-46. **Enable Row Status Toggle**: Enables row status toggle events. This can be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked. (Default: false)
+23. **Row Height**: Height of each row in pixels. (Default: Auto)
+24. **Header Height**: Height of the header row in pixels. (Default: Auto)
+25. **Wrap Header Text**: This will cause long headers to wrap. (Default: true)
+26. **Auto Header Height**: The header height is automatically set based on the content of the header. (Default: true)
+27. **Auto Height**: The height is automatically set based on the content of the cells. (Default: false)
+28. **Wrap Text**: This will cause long texts to wrap in the cells. (Default: false)
+29. **Center Align (V)**: Specifies if the cell data should be vertically centered. (Default: false)
+30. **Suppress Row Click Selection**: Disables row selection on row click. (Default: false)
+31. **Suppress Menu Hide**: Prevents hiding the column menu. (Default: false)
+32. **Suppress Movable Columns**: Disables moving columns. (Default: false)
+33. **Enable Cell Expressions**: Enables expressions in cell values. (Default: false)
+34. **Animate Rows**: Enables row animation on data changes. (Default: false)
+35. **Suppress Aggregation Function in Header**: Hides the aggregation function in column headers. (Default: false)
+36. **Suppress Clipboard Paste**: Disables pasting data from the clipboard. (Default: false)
+37. **Suppress Scroll on New Data**: Prevents scrolling to newly added data. (Default: false)
+38. **Suppress Property Names Check**: Disables checking for duplicate property names. (Default: false)
+39. **Hide ID Field**: Hides the ID Field in the Grid. (Default: false)
+40. **Numeric Column Align**: Align numeric columns to the right. (Default: false)
+41. **Row Click Events**: Enables row click events. This can be used in Dynamic events => Grid Events => Row Clicked. (Default: false)
+42. **Row Double Click Events**: Enables row double click events. This can be used in Dynamic events => Grid Events => Row Double Clicked. (Default: false)
+43. **Enable Row Selection**: Enables row selection. This can be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked. (Default: false)
+44. **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
 
@@ -217,6 +215,28 @@ This grid allows you to define custom column widths for specific columns. The gr
 2. **Min Width**: The minimum width for the column. 
 3. **Max Width**: The maximum width for the column. 
 
+# Inline Editing 
+
+**Editable Fields**
+Makes specific cells editable. Values should be comma-separated fields.
+
+**Editable Cells**
+Makes All cells editable. (Default: false)
+
+**Editable Rows**
+Makes Entire rows editable. (Default: false)
+
+**Configure Selector Editors**
+This enables Static and Dynamic Field selector options.
+
+**Static Selectors**
+1. **Field**: The field name for which you want to apply selector/dropdown for. 
+2. **Options**: JSON input of options for the select dropdown. e.g. {"1": "Angie", "2": "Radar"}
+
+**Dynamic Selectors**
+1. **Field**: The field name for which you want to apply selector/dropdown for. 
+2. **Options Field**: The field name which contains the options for the field data. e.g. {"1": "Angie", "2": "Radar"} supplied in a seperate field. This allows different options for every field.
+
 # Hide Fields and Filters
 
 The Hide Fields and Filters feature allows you to hide components such as filters and fields.

package/app_connect/components.hjson

@@ -176,22 +176,6 @@
               "defaultValue": true,
               "help": "Specifies if the column has a floating filter"
             },
-{
-              "name": "cellEditable",
-              "attribute": "dmx-bind:cell_editable",
-              "title": "Editable Cells",
-              "type": "boolean",
-              "defaultValue": false,
-              "help": "Makes cells editable."
-            },
-             {
-              "name": "rowEditable",
-              "attribute": "dmx-bind:row_editable",
-              "title": "Row Editable",
-              "type": "boolean",
-              "defaultValue": false,
-              "help": "Makes entire row editable."
-            },
             {
               "name": "exportExcludeHidden",
               "attribute": "dmx-bind:export_exclude_hidden_fields",
@@ -340,7 +324,7 @@
               "defaultValue": "dd/MM/yyyy hh:mm A",
               "help": "Date Format"
             },
-{
+            {
               "name": "quickFilterField",
               "attribute": "quick_filter_field",
               "title": "Filter Field ID",
@@ -475,7 +459,7 @@
               "defaultValue": false,
               "help": "This will cause long texts to wrap in the cells."
             },
-{
+            {
               "name": "vCenterCellData",
               "attribute": "dmx-bind:vert_center_cell_data",
               "title": "Center Align (V)",
@@ -1278,6 +1262,123 @@
             }
           ]
         },
+        {
+          "group": "📒 Inling Editing",
+          "variables": [
+            {
+              "name": "cellsEditable",
+              "attribute": "editable_fields",
+              "title": "Editable Cells",
+              "type": "text",
+              "defaultValue": "",
+              "help": "Makes Specific cells editable. Values should be comma separated fields."
+            },
+            {
+              "name": "allCellsEditable",
+              "attribute": "dmx-bind:cell_editable",
+              "title": "Editable Cells",
+              "type": "boolean",
+              "defaultValue": false,
+              "help": "Makes All cells editable."
+            },
+            {
+              "name": "rowEditable",
+              "attribute": "dmx-bind:row_editable",
+              "title": "Row Editable",
+              "type": "boolean",
+              "defaultValue": false,
+              "help": "Makes entire row editable."
+            },
+            {
+              "name": "inlineEditorOptions",
+              "title": "Configure Selector Editors",
+              "attribute": "selector_options",
+              "type": "boolean",
+              "defaultValue": false,
+              "display": "fieldset",
+              "show": [
+                "StaticSelectorEditors",
+                "DynamicSelectorEditors"
+              ],
+              "noChangeOnHide": true,
+              "groupEnabler": true,
+              "help": "Enables Dropdown Selectors"
+              "children": [
+                {
+                  "name": "StaticSelectorEditors",
+                  "attribute": "dmx-bind:cstatic_select_editors",
+                  "title": "Static Selectors",
+                  "type": "grid",
+                  "key": "field",
+                  "jsonFormat": true,
+                  "dataBindings": true,
+                  "encloseBT": true,
+                  "jsonBT": true,
+                  "initDisplay": "none",
+                  "columns": [
+                    {
+                      "field": "field",
+                      "caption": "Field",
+                      "size": "20%",
+                      "editable": {
+                        "type": "text"
+                      }
+                    },
+                    {
+                      field: "options",
+                      caption: "Options",
+                      size: "20%",
+                      dataBindings: true,
+                      editable: {
+                        type: "datapicker"
+                      },
+                      help: "Static Options."
+                    }
+                  ],
+                  "newRecord": {
+                    "field": "",
+                    "options": ""
+                  }
+                },
+                {
+                  "name": "DynamicSelectorEditors",
+                  "attribute": "dmx-bind:cdynamic_select_editors",
+                  "title": "Dynamic Selectors",
+                  "type": "grid",
+                  "key": "field",
+                  "jsonFormat": true,
+                  "dataBindings": true,
+                  "encloseBT": true,
+                  "jsonBT": true,
+                  "initDisplay": "none",
+                  "columns": [
+                    {
+                      "field": "field",
+                      "caption": "Field",
+                      "size": "20%",
+                      "editable": {
+                        "type": "text"
+                      }
+                    },
+                    {
+                      field: "options_field",
+                      caption: "Options Field",
+                      size: "20%",
+                      "editable": {
+                        "type": "text"
+                      }
+                      help: "Dynamic Options using field data."
+                    }
+                  ],
+                  "newRecord": {
+                    "field": "",
+                    "options_field": ""
+                  }
+                }
+              ]
+            }
+          ]
+        },
         {
           "group": "📒 Hide Fields and Filters",
           "variables": [
@@ -1450,7 +1551,7 @@
                 "columnsToSum",
                 "enableFixedFooter",
                 "fixedFooterBottomPadding",
-"columnsToCountNonUnique"
+                "columnsToCountNonUnique"
               ],
               "noChangeOnHide": true,
               "groupEnabler": true,
@@ -1486,7 +1587,7 @@
                         "unique_values": ""
                       }
                 },
-{
+                {
                   "name": "columnsToCountNonUnique",
                   "attribute": "dmx-bind:columns_to_count_nonunique",
                   "title": "Count Non-Unique",
@@ -2422,7 +2523,7 @@
           state: 'opened',
           help: 'Get Selected Rows',
           properties: []
-},
+        },
         {
           addTitle: 'quickFilter',
           title: 'Quick Filter',
@@ -2886,7 +2987,7 @@
         "dmx-ag-grid": true
       }
     },
-{
+    {
       "name": "dmx-ag-grid-cell-edited",
       "attributeStartsWith": "dmx-on",
       "attribute": "cell_data_edited",

package/dmx-ag-grid.js

@@ -27,6 +27,9 @@ dmx.Component('ag-grid', {
     cwidths: { type: Object, default: {} },
     ctypes: { type: Array, default: [] },
     cfilters: { type: Array, default: [] },
+    cstatic_select_editors: { type: Object, default: {} },
+    cdynamic_select_editors: { type: Object, default: {} },
+    cselect_placeholder: { type: String, default: "-" },
     wrap_header_text: { type: Boolean, default: true },
     auto_header_height: { type: Boolean, default: true },
     wrap_text: { type: Boolean, default: false },
@@ -70,6 +73,7 @@ dmx.Component('ag-grid', {
     min_width: { type: Number, default: 150 },
     sortable: { type: Boolean, default: true },
     cell_editable: { type: Boolean, default: false },
+    editable_fields: { type: String, default: null },
     row_editable: { type: Boolean, default: false },
     ci_sort: { type: Boolean, default: false },
     resizable: { type: Boolean, default: true },
@@ -999,8 +1003,11 @@ dmx.Component('ag-grid', {
         let minWidth;
         let hide;
         let type;
-        let colId;
         let sortable;
+        let cellEditor;
+        let cellEditorParams;
+        let valueParser;
+        let editable;
 
         if (dataType === 'number') {
           filter = 'agNumberColumnFilter';
@@ -1166,6 +1173,59 @@ dmx.Component('ag-grid', {
         else {
           hide = undefined;
         }
+        if (options.editable_fields) {
+          const editableCellsArray = options.editable_fields.split(',');
+          if (editableCellsArray.includes(key)) {
+            editable = true;
+          }
+        }
+        function lookupKey(mappings, name) {
+          const keys = Object.keys(mappings);
+          for (let i = 0; i < keys.length; i++) {
+            const key = keys[i];
+            if (mappings[key] === name) {
+              return key;
+            }
+          }
+        }
+        function lookupValue(mappings, key) {
+          if (key==''||key === undefined){
+            return options.cselect_placeholder
+          }
+          return mappings[key];
+        }
+        if (options.cdynamic_select_editors.hasOwnProperty(key) || options.cstatic_select_editors.hasOwnProperty(key)) {
+          editable = true;
+          cellEditor = 'agSelectCellEditor';
+          valueFormatter = (params) => {
+            const selectedNode = params.api.getSelectedNodes()[0];
+            const dynamicOptions = options.cdynamic_select_editors[key];
+            const staticOptions = options.cstatic_select_editors[key];
+            let selectOptions;
+            if (dynamicOptions && params.data) {
+                selectOptions = params.data[dynamicOptions.options_field];
+            } else if (staticOptions) {
+                if (!staticOptions.parsedOptions) {
+                    staticOptions.parsedOptions = JSON.parse(staticOptions.options);
+                }
+                selectOptions = staticOptions.parsedOptions;
+            } else {
+                selectOptions = selectedNode?.data[dynamicOptions.options_field];
+            }
+            return lookupValue(selectOptions, params.value);
+          };
+          valueParser = (params) => {
+            return lookupKey(selectOptions, params.newValue);
+          }
+          cellEditorParams = (params) => {
+            const editorOptions = options.cdynamic_select_editors[key] ? 
+                params.data[options.cdynamic_select_editors[key].options_field] :
+                JSON.parse(options.cstatic_select_editors[key].options);
+            return {
+                values: Object.keys(editorOptions)
+            };
+        };
+      }
         return {
           headerName: headerName,
           field: key,
@@ -1175,6 +1235,7 @@ dmx.Component('ag-grid', {
           minWidth: minWidth,
           hide: hide,
           type: type,
+          editable: editable,
           sortable: sortable,
           filterValueGetter: filterValueGetter,
           filterParams: filterParams,
@@ -1185,7 +1246,10 @@ dmx.Component('ag-grid', {
             minWidth: parseInt(cwidths[key].min_width),
             maxWidth: parseInt(cwidths[key].max_width),
           }),
-          cellRenderer: cellRenderer
+          cellRenderer: cellRenderer,
+          cellEditor: cellEditor,
+          cellEditorParams: cellEditorParams,
+          valueParser: valueParser
         };
       });
       if (options.group_config && options.group_config.length > 0) {

package/package.json

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