.

lib/ui/grid.html

@@ -14,7 +14,28 @@
       const Grid = window["lib-ui"].Grid;
 
       const grid = new Grid(document.querySelector('#grid-sample'));
-      // grid.height = 0;
+
+      const statusCol = {
+        ...Grid.GridColumn,
+
+        create() {
+          const container = document.createElement('div');
+          return container;
+        },
+        // createEdit() { },
+        setValue(element, val) {
+          element.innerHTML = val;
+        },
+        getValue(element) {
+          return element.innerHTML;
+        },
+        setEnabled(element, enabled) {
+          element.className = enabled === false ? 'disabled' : '';
+        }
+      };
+
+      grid.allowHtml = true;
+      grid.height = 0;
       grid.columns = [
         { key: 'c1', caption: 'column 1' },
         { key: 'c2', caption: 'column 2', allcheck: true, type: Grid.ColumnTypes.Checkbox, enabled: 'enabled' },
@@ -30,14 +51,25 @@
           ],
           enabled: 'enabled'
         },
+        {
+          key: 'c2b',
+          caption: 'column 2 b',
+          type: statusCol,
+          enabled: 'enabled'
+        },
         { key: 'c3', caption: 'column 3', width: 90 },
         { key: 'c4', caption: 'Note', type: Grid.ColumnTypes.Input }
       ];
