add docs

lib/app/communications/customer.js

@@ -812,7 +812,7 @@ export default class CustomerCommunication {
                                         type: Grid.ColumnTypes.Checkbox,
                                         width: 50,
                                         enabled: item => !item.OptOut && !item.OptOut_BC,
-                                        onchanged: function () {
+                                        onChanged: function () {
                                             if (typeof option.onChanged === 'function') {
                                                 option.onChanged([...This._var.gridContact.source, ...This._var.gridWo.source]);
                                             }

lib/ui.js

@@ -6,7 +6,7 @@ import { createCheckbox, createRadiobox, resolveCheckbox } from "./ui/checkbox";
 import { setTooltip, resolveTooltip } from "./ui/tooltip";
 import { Dropdown } from "./ui/dropdown";
 import { Grid } from "./ui/grid/grid";
-import { GridColumn, GridInputColumn, GridDropdownColumn, GridCheckboxColumn, GridIconColumn, GridTextColumn } from './ui/grid/column';
+import { GridColumn, GridInputColumn, GridDropdownColumn, GridCheckboxColumn, GridIconColumn, GridTextColumn, GridDateColumn } from './ui/grid/column';
 import { Popup, createPopup, showAlert, showConfirm } from "./ui/popup";
 import { createPicture, createAudio, createVideo, createFile } from './ui/media';
 import { validation, convertCssStyle } from './ui/extension';
@@ -34,6 +34,7 @@ export {
   GridCheckboxColumn,
   GridIconColumn,
   GridTextColumn,
+  GridDateColumn,
   // popup
   Popup,
   createPopup,

lib/ui/css/grid.css

@@ -1 +1 @@
-.ui-grid{position:relative;box-sizing:border-box;overflow:auto}.ui-grid{--cell-hover-bg-color: lightyellow;--header-border-color: #adaba9;--header-bg-color: #fafafa;--header-fore-color: #000;--cell-border-color: #f0f0f0;--cell-fore-color: #333;--dark-border-color: #666;--split-border-color: #b3b3b3;--dragger-bg-color: #fff;--dragger-cursor-color: #333;--row-bg-color: #fff;--row-active-bg-color: #fafafa;--row-selected-bg-color: #e6f2fb;--text-disabled-color: gray;--filter-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);--filter-transition: transform .12s ease, opacity .24s ease;--row-height: 36px;--header-line-height: 26px;--text-indent: 8px;--loading-size: 40px;--loading-border-radius: 20px;--arrow-size: 4px;--filter-size: 10px;--split-width: 8px;--dragger-size: 20px;--dragger-opacity: .6;--dragger-cursor-size: 4px;--dragger-cursor-pos: -4px;--dragger-cursor-opacity: .3;--header-padding: 4px 12px 4px 8px;--header-filter-padding: 4px 26px 4px 8px;--spacing-s: 4px;--spacing-cell: 6px 4px 6px 8px;--filter-line-height: 30px;--filter-item-padding: 0 4px}.ui-grid:focus,.ui-grid:focus-visible{outline:none}.ui-grid::-webkit-scrollbar{width:8px;height:8px}.ui-grid::-webkit-scrollbar-thumb{background-color:rgba(168,168,168,.9);border-radius:4px}.ui-grid,.ui-grid input[type=text],.ui-grid textarea{font-size:var(--font-size);font-family:var(--font-family)}.ui-grid>.ui-grid-sizer{position:absolute;white-space:nowrap;font-weight:bold;visibility:hidden}.ui-grid>.ui-grid-wrapper{position:relative}.ui-grid>.ui-grid-wrapper>.ui-grid-table{position:absolute;width:100%;min-width:100%;margin:0;border-collapse:collapse;border-spacing:0;table-layout:fixed}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr{color:var(--header-fore-color);position:sticky;top:0;z-index:2}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th{background-color:var(--header-bg-color);-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:0;margin:0;word-wrap:break-word;white-space:normal;position:relative}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th.sticky{position:sticky;z-index:2}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>div{border-bottom:1px solid var(--header-border-color);line-height:var(--header-line-height);min-height:var(--row-height);display:flex;align-items:center;padding:var(--header-padding);box-sizing:border-box}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>div>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.arrow{width:0;height:0;top:50%;margin-top:calc(0px - var(--arrow-size)/2);right:calc(var(--arrow-size)/2);position:absolute}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.arrow.asc{border-bottom:var(--arrow-size) solid var(--dark-border-color)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.arrow.desc{border-top:var(--arrow-size) solid var(--dark-border-color)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.arrow.asc,.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.arrow.desc{border-left:var(--arrow-size) solid rgba(0,0,0,0);border-right:var(--arrow-size) solid rgba(0,0,0,0)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.filter{width:var(--filter-size);height:var(--filter-size);top:50%;margin-top:calc(0px - var(--filter-size)/2);right:calc(var(--arrow-size)*2 + 4px);position:absolute;display:flex}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.filter>svg{width:100%;height:100%;fill:var(--color);opacity:.2;transition:opacity .12s ease}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.filter>svg:hover{opacity:.8}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.filter.hover>svg{opacity:.8}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.filter.active>svg{opacity:1}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.spliter{position:absolute;height:100%;top:0;right:calc(0px - var(--split-width)/2);width:var(--split-width);cursor:ew-resize;z-index:2}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.spliter::after{content:"";height:100%;width:1px;display:block;margin:0 auto;transition:background-color .12s ease}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.spliter:hover::after{background-color:var(--split-border-color)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.dragger{position:absolute;left:0;top:0;min-width:var(--dragger-size);height:100%;background-color:var(--dragger-bg-color);opacity:var(--dragger-opacity);display:none}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.dragger-cursor{position:absolute;top:0;height:100%;border:1px solid var(--dragger-cursor-color);box-sizing:border-box;margin-left:0;opacity:var(--dragger-cursor-opacity);display:none;transition:left .12s ease}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.dragger-cursor::before{top:-1px;border-top:var(--dragger-cursor-size) solid}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.dragger-cursor::after{bottom:-1px;borLine truncated
+.ui-grid{position:relative;box-sizing:border-box;overflow:auto}.ui-grid{--cell-hover-bg-color: lightyellow;--header-border-color: #adaba9;--header-bg-color: #fafafa;--header-fore-color: #000;--cell-border-color: #f0f0f0;--cell-fore-color: #333;--dark-border-color: #666;--split-border-color: #b3b3b3;--dragger-bg-color: #fff;--dragger-cursor-color: #333;--row-bg-color: #fff;--row-active-bg-color: #fafafa;--row-selected-bg-color: #e6f2fb;--text-disabled-color: gray;--filter-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);--filter-transition: transform .12s ease, opacity .24s ease;--row-height: 36px;--header-line-height: 26px;--text-indent: 8px;--loading-size: 40px;--loading-border-radius: 20px;--arrow-size: 4px;--filter-size: 10px;--split-width: 8px;--dragger-size: 20px;--dragger-opacity: .6;--dragger-cursor-size: 4px;--dragger-cursor-pos: -4px;--dragger-cursor-opacity: .3;--header-padding: 4px 12px 4px 8px;--header-filter-padding: 4px 26px 4px 8px;--spacing-s: 4px;--spacing-cell: 6px 4px 6px 8px;--filter-line-height: 30px;--filter-item-padding: 0 4px}.ui-grid:focus,.ui-grid:focus-visible{outline:none}.ui-grid::-webkit-scrollbar{width:8px;height:8px}.ui-grid::-webkit-scrollbar-thumb{background-color:rgba(168,168,168,.9);border-radius:4px}.ui-grid,.ui-grid input[type=text],.ui-grid textarea{font-size:var(--font-size);font-family:var(--font-family)}.ui-grid>.ui-grid-sizer{position:absolute;white-space:nowrap;font-weight:bold;visibility:hidden}.ui-grid>.ui-grid-wrapper{position:relative}.ui-grid>.ui-grid-wrapper>.ui-grid-table{position:absolute;width:100%;min-width:100%;margin:0;border-collapse:collapse;border-spacing:0;table-layout:fixed}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr{color:var(--header-fore-color);position:sticky;top:0;z-index:2}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th{background-color:var(--header-bg-color);-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:0;margin:0;word-wrap:break-word;white-space:normal;position:relative}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th.sticky{position:sticky;z-index:2}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>div{border-bottom:1px solid var(--header-border-color);line-height:var(--header-line-height);min-height:var(--row-height);display:flex;align-items:center;padding:var(--header-padding);box-sizing:border-box}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>div>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.arrow{width:0;height:0;top:50%;margin-top:calc(0px - var(--arrow-size)/2);right:calc(var(--arrow-size)/2);position:absolute}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.arrow.asc{border-bottom:var(--arrow-size) solid var(--dark-border-color)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.arrow.desc{border-top:var(--arrow-size) solid var(--dark-border-color)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.arrow.asc,.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.arrow.desc{border-left:var(--arrow-size) solid rgba(0,0,0,0);border-right:var(--arrow-size) solid rgba(0,0,0,0)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.filter{width:var(--filter-size);height:var(--filter-size);top:50%;margin-top:calc(0px - var(--filter-size)/2);right:calc(var(--arrow-size)*2 + 4px);position:absolute;display:flex}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.filter>svg{width:100%;height:100%;fill:var(--color);opacity:.2;transition:opacity .12s ease}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.filter>svg:hover{opacity:.8}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.filter.hover>svg{opacity:.8}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.filter.active>svg{opacity:1}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.spliter{position:absolute;height:100%;top:0;right:calc(0px - var(--split-width)/2);width:var(--split-width);cursor:ew-resize;z-index:2}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.spliter::after{content:"";height:100%;width:1px;display:block;margin:0 auto;transition:background-color .12s ease}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.spliter:hover::after{background-color:var(--split-border-color)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.dragger{position:absolute;left:0;top:0;min-width:var(--dragger-size);height:100%;background-color:var(--dragger-bg-color);opacity:var(--dragger-opacity);display:none}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.dragger-cursor{position:absolute;top:0;height:100%;border:1px solid var(--dragger-cursor-color);box-sizing:border-box;margin-left:0;opacity:var(--dragger-cursor-opacity);display:none;transition:left .12s ease}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.dragger-cursor::before{top:-1px;border-top:var(--dragger-cursor-size) solid}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.dragger-cursor::after{bottom:-1px;borLine truncated

lib/ui/css/grid.scss

@@ -340,6 +340,19 @@
                             }
                         }
 
+                        .ui-grid-date-cell {
+                            line-height: 22px;
+                            box-sizing: border-box;
+                            padding: var(--spacing-cell);
+                            border: none;
+                            font-size: var(--font-size);
+                            width: 100%;
+
+                            &:invalid {
+                                color: rgba(0, 0, 0, .3);
+                            }
+                        }
+
                         .col-icon {
                             display: flex;
                             cursor: pointer;
@@ -391,7 +404,7 @@
                 opacity: 1;
             }
         }
-}
+    }
 
     >.ui-grid-loading {
         position: absolute;

lib/ui/grid/column.d.ts

@@ -1,4 +1,4 @@
-import { Grid, GridItem, GridSourceItem } from "./grid";
+import { Grid, GridItem, GridItemWrapper, GridSourceItem } from "./grid";
 import { DropdownOptions } from "../dropdown";
 
 interface GridColumnType {
@@ -14,12 +14,12 @@ export interface GridColumnDefinition {
     key?: string;
     type?: keyof GridColumnType | typeof GridColumn;
     caption?: string;
+    captionStyle?: { [key: string]: string };
     width?: Number;
     align?: "left" | "center" | "right";
     enabled?: boolean | string | ((item: GridItem | any) => boolean);
     css?: { [key: string]: string };
     styleFilter?: (item: GridItem | any) => { [key: string]: string };
-    textStyle?: { [key: string]: string };
     visible?: boolean;
     resizable?: boolean;
     sortable?: boolean;
@@ -32,22 +32,22 @@ export interface GridColumnDefinition {
     sortFilter?: (a: GridItem | any, b: GridItem | any) => -1 | 0 | 1;
     bgFilter?: (item: GridItem | any) => string;
     dropOptions?: DropdownOptions;
-    source?: Array<any> | ((item: GridItem | any) => Array<any> | Promise<Array<GridSourceItem>>);
+    source?: Array<GridSourceItem | any> | ((item: GridItem | any) => Array<GridSourceItem | any> | Promise<Array<GridSourceItem | any>>);
     iconType?: string;
-    className?: string | ((item: GridItem | any) => string);
+    iconClassName?: string | ((item: GridItem | any) => string);
     text?: string;
-    tooltip?: string;
+    tooltip?: string | ((item: GridItem | any) => string);
     onallchecked?: (this: Grid, col: GridColumnDefinition, flag: boolean) => void;
     onchanged?: (this: Grid, item: GridItem | any, value: boolean | any) => void;
 }
 
 export class GridColumn {
-    create(): HTMLElement;
-    createEdit(trigger: (e: any) => void, col: GridColumnDefinition, body: HTMLElement): HTMLElement;
-    setValue(element: HTMLElement, val: any, item: GridItem | any, col: GridColumnDefinition): void;
-    getValue(e: any): any;
-    setStyle(element: HTMLElement, style: { [key: string]: string }): void;
-    setEnabled(element: HTMLElement, enabled?: boolean): void;
+    static create(col: GridColumnDefinition): HTMLElement;
+    static createEdit(trigger: (e: any) => void, col: GridColumnDefinition, container: HTMLElement, vals: GridItemWrapper): HTMLElement;
+    static setValue(element: HTMLElement, val: any, vals: GridItemWrapper, col: GridColumnDefinition, grid: Grid): void;
+    static getValue(e: any, col: GridColumnDefinition): any;
+    static setStyle(element: HTMLElement, style: { [key: string]: string }): void;
+    static setEnabled(element: HTMLElement, enabled?: boolean): void;
 }
 
 export class GridInputColumn extends GridColumn { }
@@ -58,4 +58,6 @@ export class GridDropdownColumn extends GridColumn { }
 
 export class GridCheckboxColumn extends GridColumn { }
 
-export class GridIconColumn extends GridColumn { }
+export class GridIconColumn extends GridColumn { }
+
+export class GridDateColumn extends GridColumn { }

lib/ui/grid/column.js

@@ -29,6 +29,8 @@ export class GridColumn {
             tooltip.style.display = enabled === false ? 'none' : '';
         }
     }
+
+    static toString() { return '[object Column]' }
 }
 
 export class GridInputColumn extends GridColumn {
@@ -109,8 +111,8 @@ export class GridDropdownColumn extends GridColumn {
             wrapper
         });
         drop.onselected = trigger;
-        if (typeof col.dropExpanded === 'function') {
-            drop.onexpanded = col.dropExpanded.bind(col, it.values, drop);
+        if (typeof col.onDropExpanded === 'function') {
+            drop.onexpanded = col.onDropExpanded.bind(col, it.values, drop);
         }
         return drop.create();
     }
@@ -225,7 +227,7 @@ export class GridIconColumn extends GridColumn {
     static create() { return createElement('span', 'col-icon') }
 
     static setValue(element, val, item, col, _grid) {
-        let className = col.className;
+        let className = col.iconClassName;
         if (typeof className === 'function') {
             className = className.call(col, item.values);
         }
@@ -257,4 +259,47 @@ export class GridIconColumn extends GridColumn {
             element.classList.remove('disabled');
         }
     }
+}
+
+export class GridDateColumn extends GridColumn {
+    static createEdit(trigger, col) {
+        const date = createElement('input', 'ui-grid-date-cell');
+        date.required = true;
+        date.type = 'date';
+        if (col.dateMin != null) {
+            date.min = col.dateMin;
+        }
+        if (col.dateMax != null) {
+            date.max = col.dateMax;
+        }
+        date.addEventListener('change', trigger);
+        return date;
+    }
+
+    static setValue(element, val) {
+        if (element.tagName === 'INPUT') {
+            if (isNaN(val) || /^\d{4}-\d{2}-\d{2}$/.test(val)) {
+                element.value = val;
+            } else {
+                val = new Date((val - 621355968e9) / 10000);
+                const month = String(val.getMonth() + 1).padStart(2, '0');
+                const date = String(val.getDate()).padStart(2, '0');
+                element.value = `${val.getFullYear()}-${month}-${date}`;
+            }
+        } else {
+            element.innerText = val;
+        }
+    }
+
+    static getValue(e) {
+        return e.target?.value;
+    }
+
+    static setEnabled(element, enabled) {
+        element.disabled = enabled === false;
+    }
+
+    static formatDate(date) {
+        return `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`;
+    }
 }

lib/ui/grid/grid.d.ts

@@ -1,8 +1,13 @@
 import { GridColumnDefinition } from "./column"
 
 export interface GridItem {
-    value: any;
-    displayValue: string;
+    Value: any;
+    DisplayValue: string;
+}
+
+export interface GridItemWrapper {
+    values: Array<GridItem | any>;
+    source: { [key: string]: Array<GridSourceItem> };
 }
 
 export interface GridSourceItem {

lib/ui/grid/grid.js

@@ -7,7 +7,7 @@ import { createIcon } from "../icon";
 import { createCheckbox } from "../checkbox";
 import { setTooltip } from "../tooltip";
 import { convertCssStyle } from "../extension";
-import { GridColumn, GridInputColumn, GridTextColumn, GridDropdownColumn, GridCheckboxColumn, GridIconColumn } from "./column";
+import { GridColumn, GridInputColumn, GridTextColumn, GridDropdownColumn, GridCheckboxColumn, GridIconColumn, GridDateColumn } from "./column";
 
 const ColumnChangedType = {
     Reorder: 'reorder',
@@ -49,7 +49,8 @@ const ColumnTypes = {
     2: GridDropdownColumn,
     3: GridCheckboxColumn,
     4: GridIconColumn,
-    5: GridTextColumn
+    5: GridTextColumn,
+    6: GridDateColumn
 };
 
 let r = lang;
@@ -92,7 +93,7 @@ export class Grid {
     readonly;
     multiSelect = false;
     fullrowClick = true;
-    holderDisabled = false;
+    tooltipDisabled = false;
     headerVisible = true;
     window = global;
     sortIndex = -1;
@@ -112,6 +113,7 @@ export class Grid {
         Checkbox: 3,
         Icon: 4,
         Text: 5,
+        Date: 6,
         isCheckbox(type) { return type === 3 }
     };
 
@@ -293,8 +295,8 @@ export class Grid {
         this._createHeader(table);
         const body = this._createBody(table);
         wrapper.appendChild(table);
-        // holder
-        if (!this.holderDisabled) {
+        // tooltip
+        if (!this.tooltipDisabled) {
             const holder = createElement('div', 'ui-grid-hover-holder');
             holder.addEventListener('mousedown', e => {
                 const holder = e.currentTarget;
@@ -543,8 +545,8 @@ export class Grid {
                 wrapper.appendChild(check);
             }
             const caption = createElement('span');
-            if (col.textStyle != null) {
-                caption.style.cssText = convertCssStyle(col.textStyle);
+            if (col.captionStyle != null) {
+                caption.style.cssText = convertCssStyle(col.captionStyle);
             }
             caption.innerText = col.caption ?? '';
             wrapper.appendChild(caption);
@@ -658,7 +660,7 @@ export class Grid {
                                 type ??= GridColumn;
                                 this._var.colTypes[col.key] = type;
                             }
-                            cell.appendChild(type.create(col, e => this._onRowChanged(e, this._var.startIndex + i, col, type.getValue(e, col), cell), this._var.el));
+                            cell.appendChild(type.create(col));
                         }
                     } else {
                         cell.style.display = 'none';
@@ -848,11 +850,11 @@ export class Grid {
         }
     }
 
-    _changingColumnOrder(index, offset, x, offsetLeft) {
+    _changingColumnOrder(index, offset, x, offsetLeft, scrollLeft) {
         const children = this._var.refs.header.children;
         let element = children[index];
         this._var.refs.dragger.style.cssText = `left: ${element.offsetLeft - offsetLeft + offset}px; width: ${element.style.width}; display: block`;
-        offset = x - element.offsetLeft; // getOffsetLeftFromWindow(element);
+        offset = x + scrollLeft - element.offsetLeft; // getOffsetLeftFromWindow(element);
         let idx;
         if (offset < 0) {
             offset = -offset;
@@ -1035,7 +1037,7 @@ export class Grid {
             } else {
                 this.sortIndex = index;
             }
-            this.sortColumn(true);
+            this.sortColumn();
             if (typeof this.columnChanged === 'function') {
                 this.columnChanged(ColumnChangedType.Sort, index, this.sortDirection);
             }
@@ -1289,6 +1291,7 @@ export class Grid {
         }
         attr.dragging = true;
         const offsetLeft = this._var.refs.header.querySelector('th:last-child').offsetLeft;
+        const scrollLeft = this._var.el.scrollLeft;
         const dragmove = e => {
             const cx2 = getClientX(e);
             const offset = cx2 - cx;
@@ -1300,7 +1303,7 @@ export class Grid {
                 dragging = true;
             }
             if (dragging) {
-                this._changingColumnOrder(index, offset, cx2, offsetLeft);
+                this._changingColumnOrder(index, offset, cx2, offsetLeft, scrollLeft);
                 attr.offset = offset;
             }
         };
@@ -1401,8 +1404,8 @@ export class Grid {
         const key = col.key;
         const isFunction = typeof col.enabled === 'function';
         const isString = typeof col.enabled === 'string';
-        if (typeof col.onallchecked === 'function') {
-            col.onallchecked.call(this, col, flag);
+        if (typeof col.onAllChecked === 'function') {
+            col.onAllChecked.call(this, col, flag);
         } else {
             for (let row of this._var.currentSource) {
                 const item = row.values;
@@ -1413,8 +1416,8 @@ export class Grid {
                 if (enabled !== false) {
                     item[key] = flag;
                     row.__changed = true;
-                    if (typeof col.onchanged === 'function') {
-                        col.onchanged.call(this, item, flag);
+                    if (typeof col.onChanged === 'function') {
+                        col.onChanged.call(this, item, flag);
                     }
                 }
             }
@@ -1426,8 +1429,8 @@ export class Grid {
         if (this._var.colAttrs.__filtering != null) {
             this._onCloseFilter();
         }
-        if (this.onscrollbody === 'function') {
-            this.onscrollbody(e);
+        if (this.bodyScrolled === 'function') {
+            this.bodyScrolled(e);
         }
         if (!this.virtual) {
             return;
@@ -1604,12 +1607,12 @@ export class Grid {
             }
             row.__changed = true;
             if (blur) {
-                if (typeof col.oneditend === 'function') {
-                    col.oneditend.call(this, item, value);
+                if (typeof col.onInputEnded === 'function') {
+                    col.onInputEnded.call(this, item, value);
                 }
             } else {
-                if (typeof col.onchanged === 'function') {
-                    col.onchanged.call(this, item, value);
+                if (typeof col.onChanged === 'function') {
+                    col.onChanged.call(this, item, value);
                 }
             }
         }