@cdmx/wappler_ag_grid 2.1.3 → 2.1.5

package/.claude/settings.json

@@ -0,0 +1,7 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(git --no-pager diff HEAD -- dmx-ag-grid.js app_connect/components.hjson)"
+    ]
+  }
+}

package/CHANGELOG.md

@@ -1,4 +1,26 @@
-# Change Log - HTML Export Removal Feature
+# Change Log
+
+## Version 2.1.4 (Row Color Formatting Fix)
+
+### Summary
+Fixed row color styling (`rstyles`) so it works dynamically, supports multiple colors for the
+same field, and can color rows directly by field value.
+
+### Changes Made
+1. **`app_connect/components.hjson`** - removed `"key": "field"` from the "Configure Row Colors"
+   grid so it serializes as an array (unlimited rows per field). Renamed the `condition` column to
+   "Condition" and documented the supported syntax.
+2. **`dmx-ag-grid.js`** - changed the `rstyles` prop default from `{}` to `[]`, and rewrote
+   `createRowStyleFunction` to mirror the cell-style path: it normalizes both array and legacy
+   object input (backward compatible), and evaluates value/operator expressions
+   (`status == active`, `amount > 1000`, compound `&&`/`||`), function conditions (`myFn()`), and a
+   Field + plain-value exact-match shorthand. First matching condition wins.
+3. **`dmx-ag-grid.js`** - fixed operator parsing in `extractConditionParts` so `>=` and `<=`
+   are no longer mis-parsed as `>`/`<` (this also fixes `>=`/`<=` conditions in cell styles).
+   Function conditions require trailing `()` so plain shorthand values (e.g. status `open`)
+   cannot collide with `window` built-ins like `window.open`.
+
+---
 
 ## Version 2.0.15 (HTML Export Removal Added)
 

package/app_connect/components.hjson

@@ -808,14 +808,13 @@
               ],
               "noChangeOnHide": true,
               "groupEnabler": true,