-      grid.cellClicked = (rId, cId) => console.log(`row (${rId}), column (${cId}) clicked.`);
+      grid.cellClicked = (rId, cId) => {
+        console.log(`row (${rId}), column (${cId}) clicked.`);
+        return false;
+      };
+      grid.rowDblClicked = (rId) => console.log(`row (${rId}) double clicked.`);
+      grid.cellDblClicked = (rId, cId) => console.log(`row (${rId}), column (${cId}) double clicked.`);
       grid.init();
       grid.source = [
-        { c1: 'abc', c2: true, c2a: 'off', c3: 12345, c4: 'another note', enabled: false },
+        { c1: 'abc', c2: true, c2a: 'off', c2b: '<font style="color: red; margin-left: 8px">red</font>', c3: 12345, c4: 'another note', enabled: false },
-        { c1: 'abc2bbbbaaaaa', c2: false, c2a: 'pending', c3: 1225, c4: 'Note note this is note' },
+        { c1: 'abc2bbbbaaaaa', c2: false, c2a: 'pending', c2b: '<b style="margin-left: 8px">bold</b>', c3: 1225, c4: 'Note note this is note' },
         { c1: 'type', c2: false, c2a: 'broken', c3: 121111 },
         { c1: 'diff', c2: true, c2a: 'running', c3: 124445555555555555 },
         { c1: 'diff', c2: true, c2a: 'running', c3: 12499 },

lib/ui/grid.js

@@ -1,4 +1,5 @@
-import { isMobile, global, nullOrEmpty, throttle, truncate, isPositive } from "../utility";
+import { global, isPositive, isMobile, throttle, truncate } from "../utility";
+import { nullOrEmpty } from "../utility/strings";
 import { r } from "../utility/lgres";
 import { createIcon } from "../ui/icon";
 import { createCheckbox } from "../ui/checkbox";
@@ -195,6 +196,8 @@ class Grid {
         isCheckbox(type) { return type === 3 }
     };
 
+    static GridColumn = GridColumn;
+
     constructor(container) {
         this.#parent = container;
     }
@@ -496,7 +499,7 @@ class Grid {
                 hidden.style.display = 'none';
                 if (col.sortable === true) {
                     hidden.dataset.key = col.key;
-                    hidden.addEventListener('mouseup', e => this.#onHeaderClicked(col, e, true));
+                    hidden.addEventListener('click', e => this.#onHeaderClicked(col, e, true));
                 }
                 header.appendChild(hidden);
                 continue;
@@ -540,7 +543,7 @@ class Grid {
                 th.style.setProperty(css[0], css[1]);
             }
             th.style.cursor = col.sortable ? 'pointer' : 'auto';
-            th.addEventListener('mouseup', e => this.#onHeaderClicked(col, e));
+            th.addEventListener('click', e => this.#onHeaderClicked(col, e));
             th.addEventListener('mousedown', e => this.#onDragStart(col, e));
             const wrapper = document.createElement('div');
             th.appendChild(wrapper);
@@ -617,6 +620,16 @@ class Grid {
         // body content
         const bodyContent = document.createElement('table');
         bodyContent.className = 'grid-body-content';
+        bodyContent.addEventListener('mousedown', e => {
+            let { parent, target } = this.#getRowTarget(e.target);
+            const rowIndex = [...parent.parentElement.children].indexOf(parent);
+            let colIndex = [...parent.children].indexOf(target);
+            if (colIndex >= this.columns.length) {
+                colIndex = -1;
+            }
+            this.#onRowClicked(e, rowIndex, colIndex);
+        });
+        bodyContent.addEventListener('dblclick', e => this.#onRowDblClicked(e));
         bodyContainer.appendChild(bodyContent);
         // this.#adjustRows();
         // events
@@ -632,7 +645,7 @@ class Grid {
             });
             holder.addEventListener('dblclick', e => this.#onRowDblClicked(e));
             bodyContainer.appendChild(holder);
-            body.addEventListener('mousemove', e => throttle(this.#onBodyMouseMove, RefreshInterval, this, e, holder));
+            body.addEventListener('mousemove', e => throttle(this.#onBodyMouseMove, RefreshInterval, this, e, holder), { passive: true });
         }
         this.#refs.body = body;
         this.#refs.bodyContainer = bodyContainer;
@@ -655,8 +668,8 @@ class Grid {
             for (let i = 0; i < count; i += 1) {
                 const row = document.createElement('tr');
                 row.className = 'grid-row';
-                row.addEventListener('mousedown', e => this.#onRowClicked(e, exists + i));
+                // row.addEventListener('mousedown', e => this.#onRowClicked(e, exists + i));
-                row.addEventListener('dblclick', e => this.#onRowDblClicked(e));
+                // row.addEventListener('dblclick', e => this.#onRowDblClicked(e));
                 cols.forEach((col, j) => {
                     const cell = document.createElement('td');
                     if (col.visible !== false) {
@@ -859,19 +872,12 @@ class Grid {
         return top;
     }
 
-    #getColumnIndex(target) {
+    #getRowTarget(target) {
-        if (target == null) {
-            return -1;
-        }
         let parent;
         while ((parent = target.parentElement) != null && !parent.classList.contains('grid-row')) {
             target = parent;
         }
-        if (parent == null) {
+        return { parent, target };
-            return -1;
-        }
-        const index = [...parent.children].indexOf(target);
-        return index >= this.columns.length ? -1 : index;
     }
 
     #onHeaderClicked(col, e, force) {
@@ -937,14 +943,10 @@ class Grid {
     }
 
     #onBodyMouseMove(e, holder) {
-        let target = e.target;
+        if (e.target.classList.contains('grid-hover-holder')) {
-        if (target.classList.contains('grid-hover-holder')) {
             return;
         }
-        let parent;
+        let { parent, target } = this.#getRowTarget(e.target);
-        while ((parent = target.parentElement) != null && !parent.classList.contains('grid-row')) {
-            target = parent;
-        }
         let keyid = target.keyid;
         if (parent == null || keyid == null) {
             delete holder.keyid;
@@ -1050,7 +1052,6 @@ class Grid {
                 this.selectedRowChanged(selectedIndex);
             }
         }
-        colIndex ??= this.#getColumnIndex(e.target);
         this.#selectedColumnIndex = colIndex;
         if ((this.fullrowClick || colIndex >= 0) && e.buttons === 1 && typeof this.cellClicked === 'function') {
             if (this.cellClicked(selectedIndex, colIndex) === false) {
@@ -1069,7 +1070,7 @@ class Grid {
         }
         if (typeof this.cellDblClicked === 'function') {
             const colIndex = this.#selectedColumnIndex;
-            if ((this.fullrowClick || colIndex >= 0) && e.buttons === 1) {
+            if (this.fullrowClick || colIndex >= 0) {
                 this.cellDblClicked(index, colIndex);
             }
         }