@cdmx/wappler_ag_grid 2.1.8 → 2.1.10

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Change Log
 
+## Version 2.1.9 (Filter on JS-rendered columns)
+
+### Summary
+Column filters, the floating filter row, the quick filter, `applyFilters` and preset `cfilters` now match the
+text a `js_data_changes` function renders (HTML removed) instead of the raw field value. Columns whose raw
+value is a JSON array/object are matched against their JSON text. Fixes "contains" filters on result-list
+columns (e.g. Monitoring Results / Screening Results) returning no rows.
+
+### Changes Made
+1. **`dmx-ag-grid.js`** - text-type `js_data_changes` columns get a `filterValueGetter` that runs the render
+   function and strips tags via `removeHtmlTags` (now a hoisted function declaration); number/date columns keep
+   the raw value for their comparison filters. The shared filter value getter stringifies object/array values.
+2. **`tests/13-flags-styles.html`**, **`tests/data/sample-data.js`** - `jsFilterGrid` scenario with a
+   `transactions` fixture and page assertions for column + quick filters.
+
+---
+
 ## Version 2.1.4 (Row Color Formatting Fix)
 
 ### Summary

package/README.md

@@ -408,6 +408,8 @@ ex: jsChanges.
   }
 </script>
   ```
+Column filters, the floating filter row and the quick filter match the text this function renders (HTML tags removed, `<br>` treated as a line break), so searching for a word that is visible in the cell finds the row. This applies to text columns; number and date columns keep filtering on their raw value. Columns whose raw value is a JSON array/object are matched against their JSON text.
+
 ---
 # Custom Headers
 

package/dmx-ag-grid.js

@@ -1353,8 +1353,10 @@ dmx.Component('ag-grid', {
             return parseFloat(value);
           }
         }
-        // Return the original value if no matching changes were found
-        return value;
+        // Return the original value if no matching changes were found.
+        // ponytail: arrays/objects (JSON result lists) stringify so text filters can match nested words;
+        // keys match too - flatten string leaves if that ever bites.
+        return (value !== null && typeof value === 'object') ? JSON.stringify(value) : value;
       };
     };
     if (Array.isArray(this.props.column_defs) && this.props.column_defs.length > 0) {
@@ -1538,6 +1540,20 @@ dmx.Component('ag-grid', {
                   return cellValue;
                 }
               }
+              // ponytail: filter on what the user sees - renderer output with tags stripped.
+              // Covers column/floating filters, quick filter, applyFilters and cfilters (all read filterValueGetter).
+              // Text columns only: number/date filters compare the raw value, so they keep the base getter.
+              if (dataType === 'text') {
+                const baseFilterValueGetter = filterValueGetter;
+                filterValueGetter = (params) => {
+                  const fn = window[matchingJsChange.function];
+                  const rendered = (typeof fn === 'function' && params.data) ? fn(params.data) : undefined;
+                  if (typeof rendered !== 'string') {
+                    return baseFilterValueGetter ? baseFilterValueGetter(params) : undefined;
+                  }
+                  return removeHtmlTags(rendered);
+                };
+              }
             }
             else {
               cellRenderer = undefined;
@@ -2288,7 +2304,8 @@ dmx.Component('ag-grid', {
 
     //CSV Export Function
     // Helper function to remove HTML tags from string
-    const removeHtmlTags = (htmlString) => {
+    // Function declaration (hoisted): column-def filter getters built earlier in refreshGrid use it.
+    function removeHtmlTags(htmlString) {
       if (typeof htmlString !== 'string') return htmlString;
       // Remove all HTML tags and decode common HTML entities
       return htmlString
@@ -2300,7 +2317,7 @@ dmx.Component('ag-grid', {
         .replace(/&/g, '&')
         .replace(/"/g, '"')
         .replace(/'/g, "'");
-    };
+    }
 
     exportGridData = (currentGridInstance, currentGridConfig) => {
       const exportConfig = currentGridConfig.context.exportConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cdmx/wappler_ag_grid",
-    "version": "2.1.8",
+    "version": "2.1.10",
     "type": "module",
     "description": "App Connect module for AG Grid v35 - Advanced data grid with enhanced editing, filtering, and tree data capabilities.",
     "license": "MIT",
@@ -29,3 +29,4 @@
         "publish-dry-run": "npm publish ./dist --access public --dry-run"
     }
 }
+

package/tests/13-flags-styles.html

@@ -36,6 +36,7 @@
 
 <main class="test-main">
   <dmx-test-data id="rows" source="employees"></dmx-test-data>
+  <dmx-test-data id="txns" source="transactions"></dmx-test-data>
 
   <section class="feature">
     <h2>Suppression flags + ci_sort + hide_filters/sort</h2>
@@ -238,6 +239,28 @@
     </div>
   </section>
 
+  <section class="feature">
+    <h2>Filters on JS-rendered columns (js_data_changes)</h2>
+    <p class="desc">
+      <code>monitoring_results</code> / <code>screening_results</code> are JSON lists rendered by
+      <code>js_data_changes</code> functions (one entry per line via <code>&lt;br&gt;</code>). Since 2.1.9 the
+      column filters, <code>applyFilters</code> and the quick filter match the rendered text, not the raw array
+      (text columns only: <code>amount</code> also has a JS renderer and must keep its number filter).
+      Try typing <code>PAYOUT</code> in a floating filter or the quick filter box.
+    </p>
+    <input type="search" id="jsqf" placeholder="Quick filter…" oninput="document.getElementById('jsFilterGrid').dmxComponent.get('gridInstance').setGridOption('quickFilterText', this.value)">
+    <div class="grid-wrap">
+      <dmx-ag-grid
+        id="jsFilterGrid"
+        dmx-bind:data="txns.value"
+        grid_theme="ag-theme-alpine"
+        quick_filter_field="jsqf"
+        dmx-bind:js_data_changes="[{field:'monitoring_results', function:'renderMonitoring'},{field:'screening_results', function:'renderScreening'},{field:'amount', function:'renderAmount'}]"
+        dmx-bind:pagination="false">
+      </dmx-ag-grid>
+    </div>
+  </section>
+
   <section class="feature">
     <h2>Live rstyles assertions</h2>
     <p class="desc">
@@ -250,6 +273,12 @@
 </main>
 
 <script>
+  // js_data_changes renderers for jsFilterGrid: JSON lists -> one entry per line.
+  window.renderMonitoring = data => (data.monitoring_results || []).map(r => '<b>' + r.rule + '</b> (' + r.score + ')').join('<br>');
+  window.renderScreening  = data => (data.screening_results  || []).map(r => r.list + ': ' + r.match).join('<br>');
+  // Number column with a JS renderer: its number filter must keep comparing the raw value.
+  window.renderAmount     = data => '<span class="badge">' + Number(data.amount).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + '</span>';
+
   // Helpers: count rows in a grid's DOM with a given background colour. Multiple matches
   // are accepted (puppeteer normalises CSS to rgb()).
   function bgCount(gridId, predicate) {
@@ -364,13 +393,49 @@
     checks.cs_textHigh = { expect: highSalary, actual: csTextHigh };
     checks.cs_cellLow  = { expect: lowSalary,  actual: csCellLow };
 
-    const failed = Object.entries(checks).filter(([_, v]) => v.actual !== v.expect);
-    window.__rsCheck = { checks, ok: failed.length === 0, failed: failed.map(([k]) => k) };
+    // js_data_changes filter checks (2.1.9): filters must match the rendered text, not the raw JSON array.
+    // The component's filter methods defer to dmx.nextTick, so this part is async and __rsCheck is
+    // published once it has run.
+    (async () => {
+      const txns = (window.SampleData && window.SampleData.transactions) || [];
+      const hasWord = (list, key, word) => (list || []).some(r => String(r[key]).includes(word));
+      const monPayout = txns.filter(r => hasWord(r.monitoring_results, 'rule', 'PAYOUT')).length;
+      const scrPayout = txns.filter(r => hasWord(r.screening_results, 'match', 'PAYOUT')).length;
+      const anyPayout = txns.filter(r => hasWord(r.monitoring_results, 'rule', 'PAYOUT') || hasWord(r.screening_results, 'match', 'PAYOUT')).length;
+      const el = document.getElementById('jsFilterGrid');
+      const comp = el && el.dmxComponent;
+      const gi = comp && comp.get('gridInstance');
+      const tick = () => new Promise(res => dmx.nextTick(res));
+      const call = async (name, arg) => { comp.methods[name].call(comp, arg); await tick(); await tick(); };
+      const visible = () => gi.getDisplayedRowCount();
+      if (gi) {
+        await call('applyFilters', { monitoring_results: { type: 'contains', filter: 'PAYOUT' } });
+        checks.jsFilter_monitoring = { expect: monPayout, actual: visible() };
+        await call('applyFilters', { screening_results: { type: 'contains', filter: 'PAYOUT' } });
+        checks.jsFilter_screening = { expect: scrPayout, actual: visible() };
+        await call('applyFilters', { monitoring_results: { type: 'contains', filter: 'NO-SUCH-RULE' } });
+        checks.jsFilter_noMatch = { expect: 0, actual: visible() };
+        await call('applyFilters', { id: { type: 'equals', filter: 9003 } });
+        checks.jsFilter_plainColumn = { expect: 1, actual: visible() };
+        await call('applyFilters', { amount: { type: 'greaterThan', filter: 1000 } });
+        checks.jsFilter_numberWithRenderer = { expect: txns.filter(r => r.amount > 1000).length, actual: visible() };
+        await call('clearFilters');
+        gi.setGridOption('quickFilterText', 'payout');
+        checks.jsFilter_quick = { expect: anyPayout, actual: visible() };
+        gi.setGridOption('quickFilterText', '');
+        checks.jsFilter_cleared = { expect: txns.length, actual: visible() };
+      } else {
+        checks.jsFilter_gridReady = { expect: true, actual: false };
+      }
+
+      const failed = Object.entries(checks).filter(([_, v]) => v.actual !== v.expect);
+      window.__rsCheck = { checks, ok: failed.length === 0, failed: failed.map(([k]) => k) };
 
-    const box = document.getElementById('rs-check');
-    box.textContent = Object.entries(checks)
-      .map(([k, v]) => (v.actual === v.expect ? '✓' : '✗') + ' ' + k + ' — expected ' + v.expect + ', got ' + v.actual)
-      .join('\n');
+      const box = document.getElementById('rs-check');
+      box.textContent = Object.entries(checks)
+        .map(([k, v]) => (v.actual === v.expect ? '✓' : '✗') + ' ' + k + ' — expected ' + v.expect + ', got ' + v.actual)
+        .join('\n');
+    })();
   }
   runChecks();
 </script>

package/tests/data/sample-data.js

@@ -59,5 +59,16 @@
     { id: 5, name: 'Echo',    department: 'Finance',     status: true  }
   ];
 
-  window.SampleData = { employees, orders, departments, statusRows };
+  // Transactions whose result columns are JSON lists rendered via js_data_changes.
+  // Used by 13-flags-styles.html to prove column + quick filters match the rendered text.
+  const transactions = [
+    { id: 9001, reference: 'TXN9001', amount: 1250.00, monitoring_results: [{ rule: 'PAYOUT', score: 80 }, { rule: 'VELOCITY', score: 40 }],    screening_results: [{ list: 'PEP', match: 'PAYOUT AGENT' }] },
+    { id: 9002, reference: 'TXN9002', amount: 300.00,  monitoring_results: [{ rule: 'VELOCITY', score: 55 }],                                     screening_results: [{ list: 'SANCTIONS', match: 'NONE' }] },
+    { id: 9003, reference: 'TXN9003', amount: 9800.00, monitoring_results: [{ rule: 'PAYOUT', score: 95 }],                                       screening_results: [] },
+    { id: 9004, reference: 'TXN9004', amount: 75.00,   monitoring_results: [],                                                                     screening_results: [{ list: 'PEP', match: 'PAYOUT' }] },
+    { id: 9005, reference: 'TXN9005', amount: 410.00,  monitoring_results: null,                                                                   screening_results: null },
+    { id: 9006, reference: 'TXN9006', amount: 2200.00, monitoring_results: [{ rule: 'STRUCTURING', score: 70 }, { rule: 'PAYOUT', score: 60 }], screening_results: [{ list: 'ADVERSE MEDIA', match: 'NONE' }] }
+  ];
+
+  window.SampleData = { employees, orders, departments, statusRows, transactions };
 })();

package/tests/findings.json

@@ -1,5 +1,5 @@
 {
-  "startedAt": "2026-09-23T12:01:47.474Z",
+  "startedAt": "2026-10-01T12:45:25.153Z",
   "base": "http://localhost:8765/tests",
   "pages": [
     {
@@ -594,7 +594,8 @@
         "rsLegacy",
         "csCell",
         "transformGrid",
-        "tipGrid"
+        "tipGrid",
+        "jsFilterGrid"
       ],
       "missing": [],
       "result": {
@@ -711,6 +712,17 @@
             "filterStateKeys": [],
             "columnStateLen": 0,
             "domRows": 25
+          },
+          "jsFilterGrid": {
+            "count": 6,
+            "state": {
+              "firstDataRendered": true
+            },
+            "dataLen": null,
+            "selectedRowsLen": 0,
+            "filterStateKeys": [],
+            "columnStateLen": 0,
+            "domRows": 6
           }
         }
       },
@@ -760,6 +772,34 @@
           "cs_cellLow": {
             "expect": 5,
             "actual": 5
+          },
+          "jsFilter_monitoring": {
+            "expect": 3,
+            "actual": 3
+          },
+          "jsFilter_screening": {
+            "expect": 2,
+            "actual": 2
+          },
+          "jsFilter_noMatch": {
+            "expect": 0,
+            "actual": 0
+          },
+          "jsFilter_plainColumn": {
+            "expect": 1,
+            "actual": 1
+          },
+          "jsFilter_numberWithRenderer": {
+            "expect": 3,
+            "actual": 3
+          },
+          "jsFilter_quick": {
+            "expect": 4,
+            "actual": 4
+          },
+          "jsFilter_cleared": {
+            "expect": 6,
+            "actual": 6
           }
         },
         "ok": true,
@@ -888,5 +928,5 @@
       }
     }
   ],
-  "finishedAt": "2026-09-23T12:02:10.813Z"
+  "finishedAt": "2026-10-01T12:45:49.727Z"
 }

package/tests/lib/test-helpers.js

@@ -131,7 +131,9 @@
         console.error('[TestKit] no method', method, 'on', id);
         return null;
       }
-      return g[key].apply(g, args);
+      // AppConnect's __method wrapper drops its first argument (Wappler passes the event there),
+      // so prepend a placeholder or methods like applyFilters(model) receive undefined.
+      return g[key].apply(g, [null].concat(args));
     },
     list: function () {
       // Find dmx-ag-grid elements in the DOM and return their dmx ids — more reliable

package/tests/run-all-puppeteer.cjs

@@ -22,7 +22,7 @@ const PAGES = [
   { file: '10-state-persistence.html',grids: ['stateGrid'] },
   { file: '11-layout.html',           grids: ['autoH','fixedH','scrollH'] },
   { file: '12-methods.html',          grids: ['m'] },
-  { file: '13-flags-styles.html',     grids: ['flagsGrid','rsFn','rsOp','rsCompound','rsShort','rsFirst','rsLegacy','csCell','transformGrid','tipGrid'], pageAssertion: '__rsCheck' },
+  { file: '13-flags-styles.html',     grids: ['flagsGrid','rsFn','rsOp','rsCompound','rsShort','rsFirst','rsLegacy','csCell','transformGrid','tipGrid','jsFilterGrid'], pageAssertion: '__rsCheck' },
   { file: '14-compact-view.html',     grids: ['compactGrid','extButtons','cellEvtGrid'] },
   { file: '15-csp.html',              grids: ['cspGrid','statusGrid'], pageAssertion: '__cspCheck' }
 ];
@@ -132,8 +132,11 @@ function findChrome() {
     let assertion = null;
     if (spec.pageAssertion) {
       try {
+        // Page checks poll until their grids settle; wait for them to publish instead of
+        // reading too early (a missing assertion must fail, not pass silently).
+        await page.waitForFunction((key) => !!window[key], { timeout: 10000 }, spec.pageAssertion);
         assertion = await page.evaluate((key) => window[key] || null, spec.pageAssertion);
-      } catch (e) { assertion = { error: e.message }; }
+      } catch (e) { assertion = { ok: false, error: e.message }; }
     }
     const assertionFailed = assertion && assertion.ok === false;
 
@@ -160,6 +163,7 @@ function findChrome() {
     if (assertion) {
       if (assertionFailed) {
         console.log('  assertion FAILED — checks that did not match:');
+        if (assertion.error) console.log('   error: ' + assertion.error);
         (assertion.failed || []).forEach(k => {
           const c = assertion.checks && assertion.checks[k];
           console.log('   ' + k + ' expected ' + (c && c.expect) + ' got ' + (c && c.actual));

package/tests/run-all.cjs

@@ -25,7 +25,7 @@ const PAGES = [
   { file: '10-state-persistence.html',grids: ['stateGrid'] },
   { file: '11-layout.html',           grids: ['autoH','fixedH','scrollH'] },
   { file: '12-methods.html',          grids: ['m'] },
-  { file: '13-flags-styles.html',     grids: ['flagsGrid','stylesGrid','transformGrid','tipGrid'] },
+  { file: '13-flags-styles.html',     grids: ['flagsGrid','rsFn','rsOp','rsCompound','rsShort','rsFirst','rsLegacy','csCell','transformGrid','tipGrid','jsFilterGrid'] },
   { file: '14-compact-view.html',     grids: ['compactGrid','extButtons','cellEvtGrid'] },
   { file: '15-csp.html',              grids: ['cspGrid','statusGrid'] }
 ];