-              "help": "Add custom Colors function that will return true or false. Add the fucntion name in the Function column."
+              "help": "Color whole rows by condition. Add one row per color - the same field can have many. Condition supports value/operator expressions (e.g. status == active, amount > 1000, status == open && amount > 100), a function name returning a boolean (e.g. myFn()), or - as a shorthand - a Field plus a plain value for an exact match. Values are unquoted."
               "children": [
                 {
                   "name": "listRowColors",
                   "attribute": "dmx-bind:rstyles",
                   "title": "Row Colors",
                   "type": "grid",
-                  "key": "field",
                   "dataBindings": true,
                   "jsonFormat": true,
                   "encloseBT": true,
@@ -827,14 +826,16 @@
                       "caption": "Field",
                       "editable": {
                         "type": "text"
-                      }
+                      },
+                      help: "Optional. Used with the shorthand (Field + plain value in Condition) for an exact match."
                     },
                     {
                       "field": "condition",
-                      "caption": "Function",
+                      "caption": "Condition",
                       "editable": {
                         "type": "text"
-                      }
+                      },
+                      help: "Expression (status == active, amount > 1000, a && b), function name with trailing parentheses (myFn() - the () are required), or a plain value matched against Field. Values are unquoted."
                     },
                     {
                       "field": "customColor",

package/dmx-ag-grid.js

@@ -24,7 +24,7 @@ dmx.Component('ag-grid', {
     tooltip_config: { type: Array, default: [] },
     custom_tooltip: { type: String, default: null },
     cstyles: { type: Array, default: [] },
-    rstyles: { type: Array, default: {} },
+    rstyles: { type: Array, default: [] },
     cnames: { type: Object, default: {} },
     cwidths: { type: Object, default: {} },
     ctypes: { type: Array, default: [] },
@@ -850,7 +850,8 @@ dmx.Component('ag-grid', {
 
     function extractConditionParts(condition) {
           
-      const operators = ['===', '==', '!=', '>', '<', '>=', '<='];
+      // Multi-char operators must be checked before '>' / '<' so '>=' and '<=' parse correctly
+      const operators = ['===', '==', '!=', '>=', '<=', '>', '<'];
       let operator;
       let left;
       let right;
@@ -1065,27 +1066,51 @@ dmx.Component('ag-grid', {
     //Custom Row Styles
     function createRowStyleFunction(rstyles) {
       return function(params) {
-        if (!rstyles || !Array.isArray(rstyles) || rstyles.length === 0) {
+        // Accept both the array form (current) and the legacy object-keyed-by-field form
+        const styles = Array.isArray(rstyles)
+          ? rstyles
+          : (rstyles && typeof rstyles === 'object' ? Object.values(rstyles) : []);
+        if (styles.length === 0) {
           return; // No styles to apply
         }
-        const rowStyle = {};
-        for (const style of rstyles) {
-          const condition = style.condition.replace(/\(\)$/, ''); // Remove () if present at the end
+        for (const style of styles) {
+          if (!style || !style.customColor) continue;
+          const condition = (style.condition || '').toString().trim();
+          const field = style.field;
           const customColor = style.customColor;
-          let conditionResult;
-          if (typeof window[condition] === 'function') {
-            const result = window[condition](params.data);
+          if (condition === '') continue;
+          let conditionResult = false;
+
+          if (condition.endsWith('()') && typeof window[condition.replace(/\(\)$/, '')] === 'function') {
+            // Function-based condition: receives row data, must return a boolean
+            const result = window[condition.replace(/\(\)$/, '')](params.data);
             if (typeof result !== 'boolean') {
               console.error('Row condition function must return a boolean value.');
-              return;
+              continue;
             }
             conditionResult = result;
+          } else if (/(===|==|!=|>=|<=|>|<)/.test(condition)) {
+            // Value/operator expression, with support for compound && / ||
+            if (/&&|\|\|/.test(condition)) {
+              const tokens = condition.split(/\s*(&&|\|\|)\s*/).filter(t => t !== '');
+              conditionResult = evaluateConditions(tokens, params);
+            } else {
+              const [left, operator, right] = extractConditionParts(condition);
+              conditionResult = params.data.hasOwnProperty(left) &&
+                (params.data[left] !== null ? evaluateCondition(params.data[left], operator, right) : false);
+            }
+          } else if (field) {
+            // Shorthand: Field + plain value => exact match on that field's value
+            conditionResult = params.data.hasOwnProperty(field) &&
+              params.data[field] !== null &&
+              String(params.data[field]) === condition;
           }
+
           if (conditionResult) {
-            rowStyle.background = customColor;
+            return { background: customColor }; // first match wins
           }
         }
-        return rowStyle;
+        return; // no condition matched
       };
     }
     dateFilterParams = {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cdmx/wappler_ag_grid",
-    "version": "2.1.3",
+    "version": "2.1.5",
     "type": "module",
     "description": "App Connect module for AG Grid v35 - Advanced data grid with enhanced editing, filtering, and tree data capabilities.",
     "license": "MIT",
@@ -16,13 +16,16 @@
     "dependencies": {
         "@ag-grid-community/locale": "~35.1.0",
         "ag-grid-community": "~35.1.0",
-        "exceljs": "^4.4.0",
         "papaparse": "~5.5.2",
         "pdfmake": "~0.2.18",
         "read-excel-file": "~5.8.7"
     },
+    "devDependencies": {
+        "exceljs": "github:cdmx-in/exceljs#v4.4.0-uuid11.1.1-r2"
+    },
     "scripts": {
         "build": "rollup --config",
         "publish-dry-run": "npm publish ./dist --access public --dry-run"
     }
 }
+

package/tests/01-basic-render.html

@@ -0,0 +1,106 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>01 · Basic Render · AG Grid Test Suite</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <link rel="stylesheet" href="./lib/test-suite.css">
+  <link rel="stylesheet" href="../node_modules/ag-grid-community/styles/ag-theme-alpine.css">
+  <link rel="stylesheet" href="../ag-theme-custom.css">
+  <link rel="stylesheet" href="../switch-toggle-slider.css">
+
+  <script src="./dmxAppConnect/dmxAppConnect.js" defer></script>
+  <script src="./lib/version-banner.js" defer></script>
+  <script src="./lib/test-helpers.js" defer></script>
+  <script src="./lib/page-template.js" defer></script>
+  <script src="../node_modules/ag-grid-community/dist/ag-grid-community.min.js" defer></script>
+  <script src="../dmx-ag-grid.js" defer></script>
+  <script src="./data/sample-data.js" defer></script>
+</head>
+<body is="dmx-app" id="page01">
+
+<script>
+  window.addEventListener('DOMContentLoaded', () => {
+    TestPage.header({
+      title: '01 · Basic Render',
+      summary: 'Auto-inferred columns, default sort + text/number filters, floating filter row, pagination.'
+    });
+  });
+</script>
+
+<main class="test-main">
+
+  <section class="feature">
+    <h2>Default grid — inferred columns</h2>
+    <p class="desc">
+      Source: <code>window.SampleData.employees</code> (25 rows). The grid infers column types from
+      data, renders Alpine theme, pagination size 10, sortable + filterable + floating filter row.
+    </p>
+    <dmx-test-data id="employees" source="employees"></dmx-test-data>
+
+    <div class="grid-wrap">
+      <dmx-ag-grid
+        id="basicGrid"
+        dmx-bind:data="employees.value"
+        grid_theme="ag-theme-alpine"
+        pagination="true"
+        dmx-bind:pagination_page_size="10"
+        sortable="true"
+        filter="true"
+        floating_filter="true"
+        resizable="true"
+        animate_rows="true">
+      </dmx-ag-grid>
+    </div>
+
+    <div class="kv">
+      <div class="k">Row count (binding)</div>
+      <div class="v" id="row-count" dmx-text="basicGrid.count">…</div>
+      <div class="k">gridReady</div>
+      <div class="v" dmx-text="basicGrid.state.gridReady">…</div>
+      <div class="k">firstDataRendered</div>
+      <div class="v" dmx-text="basicGrid.state.firstDataRendered">…</div>
+      <div class="k">rowDataUpdated</div>
+      <div class="v" dmx-text="basicGrid.state.rowDataUpdated">…</div>
+    </div>
+
+    <div class="controls" style="margin-top: 12px;">
+      <button class="primary" onclick="TestKit.callMethod('basicGrid', 'reloadGrid', true)">reloadGrid()</button>
+      <button onclick="TestKit.callMethod('basicGrid', 'loadGrid')">loadGrid()</button>
+      <button onclick="logSnapshot('basicGrid')">log snapshot</button>
+      <input type="search" id="qf" placeholder="Quick filter…" oninput="quickFilter(this.value)">
+    </div>
+  </section>
+
+  <section class="feature">
+    <h2>Console log</h2>
+    <div class="log" id="cli-log"></div>
+  </section>
+
+</main>
+
+<script>
+  function log(line) {
+    const box = document.getElementById('cli-log');
+    if (!box) return;
+    const el = document.createElement('div');
+    el.className = 'log-entry';
+    el.textContent = '[' + new Date().toISOString().slice(11,19) + '] ' + line;
+    box.insertBefore(el, box.firstChild);
+  }
+  function logSnapshot(id) {
+    log(id + ': ' + JSON.stringify(TestKit.snapshot(id)));
+  }
+  function quickFilter(value) {
+    const g = TestKit.grid('basicGrid');
+    if (!g) return;
+    const inst = g.get('gridInstance');
+    if (inst && inst.setGridOption) {
+      inst.setGridOption('quickFilterText', value);
+    }
+  }
+  window.addEventListener('error', (e) => log('error: ' + e.message));
+</script>
+</body>
+</html>

package/tests/02-themes-locale.html

@@ -0,0 +1,98 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>02 · Themes &amp; Locale · AG Grid Test Suite</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <link rel="stylesheet" href="./lib/test-suite.css">
+  <link rel="stylesheet" href="../node_modules/ag-grid-community/styles/ag-theme-alpine.css">
+  <link rel="stylesheet" href="../node_modules/ag-grid-community/styles/ag-theme-balham.css">
+  <link rel="stylesheet" href="../node_modules/ag-grid-community/styles/ag-theme-material.css">
+  <link rel="stylesheet" href="../node_modules/ag-grid-community/styles/ag-theme-quartz.css">
+  <link rel="stylesheet" href="../ag-theme-custom.css">
+  <link rel="stylesheet" href="../switch-toggle-slider.css">
+
+  <script src="./dmxAppConnect/dmxAppConnect.js" defer></script>
+  <script src="./lib/version-banner.js" defer></script>
+  <script src="./lib/test-helpers.js" defer></script>
+  <script src="./lib/page-template.js" defer></script>
+  <script src="../node_modules/ag-grid-community/dist/ag-grid-community.min.js" defer></script>
+  <script src="../node_modules/@ag-grid-community/locale/dist/umd/@ag-grid-community/locale.min.js" defer></script>
+  <script src="../ru.js" defer></script>
+  <script src="../dmx-ag-grid.js" defer></script>
+  <script src="./data/sample-data.js" defer></script>
+</head>
+<body is="dmx-app" id="page02">
+
+<script>
+  window.addEventListener('DOMContentLoaded', () => {
+    TestPage.header({
+      title: '02 · Themes & Locale',
+      summary: 'Toggle theme, dark mode, RTL, locale. The grid re-renders when dark_mode flips.'
+    });
+  });
+</script>
+
+<main class="test-main">
+  <dmx-test-data id="rows" source="employees"></dmx-test-data>
+
+  <section class="feature">
+    <h2>Theme matrix</h2>
+    <p class="desc">Each grid is a separate instance, demonstrating that the <code>grid_theme</code> attribute swaps the CSS class.</p>
+
+    <h3 style="margin-top:14px;">Alpine</h3>
+    <div class="grid-wrap"><dmx-ag-grid id="g_alpine" dmx-bind:data="rows.value" grid_theme="ag-theme-alpine" dmx-bind:pagination="false" dmx-bind:row_height="28"></dmx-ag-grid></div>
+
+    <h3 style="margin-top:14px;">Balham</h3>
+    <div class="grid-wrap"><dmx-ag-grid id="g_balham" dmx-bind:data="rows.value" grid_theme="ag-theme-balham" dmx-bind:pagination="false" dmx-bind:row_height="26"></dmx-ag-grid></div>
+
+    <h3 style="margin-top:14px;">Material</h3>
+    <div class="grid-wrap"><dmx-ag-grid id="g_material" dmx-bind:data="rows.value" grid_theme="ag-theme-material" dmx-bind:pagination="false"></dmx-ag-grid></div>
+
+    <h3 style="margin-top:14px;">Quartz</h3>
+    <div class="grid-wrap"><dmx-ag-grid id="g_quartz" dmx-bind:data="rows.value" grid_theme="ag-theme-quartz" dmx-bind:pagination="false"></dmx-ag-grid></div>
+
+    <h3 style="margin-top:14px;">Custom (alpine + ag-theme-custom)</h3>
+    <div class="grid-wrap"><dmx-ag-grid id="g_custom" dmx-bind:data="rows.value" grid_theme="ag-theme-alpine ag-theme-custom" dmx-bind:pagination="false"></dmx-ag-grid></div>
+  </section>
+
+  <section class="feature">
+    <h2>Dark mode toggle</h2>
+    <p class="desc">Flipping <code>dark_mode</code> triggers the grid's <code>requestUpdate</code> branch and rebuilds the instance with a <code>-dark</code> theme suffix.</p>
+    <div class="controls">
+      <button class="primary" onclick="toggleDark()">Toggle dark mode</button>
+      <span class="kv" style="display:inline-grid; grid-template-columns: auto auto; gap: 4px 8px;">
+        <span class="k">dark_mode</span><span class="v" id="dark-val">false</span>
+      </span>
+    </div>
+    <div class="grid-wrap">
+      <dmx-ag-grid id="g_dark" dmx-bind:data="rows.value" grid_theme="ag-theme-alpine" dmx-bind:dark_mode="false" dmx-bind:pagination="false"></dmx-ag-grid>
+    </div>
+  </section>
+
+  <section class="feature">
+    <h2>RTL + locale</h2>
+    <p class="desc">Hebrew locale forces RTL; Russian uses the shipped <code>ru.js</code>; Spanish/Portuguese come from <code>@ag-grid-community/locale</code>.</p>
+    <h3>Hebrew (RTL)</h3>
+    <div class="grid-wrap"><dmx-ag-grid id="g_he" dmx-bind:data="rows.value" grid_theme="ag-theme-alpine" locale_text="HE" dmx-bind:enable_rtl="true" dmx-bind:pagination="false"></dmx-ag-grid></div>
+
+    <h3 style="margin-top:14px;">Russian</h3>
+    <div class="grid-wrap"><dmx-ag-grid id="g_ru" dmx-bind:data="rows.value" grid_theme="ag-theme-alpine" locale_text="RU" dmx-bind:pagination="false"></dmx-ag-grid></div>
+
+    <h3 style="margin-top:14px;">Spanish</h3>
+    <div class="grid-wrap"><dmx-ag-grid id="g_es" dmx-bind:data="rows.value" grid_theme="ag-theme-alpine" locale_text="ES" dmx-bind:pagination="false"></dmx-ag-grid></div>
+  </section>
+</main>
+
+<script>
+  let dark = false;
+  function toggleDark() {
+    dark = !dark;
+    document.getElementById('dark-val').textContent = String(dark);
+    const c = TestKit.grid('g_dark');
+    if (c) c.set('dark_mode', dark);
+  }
+</script>
+</body>
+</html>

package/tests/03-editing.html

@@ -0,0 +1,119 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>03 · Editing · AG Grid Test Suite</title>
+  <link rel="stylesheet" href="./lib/test-suite.css">
+  <link rel="stylesheet" href="../node_modules/ag-grid-community/styles/ag-theme-alpine.css">
+  <link rel="stylesheet" href="../ag-theme-custom.css">
+  <link rel="stylesheet" href="../switch-toggle-slider.css">
+
+  <script src="./dmxAppConnect/dmxAppConnect.js" defer></script>
+  <script src="./lib/version-banner.js" defer></script>
+  <script src="./lib/test-helpers.js" defer></script>
+  <script src="./lib/page-template.js" defer></script>
+  <script src="../node_modules/ag-grid-community/dist/ag-grid-community.min.js" defer></script>
+  <script src="../dmx-ag-grid.js" defer></script>
+  <script src="./data/sample-data.js" defer></script>
+</head>
+<body is="dmx-app" id="page03">
+
+<script>
+  window.addEventListener('DOMContentLoaded', () => {
+    TestPage.header({
+      title: '03 · Editing',
+      summary: 'Cell vs row editing, restricted editable_fields, static + dynamic select editors.'
+    });
+  });
+</script>
+
+<main class="test-main">
+
+  <dmx-test-data id="rows" source="employees"></dmx-test-data>
+  <dmx-event-log id="editLog"></dmx-event-log>
+
+  <section class="feature">
+    <h2>Cell editable — all fields</h2>
+    <p class="desc">
+      Double-click any cell to edit. <code>cell_data_edited</code> fires for each change with
+      <code>{ field, oldValue, newValue, rowId }</code>. Logged below.
+    </p>
+    <div class="grid-wrap">
+      <dmx-ag-grid
+        id="cellEdit"
+        dmx-bind:data="rows.value"
+        grid_theme="ag-theme-alpine"
+        dmx-bind:cell_editable="true"
+        dmx-bind:pagination="false"
+        dmx-bind:floating_filter="false"
+        dmx-on:cell_data_edited="editLog.add('cell_data_edited')">
+      </dmx-ag-grid>
+    </div>
+  </section>
+
+  <section class="feature">
+    <h2>Row editable — restricted fields</h2>
+    <p class="desc">
+      <code>row_editable=true</code> with <code>editable_fields="salary,rating,active"</code> — only those columns
+      are editable. <code>row_data_edited</code> fires once per row commit.
+    </p>
+    <div class="grid-wrap">
+      <dmx-ag-grid
+        id="rowEdit"
+        dmx-bind:data="rows.value"
+        grid_theme="ag-theme-alpine"
+        dmx-bind:row_editable="true"
+        editable_fields="salary,rating,active"
+        dmx-bind:pagination="false"
+        dmx-on:row_data_edited="editLog.add('row_data_edited')">
+      </dmx-ag-grid>
+    </div>
+  </section>
+
+  <section class="feature">
+    <h2>Select editors</h2>
+    <p class="desc">
+      <code>cstatic_select_editors</code> for <code>department</code>, <code>cdynamic_select_editors</code> for <code>active</code>.
+      Both render a dropdown editor when the cell is edited.
+    </p>
+    <div class="grid-wrap">
+      <!-- cstatic_select_editors expects { fieldName: { options: '<JSON string>' } } where
+           the JSON parses to an object whose keys become the displayed values. -->
+      <dmx-ag-grid
+        id="selectEdit"
+        dmx-bind:data="rows.value"
+        grid_theme="ag-theme-alpine"
+        dmx-bind:cell_editable="true"
+        dmx-bind:cstatic_select_editors='{"department": {"options": "{\"Engineering\":\"Engineering\",\"Sales\":\"Sales\",\"Marketing\":\"Marketing\",\"HR\":\"HR\",\"Finance\":\"Finance\"}"}}'
+        cselect_placeholder="—"
+        dmx-bind:pagination="false"
+        dmx-on:cell_data_edited="editLog.add('select_cell_edited')">
+      </dmx-ag-grid>
+    </div>
+  </section>
+
+  <section class="feature">
+    <h2>Edit log</h2>
+    <div class="kv">
+      <div class="k">events captured</div><div class="v" dmx-text="editLog.count">0</div>
+      <div class="k">last event</div><div class="v" dmx-text="editLog.last.name">—</div>
+    </div>
+    <div class="log" id="log-out"></div>
+  </section>
+</main>
+
+<script>
+  function renderLog() {
+    if (!window.dmx || !dmx.app) return setTimeout(renderLog, 100);
+    const log = dmx.app.get('editLog');
+    if (!log) return setTimeout(renderLog, 100);
+    const box = document.getElementById('log-out');
+    setInterval(() => {
+      const evs = log.events || [];
+      box.innerHTML = evs.map(e => '<div class="log-entry">' + e.at + ' — ' + e.name + '</div>').join('');
+    }, 500);
+  }
+  renderLog();
+</script>
+</body>
+</html>

package/tests/04-selection.html

@@ -0,0 +1,103 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>04 · Selection &amp; Row Events</title>
+  <link rel="stylesheet" href="./lib/test-suite.css">
+  <link rel="stylesheet" href="../node_modules/ag-grid-community/styles/ag-theme-alpine.css">
+  <link rel="stylesheet" href="../ag-theme-custom.css">
+  <link rel="stylesheet" href="../switch-toggle-slider.css">
+  <script src="./dmxAppConnect/dmxAppConnect.js" defer></script>
+  <script src="./lib/version-banner.js" defer></script>
+  <script src="./lib/test-helpers.js" defer></script>
+  <script src="./lib/page-template.js" defer></script>
+  <script src="../node_modules/ag-grid-community/dist/ag-grid-community.min.js" defer></script>
+  <script src="../dmx-ag-grid.js" defer></script>
+  <script src="./data/sample-data.js" defer></script>
+</head>
+<body is="dmx-app" id="page04">
+
+<script>
+  window.addEventListener('DOMContentLoaded', () => {
+    TestPage.header({
+      title: '04 · Selection & Row Events',
+      summary: 'Single vs multi-row selection, row checkbox events, status toggle, click + double-click hooks.'
+    });
+  });
+</script>
+
+<main class="test-main">
+  <dmx-test-data id="rows" source="employees"></dmx-test-data>
+  <dmx-event-log id="evLog"></dmx-event-log>
+
+  <section class="feature">
+    <h2>Multi-row selection with checkbox events</h2>
+    <p class="desc">
+      <code>row_selection="multiRow"</code>, <code>row_checkbox_event=true</code>, <code>row_status_event=true</code>.
+      Selected rows are exposed via <code>selectedRows</code>.
+    </p>
+    <div class="grid-wrap">
+      <dmx-ag-grid
+        id="selGrid"
+        dmx-bind:data="rows.value"
+        grid_theme="ag-theme-alpine"
+        row_selection="multiRow"
+        dmx-bind:row_checkbox_event="true"
+        dmx-bind:row_status_event="true"
+        dmx-bind:row_click_event="true"
+        dmx-bind:row_double_click_event="true"
+        dmx-bind:pagination="false"
+        dmx-on:row_clicked="evLog.add('row_clicked')"
+        dmx-on:row_double_clicked="evLog.add('row_double_clicked')"
+        dmx-on:row_checkbox_checked="evLog.add('row_checkbox_checked')"
+        dmx-on:row_checkbox_unchecked="evLog.add('row_checkbox_unchecked')"
+        dmx-on:row_status_enabled="evLog.add('row_status_enabled')"
+        dmx-on:row_status_disabled="evLog.add('row_status_disabled')">
+      </dmx-ag-grid>
+    </div>
+
+    <div class="controls">
+      <button class="primary" onclick="TestKit.callMethod('selGrid','getSelectedRows')">getSelectedRows()</button>
+      <button onclick="dumpSelected()">log selectedRows binding</button>
+    </div>
+
+    <div class="kv">
+      <div class="k">selectedRows.length</div>
+      <div class="v" dmx-text="selGrid.selectedRows.length">0</div>
+      <div class="k">last event</div>
+      <div class="v" dmx-text="evLog.last.name">—</div>
+    </div>
+  </section>
+
+  <section class="feature">
+    <h2>Single-row selection</h2>
+    <p class="desc"><code>row_selection="singleRow"</code> — clicking a row replaces selection.</p>
+    <div class="grid-wrap">
+      <dmx-ag-grid id="singleSel" dmx-bind:data="rows.value" grid_theme="ag-theme-alpine" row_selection="singleRow" dmx-bind:pagination="false"></dmx-ag-grid>
+    </div>
+  </section>
+
+  <section class="feature">
+    <h2>Event log</h2>
+    <div class="log" id="log-out"></div>
+  </section>
+</main>
+
+<script>
+  function dumpSelected() {
+    const c = TestKit.grid('selGrid');
+    console.log('selectedRows', c && c.get('selectedRows'));
+  }
+  (function pollLog() {
+    if (!window.dmx || !dmx.app) return setTimeout(pollLog, 100);
+    const log = dmx.app.get('evLog');
+    if (!log) return setTimeout(pollLog, 100);
+    setInterval(() => {
+      const evs = log.events || [];
+      document.getElementById('log-out').innerHTML =
+        evs.slice(0, 30).map(e => '<div class="log-entry">' + e.at + ' — ' + e.name + '</div>').join('');
+    }, 400);
+  })();
+</script>
+</body>
+</html>