.

lib/app/communications/customer.js

@@ -13,7 +13,8 @@ class NoteCol extends GridColumn {
         return wrapper;
     }
 
-    static setValue(element, _val, item, _col, grid) {
+    static setValue(element, _val, it, _col, grid) {
+        const item = it.values;
         const name = element.querySelector('.contact-name');
         name.innerText = item.Name;
         if (name.scrollWidth > name.offsetWidth) {

lib/ui/css/grid.scss

@@ -113,6 +113,10 @@
                                 white-space: nowrap;
                                 text-overflow: ellipsis;
                             }
+
+                            >.ui-check-wrapper {
+                                height: 20px;
+                            }
                         }
 
                         >.arrow {

lib/ui/grid/column.d.ts

@@ -37,8 +37,8 @@ export interface GridColumnDefinition {
     iconClassName?: string | ((item: GridItem | any) => string);
     text?: string;
     tooltip?: string | ((item: GridItem | any) => string);
-    onallchecked?: (this: Grid, col: GridColumnDefinition, flag: boolean) => void;
+    onAllChecked?: (this: Grid, col: GridColumnDefinition, flag: boolean) => void;
-    onchanged?: (this: Grid, item: GridItem | any, value: boolean | any) => void;
+    onChanged?: (this: Grid, item: GridItem | any, value: boolean | any, oldValue: any, e?: any) => void;
 }
 
 export class GridColumn {

lib/ui/grid/column.js

@@ -296,7 +296,8 @@ export class GridDateColumn extends GridColumn {
         if (col.dateMax != null) {
             date.max = col.dateMax;
         }
-        date.addEventListener('change', trigger);
+        // date.addEventListener('change', trigger);
+        date.addEventListener('blur', trigger);
         return date;
     }
 
@@ -324,6 +325,9 @@ export class GridDateColumn extends GridColumn {
     }
 
     static formatDate(date) {
+        if (date instanceof Date && !isNaN(date)) {
             return `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`;
         }
+        return '';
+    }
 }

lib/ui/grid/grid.js

@@ -248,9 +248,16 @@ export class Grid {
         this._var.el = null;
         this._var.refs = {};
         this._var.rendering = true;
-        if (!(container instanceof HTMLElement)) {
+        if (container == null) {
             throw new Error('no specified parent.');
         }
+        if (!(container instanceof HTMLElement)) {
+            const ele = container[0];
+            if (!(ele instanceof HTMLElement)) {
+                throw new Error(`parent type not supported. ${JSON.stringify(Object.getPrototypeOf(container))}`);
+            }
+            container = ele;
+        }
         this._var.parent = container;
         const grid = createElement('div', 'ui-grid');
         grid.setAttribute('tabindex', 0);
@@ -353,7 +360,7 @@ export class Grid {
         const count = truncate((height - 1) / (this.rowHeight + 1)) + (RedumCount * 2) + 1;
         if (force || count !== this._var.rowCount) {
             this._var.rowCount = count;
-            this.reload();
+            this.reload(true);
         }
         this._var.bodyClientWidth = body.clientWidth;
     }
@@ -377,7 +384,7 @@ export class Grid {
             this._refreshSource();
             return;
         }
-        let length = this._var.currentSource.length;
+        let length = this._var.currentSource?.length ?? 0;
         if (this.extraRows > 0) {
             length += this.extraRows;
         }
@@ -595,7 +602,8 @@ export class Grid {
         }
         const dragger = createElement('div', 'dragger');
         const draggerCursor = createElement('layer', 'dragger-cursor');
-        header.appendChild(createElement('th', null, dragger, draggerCursor));
+        header.appendChild(
+            createElement('th', null, dragger, draggerCursor, createElement('div')));
 
         sizer.replaceChildren();
         this._var.refs.header = header;
@@ -638,7 +646,7 @@ export class Grid {
     _adjustRows() {
         let count = this._var.rowCount;
         if (isNaN(count) || count < 0 || !this.virtual) {
-            count = this._var.currentSource.length;
+            count = this._var.currentSource?.length ?? 0;
         }
         const cols = this.columns;
         const content = this._var.refs.body;
@@ -1592,7 +1600,7 @@ export class Grid {
         }
     }
 
-    _onRowChanged(_e, index, col, value, cell, blur) {
+    _onRowChanged(e, index, col, value, cell, blur) {
         if (this._var.currentSource == null) {
             return;
         }
@@ -1610,9 +1618,12 @@ export class Grid {
         }
         if (enabled !== false) {
             const val = item[col.key];
+            let oldValue;
             if (val?.Value != null) {
+                oldValue = val.Value;
                 val.Value = value;
             } else {
+                oldValue = val;
                 item[col.key] = value;
             }
             let tip = col.tooltip;
@@ -1631,7 +1642,7 @@ export class Grid {
                 }
             } else {
                 if (typeof col.onChanged === 'function') {
-                    col.onChanged.call(this, item, value);
+                    col.onChanged.call(this, item, value, oldValue, e);
                 }
             }
         }