cx 26.1.13 → 26.2.0

package/build/widgets/grid/Grid.js

@@ -8,11 +8,11 @@ import { GroupAdapter } from "../../ui/adapter/GroupAdapter";
 import { batchUpdates } from "../../ui/batchUpdates";
 import { ContainerBase } from "../../ui/Container";
 import { Cx } from "../../ui/Cx";
-import { FocusManager, offFocusOut, oneFocusOut, unfocusElement } from "../../ui/FocusManager";
+import { FocusManager, offFocusOut, oneFocusOut, unfocusElement, } from "../../ui/FocusManager";
 import { Format } from "../../ui/Format";
-import { InstanceCache } from "../../ui/Instance";
+import { Instance, InstanceCache } from "../../ui/Instance";
 import { Localization } from "../../ui/Localization";
-import { PureContainer, PureContainerBase } from "../../ui/PureContainer";
+import { PureContainer, PureContainerBase, } from "../../ui/PureContainer";
 import { RenderingContext } from "../../ui/RenderingContext";
 import { ResizeManager } from "../../ui/ResizeManager";
 import { Selection } from "../../ui/selection/Selection";
@@ -43,7 +43,12 @@ import DropDownIcon from "../icons/sort-asc";
 import { captureMouse2, getCursorPos } from "../overlay/captureMouse";
 import { tooltipMouseLeave, tooltipMouseMove } from "../overlay/tooltip-ops";
 import { createGridCellEditor } from "./createGridCellEditor";
-import { GridRow, GridRowComponent } from "./GridRow";
+import { GridRow, GridRowComponent, } from "./GridRow";
+export class GridInstance extends Instance {
+    resetColumnWidths() {
+        this.setState({ colWidth: {} });
+    }
+}
 export class Grid extends ContainerBase {
     constructor(config) {
         super(config);
@@ -90,6 +95,9 @@ export class Grid extends ContainerBase {
             this.focusable = !this.selection.isDummy || this.cellEditable;
         super.init();
     }
+    createInstance(key, parent, parentStore) {
+        return new GridInstance(this, key, parent, parentStore);
+    }
     initState(context, instance) {
         instance.state = {
             colWidth: {},
@@ -153,7 +161,11 @@ export class Grid extends ContainerBase {
                         Console.warn("Merged columns are only supported in grids in which rows have only one line of cells.");
                     else {
                         row.hasMergedCells = true;
-                        row.mergedColumns.push({ uniqueColumnId: c.uniqueColumnId, index, mode: c.mergeCells });
+                        row.mergedColumns.push({
+                            uniqueColumnId: c.uniqueColumnId,
+                            index,
+                            mode: c.mergeCells,
+                        });
                     }
                 }
                 if (c.resizable ||
@@ -162,7 +174,9 @@ export class Grid extends ContainerBase {
                     (c.header2 && c.header2.resizable) ||
                     (c.header3 && c.header3.resizable))
                     row.hasResizableColumns = true;
-                if (c.aggregate && c.aggregateAlias && (c.aggregateField || isDefined(c.aggregateValue))) {
+                if (c.aggregate &&
+                    c.aggregateAlias &&
+                    (c.aggregateField || isDefined(c.aggregateValue))) {
                     aggregates[c.aggregateAlias] = {
                         value: isDefined(c.aggregateValue)
                             ? c.aggregateValue
@@ -185,7 +199,8 @@ export class Grid extends ContainerBase {
             });
         });
         //add default footer if some columns have aggregates and grouping is not defined
-        if (!groupingData && (Object.keys(aggregates).length > 0 || this.fixedFooter || showFooter))
+        if (!groupingData &&
+            (Object.keys(aggregates).length > 0 || this.fixedFooter || showFooter))
             groupingData = [
                 {
                     key: {},
@@ -232,7 +247,9 @@ export class Grid extends ContainerBase {
                 grouping = cached.grouping;
         }
         let groupingChanged = instance.cache("grouping", grouping);
-        if (instance.cache("columnParams", data.columnParams) || groupingChanged || !row) {
+        if (instance.cache("columnParams", data.columnParams) ||
+            groupingChanged ||
+            !row) {
             row = instance.row = this.createRowTemplate(context, data.columnParams, instance, grouping);
         }
         data.version = instance.v++;
@@ -267,7 +284,9 @@ export class Grid extends ContainerBase {
             data.sorters = [sorter];
         }
         let skipDefaultSorting = this.clearableSort && instance.state.disableDefaultSort;
-        if (!skipDefaultSorting && !isNonEmptyArray(data.sorters) && this.defaultSortField) {
+        if (!skipDefaultSorting &&
+            !isNonEmptyArray(data.sorters) &&
+            this.defaultSortField) {
             let sorter = {
                 field: this.defaultSortField,
                 direction: this.defaultSortDirection || "ASC",
@@ -278,7 +297,9 @@ export class Grid extends ContainerBase {
         if (sortField) {
             for (let l = 1; l < 10; l++) {
                 let line = instance.row[`line${l}`];
-                let sortColumn = line && line.columns && line.columns.find((c) => c.field == sortField);
+                let sortColumn = line &&
+                    line.columns &&
+                    line.columns.find((c) => c.field == sortField);
                 if (sortColumn) {
                     data.sorters[0].value = sortColumn.sortValue || sortColumn.value;
                     data.sorters[0].comparer = sortColumn.comparer;
@@ -439,7 +460,9 @@ export class Grid extends ContainerBase {
     }
     render(context, instance, key) {
         let { data, hasFixedColumns } = instance;
-        let fixedHeader = data.scrollable && this.showHeader && this.renderHeader(context, instance, "header", true, false);
+        let fixedHeader = data.scrollable &&
+            this.showHeader &&
+            this.renderHeader(context, instance, "header", true, false);
         let fixedColumnsFixedHeader = data.scrollable &&
             this.showHeader &&
             hasFixedColumns &&
@@ -448,8 +471,11 @@ export class Grid extends ContainerBase {
             this.renderRows(context, instance);
         if (this.fixedFooter)
             this.renderFixedFooter(context, instance);
-        let header = this.showHeader && this.renderHeader(context, instance, "header", false, false);
-        let fixedColumnsHeader = this.showHeader && hasFixedColumns && this.renderHeader(context, instance, "header", false, true);
+        let header = this.showHeader &&
+            this.renderHeader(context, instance, "header", false, false);
+        let fixedColumnsHeader = this.showHeader &&
+            hasFixedColumns &&
+            this.renderHeader(context, instance, "header", false, true);
         return (_jsx(GridComponent, { instance: instance, data: instance.data, shouldUpdate: instance.shouldUpdate, header: header, fixedColumnsHeader: fixedColumnsHeader, fixedColumnsFixedHeader: fixedColumnsFixedHeader, fixedHeader: fixedHeader, fixedFooter: instance.fixedFooterVDOM, fixedColumnsFixedFooter: instance.fixedColumnsFixedFooterVDOM, children: this.renderChildren(context, instance) }, key));
     }
     renderResizer(instance, hdinst, header, colIndex, forPreviousColumn) {
@@ -465,9 +491,10 @@ export class Grid extends ContainerBase {
                 if (e.buttons != 1)
                     return;
                 let resizeOverlayEl = document.createElement("div");
-                let gridEl = e.target.parentElement.parentElement.parentElement.parentElement
-                    .parentElement.parentElement;
-                let uniqueColId = e.currentTarget.dataset.uniqueColId;
+                let gridEl = e.target.parentElement.parentElement
+                    .parentElement.parentElement.parentElement.parentElement;
+                let uniqueColId = e.currentTarget.dataset
+                    .uniqueColId;
                 // if we use fixed columns, rhs resizer of the last fixed column is within regular columns header tbody
                 let headerCell = findFirstChild(gridEl, (el) => el.tagName == "TH" &&
                     el.dataset &&
@@ -476,7 +503,8 @@ export class Grid extends ContainerBase {
                 let initialPosition = getCursorPos(e);
                 resizeOverlayEl.className = CSS.element(baseClass, "resize-overlay");
                 resizeOverlayEl.style.width = `${initialWidth}px`;
-                resizeOverlayEl.style.left = `${headerCell.getBoundingClientRect().left - gridEl.getBoundingClientRect().left}px`;
+                resizeOverlayEl.style.left = `${headerCell.getBoundingClientRect().left -
+                    gridEl.getBoundingClientRect().left}px`;
                 gridEl.appendChild(resizeOverlayEl);
                 captureMouse2(e, {
                     onMouseMove: (e) => {
@@ -570,9 +598,10 @@ export class Grid extends ContainerBase {
                             mods.push("aligned-" + hdwidget.align);
                         if (hdwidget.sortable && header.widget.allowSorting) {
                             mods.push("sortable");
-                            if (data.sorters && data.sorters[0].field == (hdwidget.sortField || hdwidget.field)) {
+                            if (data.sorters &&
+                                data.sorters[0].field == (hdwidget.sortField || hdwidget.field)) {
                                 mods.push("sorted-" + data.sorters[0].direction.toLowerCase());
-                                sortIcon = _jsx(DropDownIcon, { className: CSS.element(baseClass, "column-sort-icon") });
+                                sortIcon = (_jsx(DropDownIcon, { className: CSS.element(baseClass, "column-sort-icon") }));
                             }
                         }
                         let uniqueColumnId = header.data.colSpan > 1 ? null : hdwidget.uniqueColumnId;
@@ -606,7 +635,8 @@ export class Grid extends ContainerBase {
                                 for (let c = 0; c < header.data.colSpan; c++)
                                     skip[`${lineIndex + l + r}-${colIndex + c}`] = true;
                         }
-                        if ((hdwidget.resizable || header.data.resizable) && header.data.colSpan < 2) {
+                        if ((hdwidget.resizable || header.data.resizable) &&
+                            header.data.colSpan < 2) {
                             resizer = this.renderResizer(instance, hdinst, header, colIndex);
                         }
                         if (colIndex > 0) {
@@ -623,7 +653,8 @@ export class Grid extends ContainerBase {
                             }
                         }
                     }
-                    cls = CSS.element(baseClass, "col-header", mods) + (cls ? " " + cls : "");
+                    cls =
+                        CSS.element(baseClass, "col-header", mods) + (cls ? " " + cls : "");
                     let onContextMenu;
                     if (this.onColumnContextMenu)
                         onContextMenu = (e) => instance.invoke("onColumnContextMenu", e, hdinst);
@@ -670,7 +701,7 @@ export class Grid extends ContainerBase {
                     store: store,
                     matchCursorOffset: true,
                     matchWidth: true,
-                    widget: () => _jsx("div", { className: CSS.element(baseClass, "col-header-drag-clone"), children: data.text }),
+                    widget: () => (_jsx("div", { className: CSS.element(baseClass, "col-header-drag-clone"), children: data.text })),
                 },
             }, () => { });
         }
@@ -692,14 +723,20 @@ export class Grid extends ContainerBase {
         let value = column.sortValue || column.value;
         let comparer = column.comparer;
         let sortOptions = column.sortOptions;
-        if (header && header.allowSorting && column.sortable && (field || value || data.sortField)) {
+        if (header &&
+            header.allowSorting &&
+            column.sortable &&
+            (field || value || data.sortField)) {
             let direction = column.primarySortDirection ?? "ASC";
             if (isNonEmptyArray(data.sorters) &&
-                ((!!data.sorters[0].field && data.sorters[0].field == (field || data.sortField)) ||
+                ((!!data.sorters[0].field &&
+                    data.sorters[0].field == (field || data.sortField)) ||
                     (!!value && data.sorters[0].value == value))) {
-                if (data.sorters[0].direction == "ASC" && (!this.clearableSort || direction == "ASC"))
+                if (data.sorters[0].direction == "ASC" &&
+                    (!this.clearableSort || direction == "ASC"))
                     direction = "DESC";
-                else if (data.sorters[0].direction == "DESC" && (!this.clearableSort || direction == "DESC"))
+                else if (data.sorters[0].direction == "DESC" &&
+                    (!this.clearableSort || direction == "DESC"))
                     direction = "ASC";
                 else {
                     direction = null;
@@ -731,7 +768,9 @@ export class Grid extends ContainerBase {
         let data = store.getData();
         if (g.caption) {
             let caption = g.caption(data);
-            return (_jsx("tbody", { className: CSS.element(baseClass, "group-caption", ["level-" + level]), "data-group-key": group.$key, "data-group-element": `group-caption-${level}`, children: _jsx("tr", { children: _jsx("td", { colSpan: 1000, children: caption }) }) }, `g-${level}-${group.$key}`));
+            return (_jsx("tbody", { className: CSS.element(baseClass, "group-caption", [
+                    "level-" + level,
+                ]), "data-group-key": group.$key, "data-group-element": `group-caption-${level}`, children: _jsx("tr", { children: _jsx("td", { colSpan: 1000, children: caption }) }) }, `g-${level}-${group.$key}`));
         }
         else if (g.showCaption) {
             let skip = 0;
@@ -747,7 +786,7 @@ export class Grid extends ContainerBase {
                     let v, c = ci.widget, colSpan, pad, cls = "", style = null;
                     if (c.caption) {
                         if (c.caption.children)
-                            v = _jsx(Cx, { widget: c.caption.children, store: store, parentInstance: instance, subscribe: true });
+                            v = (_jsx(Cx, { widget: c.caption.children, store: store, parentInstance: instance, subscribe: true }));
                         else {
                             v = c.caption.value(data);
                             let fmt = c.caption.format(data);
@@ -769,7 +808,9 @@ export class Grid extends ContainerBase {
                         if (colSpan > 1)
                             skip = colSpan - 1;
                     }
-                    else if (c.aggregate && c.aggregateAliasGetter && c.caption !== false) {
+                    else if (c.aggregate &&
+                        c.aggregateAliasGetter &&
+                        c.caption !== false) {
                         empty = false;
                         v = c.aggregateAliasGetter(group);
                         if (isString(ci.data.format))
@@ -789,7 +830,9 @@ export class Grid extends ContainerBase {
             });
             if (lines.length == 0)
                 return null;
-            return (_jsx("tbody", { className: CSS.element(baseClass, "group-caption", ["level-" + level]), "data-group-key": group.$key, "data-group-element": `group-caption-${level}`, children: lines }, "c" + group.$key));
+            return (_jsx("tbody", { className: CSS.element(baseClass, "group-caption", [
+                    "level-" + level,
+                ]), "data-group-key": group.$key, "data-group-element": `group-caption-${level}`, children: lines }, "c" + group.$key));
         }
     }
     renderGroupFooter(context, instance, g, level, group, i, store, fixed, fixedColumns) {
@@ -827,7 +870,9 @@ export class Grid extends ContainerBase {
                     if (colSpan > 1)
                         skip = colSpan - 1;
                 }
-                else if (c.aggregate && c.aggregateAliasGetter && c.footer !== false) {
+                else if (c.aggregate &&
+                    c.aggregateAliasGetter &&
+                    c.footer !== false) {
                     empty = false;
                     v = c.aggregateAliasGetter(group);
                     if (isString(ci.data.format))
@@ -1002,7 +1047,9 @@ class GridComponent extends VDOM.Component {
         };
     }
     getBufferStartEnd() {
-        return this.syncBuffering ? { start: this.start, end: this.end } : this.state;
+        return this.syncBuffering
+            ? { start: this.start, end: this.end }
+            : this.state;
     }
     renderCellEditor(key, CSS, baseClass, instance, column) {
         //add an inner div with fixed height in order to help IE absolutely position the contents inside
@@ -1024,7 +1071,7 @@ class GridComponent extends VDOM.Component {
         let { widget, isRecordSelectable, visibleColumns, isRecordDraggable, row } = instance;
         let { CSS, baseClass } = widget;
         let { dragSource } = data;
-        let { dragged, cursor, cursorCellIndex, cellEdit, dropInsertionIndex, dropTarget } = this.state;
+        let { dragged, cursor, cursorCellIndex, cellEdit, dropInsertionIndex, dropTarget, } = this.state;
         let { colWidth, dimensionsVersion } = instance.state;
         let { hasMergedCells } = row;
         return (record, index, standalone, fixed) => {
@@ -1050,12 +1097,15 @@ class GridComponent extends VDOM.Component {
             let wrap = (children) => {
                 let skipCells = {};
                 return (_jsx(GridRowComponent, { className: CSS.state(mod), store: store, dragSource: dragSource, instance: row, grid: instance, record: record, parent: this, cursorIndex: index, selected: row?.selected, isBeingDragged: dragged, isDraggedOver: mod.over, cursor: mod.cursor, cursorCellIndex: index == cursor && cursorCellIndex, cellEdit: index == cursor && cursorCellIndex != null && cellEdit, shouldUpdate: row?.shouldUpdate, dimensionsVersion: dimensionsVersion, fixed: fixed, useTrTag: hasMergedCells, children: children.content.map(({ key, data, content }, line) => {
-                        let cells = content.map(({ key, data, content, uniqueColumnId, merged, mergeRowSpan }, cellIndex) => {
+                        let cells = content.map(({ key, data, content, uniqueColumnId, merged, mergeRowSpan, }, cellIndex) => {
                             if (Boolean(data.fixed) !== fixed)
                                 return null;
                             if (merged)
                                 return null;
-                            let cellected = index == cursor && cellIndex == cursorCellIndex && widget.cellEditable && line == 0;
+                            let cellected = index == cursor &&
+                                cellIndex == cursorCellIndex &&
+                                widget.cellEditable &&
+                                line == 0;
                             let className = cellected
                                 ? CSS.expand(data.classNames, CSS.state("cellected"))
                                 : data.classNames;
@@ -1091,7 +1141,11 @@ class GridComponent extends VDOM.Component {
             if (!standalone)
                 return wrap(record.vdom);
             return (_jsx(Cx, { instance: record.row, parentInstance: instance, options: { name: "grid-row" }, contentFactory: (x) => wrap({
-                    content: Array.isArray(x.children) ? x.children : x.children != null ? [x.children] : [],
+                    content: Array.isArray(x.children)
+                        ? x.children
+                        : x.children != null
+                            ? [x.children]
+                            : [],
                     data: {},
                 }), params: {
                     ...mod,
@@ -1109,8 +1163,9 @@ class GridComponent extends VDOM.Component {
         let { CSS, baseClass } = widget;
         let { start, end } = this.getBufferStartEnd();
         let cellWrap = false;
-        if (widget.cellEditable && (widget.hasResizableColumns || hasFixedColumns)) {
-            cellWrap = (children) => _jsx("div", { className: "cxe-grid-cell-clip", children: children });
+        if (widget.cellEditable &&
+            (widget.hasResizableColumns || hasFixedColumns)) {
+            cellWrap = (children) => (_jsx("div", { className: "cxe-grid-cell-clip", children: children }));
         }
         let children = [], fixedChildren = [];
         let renderRow = this.createRowRenderer(cellWrap);
@@ -1177,7 +1232,8 @@ class GridComponent extends VDOM.Component {
                     }
                     else if (record.type == "group-footer") {
                         let g = record.grouping;
-                        if (g.showFooter && (!widget.fixedFooter || start + i != instance.records.length - 1)) {
+                        if (g.showFooter &&
+                            (!widget.fixedFooter || start + i != instance.records.length - 1)) {
                             children.push(widget.renderGroupFooter(null, instance, g, record.level, record.group, record.key + "-footer", record.store, false, false));
                             if (hasFixedColumns)
                                 fixedChildren.push(widget.renderGroupFooter(null, instance, g, record.level, record.group, record.key + "-footer", record.store, false, true));
@@ -1212,12 +1268,15 @@ class GridComponent extends VDOM.Component {
                                         break;
                                     case "same-value":
                                         let prevCellInfo = getCellRenderInfo(prevRow.vdom, mergedCol.index);
-                                        shouldMerge = !stopMerge && cellInfo.data.value === prevCellInfo.data.value;
+                                        shouldMerge =
+                                            !stopMerge &&
+                                                cellInfo.data.value === prevCellInfo.data.value;
                                         break;
                                 }
                                 if (shouldMerge) {
                                     cellInfo.merged = true;
-                                    rowSpan[mergedCol.uniqueColumnId] = (rowSpan[mergedCol.uniqueColumnId] ?? 1) + 1;
+                                    rowSpan[mergedCol.uniqueColumnId] =
+                                        (rowSpan[mergedCol.uniqueColumnId] ?? 1) + 1;
                                 }
                                 else {
                                     if (mergedCol.mode == "same-value")
@@ -1244,7 +1303,8 @@ class GridComponent extends VDOM.Component {
                 }
             });
         }
-        if (this.state.dropTarget == "grid" && this.state.dropInsertionIndex != null) {
+        if (this.state.dropTarget == "grid" &&
+            this.state.dropInsertionIndex != null) {
             let dragInsertionRow = (_jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { className: CSS.element(baseClass, "dropzone"), colSpan: 1000, style: {
                             height: data.dropMode == "insertion" ? 0 : this.state.dropItemHeight,
                         } }) }) }, "dropzone"));
@@ -1277,7 +1337,8 @@ class GridComponent extends VDOM.Component {
                 _jsx("tbody", { className: CSS.element(baseClass, "empty-text"), children: _jsx("tr", { children: _jsx("td", { colSpan: 1000, children: data.emptyText }) }) }, "empty"),
             ];
         }
-        else if (widget.fixedFooter && (widget.buffered || !instance.fixedFooterIsGroupFooter)) {
+        else if (widget.fixedFooter &&
+            (widget.buffered || !instance.fixedFooterIsGroupFooter)) {
             //add fixed footer content for buffered grids
             if (fixedFooter || fixedColumnsFixedFooter) {
                 children.push(fixedFooter);
@@ -1404,12 +1465,14 @@ class GridComponent extends VDOM.Component {
                     let { data } = this.props;
                     if (!isNumber(totalRecordCount)) {
                         totalRecordCount = (startPage - 1) * pageSize + records.length;
-                        if (!lastPage && records.length == (endPage - startPage + 1) * pageSize)
+                        if (!lastPage &&
+                            records.length == (endPage - startPage + 1) * pageSize)
                             totalRecordCount++;
                         if (data.totalRecordCount > totalRecordCount)
                             totalRecordCount = data.totalRecordCount;
                     }
-                    instance.buffer.totalRecordCount = data.totalRecordCount = totalRecordCount;
+                    instance.buffer.totalRecordCount = data.totalRecordCount =
+                        totalRecordCount;
                     instance.buffer.records = data.records = records;
                     instance.buffer.page = data.page = startPage;
                     data.offset = (startPage - 1) * pageSize;
@@ -1460,7 +1523,8 @@ class GridComponent extends VDOM.Component {
         if (widget.buffered && !this.pending) {
             let start = 0;
             if (widget.measureRowHeights && instance.records)
-                start = Math.max(0, this.estimateStart(instance.records, this.dom.scroller.scrollTop) - widget.bufferStep);
+                start = Math.max(0, this.estimateStart(instance.records, this.dom.scroller.scrollTop) -
+                    widget.bufferStep);
             else if (this.rowHeight > 0)
                 start = Math.round(this.dom.scroller.scrollTop / this.rowHeight - widget.bufferStep);
             start = Math.round(start / widget.bufferStep) * widget.bufferStep;
@@ -1569,7 +1633,8 @@ class GridComponent extends VDOM.Component {
         let { widget } = instance;
         let grid = widget.onDropTest && instance.invoke("onDropTest", e, instance);
         let row = widget.onRowDropTest && instance.invoke("onRowDropTest", e, instance);
-        let column = widget.onColumnDropTest && instance.invoke("onColumnDropTest", e, instance);
+        let column = widget.onColumnDropTest &&
+            instance.invoke("onColumnDropTest", e, instance);
         return (grid || row || column) && { grid, row, column };
     }
     onDragEnd(e) {
@@ -1588,7 +1653,10 @@ class GridComponent extends VDOM.Component {
         //columns can be dropped anywhere, while rows only in the scrollable area
         let r = getTopLevelBoundingClientRect(column ? this.dom.el : this.dom.scroller);
         let { clientX, clientY } = e.cursor;
-        if (clientX < r.left || clientX >= r.right || clientY < r.top || clientY >= r.bottom)
+        if (clientX < r.left ||
+            clientX >= r.right ||
+            clientY < r.top ||
+            clientY >= r.bottom)
             return false;
         return {
             over: 1000,
@@ -1616,12 +1684,16 @@ class GridComponent extends VDOM.Component {
         //due to the order of enumeration it's possible that positions are out of order
         positions.sort((a, b) => a - b);
         let index = 0;
-        while (index + 1 < positions.length && ev.cursor.clientX > positions[index + 1])
+        while (index + 1 < positions.length &&
+            ev.cursor.clientX > positions[index + 1])
             index++;
         let { fixedColumnCount } = this.props.instance;
         this.setState({
             colDropInsertionIndex: fixedColumnCount + index,
-            colDropInsertionLeft: positions[index] - positions[0] - this.dom.scroller.scrollLeft + this.dom.scroller.offsetLeft,
+            colDropInsertionLeft: positions[index] -
+                positions[0] -
+                this.dom.scroller.scrollLeft +
+                this.dom.scroller.offsetLeft,
             dropTarget: "column",
         });
     }
@@ -1670,7 +1742,8 @@ class GridComponent extends VDOM.Component {
                     let confirmed = !grid;
                     if (!confirmed) {
                         let insertionZone = (b.bottom - b.top) / 4;
-                        confirmed = cy > b.top + insertionZone && cy < b.bottom - insertionZone;
+                        confirmed =
+                            cy > b.top + insertionZone && cy < b.bottom - insertionZone;
                     }
                     if (confirmed) {
                         rowOverIndex = m;
@@ -1694,9 +1767,11 @@ class GridComponent extends VDOM.Component {
                     index: start + rowOverIndex,
                 },
             };
-            if (widget.onRowDragOver && instance.invoke("onRowDragOver", evt, instance) === false)
+            if (widget.onRowDragOver &&
+                instance.invoke("onRowDragOver", evt, instance) === false)
                 cancel = true;
-            else if (rowOverIndex != this.state.dropInsertionIndex || this.state.dropTarget != "row") {
+            else if (rowOverIndex != this.state.dropInsertionIndex ||
+                this.state.dropTarget != "row") {
                 this.setState({
                     dropInsertionIndex: rowOverIndex,
                     dropNextToTheRowAbove: false,
@@ -1715,9 +1790,11 @@ class GridComponent extends VDOM.Component {
                     totalRecordCount: data.totalRecordCount,
                 },
             };
-            if (widget.onDragOver && instance.invoke("onDragOver", evt, instance) === false)
+            if (widget.onDragOver &&
+                instance.invoke("onDragOver", evt, instance) === false)
                 cancel = true;
-            else if (s != this.state.dropInsertionIndex || this.state.dropTarget != "grid") {
+            else if (s != this.state.dropInsertionIndex ||
+                this.state.dropTarget != "grid") {
                 this.setState({
                     dropInsertionIndex: s,
                     dropNextToTheRowAbove: nextToTheRowAbove,
@@ -1747,7 +1824,7 @@ class GridComponent extends VDOM.Component {
             return this.dom.scroller;
         return findScrollableParent(this.dom.table, true);
     }
-    onGetVScrollParent({ test: { grid, row, column } }) {
+    onGetVScrollParent({ test: { grid, row, column }, }) {
         if (column && !grid && !row)
             return null;
         let { widget } = this.props.instance;
@@ -1796,18 +1873,22 @@ class GridComponent extends VDOM.Component {
                     if (record.grouping.showCaption) {
                         let captionKey = "group-caption-" + record.level;
                         if (`${captionKey}-${record.group.$key}` in this.rowHeights)
-                            totalHeight += this.rowHeights[`${captionKey}-${record.group.$key}`];
+                            totalHeight +=
+                                this.rowHeights[`${captionKey}-${record.group.$key}`];
                         else
-                            totalHeight += this.heightStats.estimate(captionKey) ?? avgDataRowHeight;
+                            totalHeight +=
+                                this.heightStats.estimate(captionKey) ?? avgDataRowHeight;
                     }
                     break;
                 case "group-footer":
                     if (record.grouping.showFooter) {
                         let captionKey = "group-footer-" + record.level;
                         if (`${captionKey}-${record.group.$key}` in this.rowHeights)
-                            totalHeight += this.rowHeights[`${captionKey}-${record.group.$key}`];
+                            totalHeight +=
+                                this.rowHeights[`${captionKey}-${record.group.$key}`];
                         else
-                            totalHeight += this.heightStats.estimate(captionKey) ?? avgDataRowHeight;
+                            totalHeight +=
+                                this.heightStats.estimate(captionKey) ?? avgDataRowHeight;
                     }
                     break;
                 default:
@@ -1851,18 +1932,22 @@ class GridComponent extends VDOM.Component {
             }
         }
         if (widget.scrollable) {
-            this.scrollWidth = this.dom.scroller.offsetWidth - this.dom.scroller.clientWidth;
+            this.scrollWidth =
+                this.dom.scroller.offsetWidth - this.dom.scroller.clientWidth;
             let resized = false, headerHeight = 0, footerHeight = 0, rowHeight = 0;
             if (this.dom.fixedTable)
                 syncHeaderHeights(this.dom.table.firstChild, this.dom.fixedTable.firstChild);
             if (this.dom.fixedHeader) {
-                let fixedHeaderTBody = this.dom.fixedHeader.firstChild.firstChild;
+                let fixedHeaderTBody = this.dom.fixedHeader.firstChild
+                    .firstChild;
                 resized = widget.preciseMeasurements
                     ? copyCellSizePrecise(this.dom.table.firstChild, fixedHeaderTBody)
                     : copyCellSize(this.dom.table.firstChild, fixedHeaderTBody);
-                let scrollColumnEl = fixedHeaderTBody?.firstChild?.lastChild;
+                let scrollColumnEl = fixedHeaderTBody?.firstChild
+                    ?.lastChild;
                 if (scrollColumnEl)
-                    scrollColumnEl.style.minWidth = scrollColumnEl.style.maxWidth = this.scrollWidth + "px";
+                    scrollColumnEl.style.minWidth = scrollColumnEl.style.maxWidth =
+                        this.scrollWidth + "px";
                 this.dom.fixedHeader.style.display = "block";
                 headerHeight = this.dom.fixedHeader.offsetHeight;
                 this.dom.scroller.style.marginTop = `${headerHeight}px`;
@@ -1883,8 +1968,8 @@ class GridComponent extends VDOM.Component {
                 if (this.dom.fixedHeader)
                     this.dom.fixedHeader.style.left = fixedColumnsWidth;
                 this.dom.fixedColumnsFixedHeader.style.display = "block";
-                let fixedHeaderTBody = this.dom.fixedColumnsFixedHeader.firstElementChild
-                    ?.firstElementChild;
+                let fixedHeaderTBody = this.dom.fixedColumnsFixedHeader
+                    .firstElementChild?.firstElementChild;
                 if (this.dom.fixedTable.firstChild) {
                     resized = copyCellSize(this.dom.fixedTable.firstElementChild, fixedHeaderTBody);
                 }
@@ -1897,20 +1982,25 @@ class GridComponent extends VDOM.Component {
                     let dstTableBody = this.dom.fixedColumnsFixedFooter.firstElementChild
                         ?.firstElementChild;
                     if (dstTableBody) {
-                        let srcTableBody = this.dom.fixedTable.lastElementChild;
+                        let srcTableBody = this.dom.fixedTable
+                            .lastElementChild;
                         copyCellSize(srcTableBody, dstTableBody, fixedFooterOverlap);
                         this.dom.fixedColumnsFixedFooter.style.display = "block";
                         footerHeight = this.dom.fixedFooter.offsetHeight;
                     }
                 }
                 if (this.dom.fixedFooter) {
-                    let dstTableBody = this.dom.fixedFooter.firstElementChild?.firstElementChild;
+                    let dstTableBody = this.dom.fixedFooter.firstElementChild
+                        ?.firstElementChild;
                     if (dstTableBody) {
-                        let srcTableBody = this.dom.table.lastElementChild;
+                        let srcTableBody = this.dom.table
+                            .lastElementChild;
                         copyCellSize(srcTableBody, dstTableBody, fixedFooterOverlap);
-                        let scrollColumnEl = dstTableBody.firstElementChild?.firstElementChild;
+                        let scrollColumnEl = dstTableBody.firstElementChild
+                            ?.lastElementChild;
                         if (scrollColumnEl)
-                            scrollColumnEl.style.minWidth = scrollColumnEl.style.maxWidth = this.scrollWidth + "px";
+                            scrollColumnEl.style.minWidth = scrollColumnEl.style.maxWidth =
+                                this.scrollWidth + "px";
                         this.dom.fixedFooter.style.display = "block";
                         footerHeight = this.dom.fixedFooter.offsetHeight;
                     }
@@ -1981,7 +2071,8 @@ class GridComponent extends VDOM.Component {
             }
             if (this.dom.fixedTable) {
                 this.dom.fixedTable.style.marginTop = this.dom.table.style.marginTop;
-                this.dom.fixedTable.style.marginBottom = this.dom.table.style.marginBottom;
+                this.dom.fixedTable.style.marginBottom =
+                    this.dom.table.style.marginBottom;
             }
             this.rowHeight = rowHeight;
             let sortersChanged = widget.infinite && !shallowEquals(data.sorters, this.lastSorters);
@@ -2027,7 +2118,8 @@ class GridComponent extends VDOM.Component {
         if (cellEdit != null && cellEdit != this.state.cellEdit) {
             newState.cellEdit = cellEdit;
             if (cellEdit &&
-                (!visibleColumns[this.state.cursorCellIndex] || !visibleColumns[this.state.cursorCellIndex].editor))
+                (!visibleColumns[this.state.cursorCellIndex] ||
+                    !visibleColumns[this.state.cursorCellIndex].editor))
                 newState.cellEdit = false;
         }
         if (cellIndex != null && cellIndex != this.state.cursorCellIndex) {
@@ -2046,7 +2138,9 @@ class GridComponent extends VDOM.Component {
         }
         batchUpdates(() => {
             if (select) {
-                let start = selectRange && this.state.selectionStart != null && this.state.selectionStart >= 0
+                let start = selectRange &&
+                    this.state.selectionStart != null &&
+                    this.state.selectionStart >= 0
                     ? this.state.selectionStart
                     : index;
                 if (start < 0)
@@ -2096,17 +2190,21 @@ class GridComponent extends VDOM.Component {
                         FocusManager.focus(this.dom.el);
                     if (scrollIntoView) {
                         let record = this.getRecordAt(index);
-                        let item = record && this.dom.table.querySelector(`tbody[data-record-key="${record.key}"]`);
+                        let item = record &&
+                            this.dom.table.querySelector(`tbody[data-record-key="${record.key}"]`);
                         let hscroll = false;
                         if (item) {
                             if (widget.cellEditable)
-                                if (this.state.cursorCellIndex >= this.props.instance.fixedColumnCount) {
+                                if (this.state.cursorCellIndex >=
+                                    this.props.instance.fixedColumnCount) {
                                     hscroll = true;
-                                    item = item.firstChild.children[this.state.cursorCellIndex - this.props.instance.fixedColumnCount];
+                                    item = item.firstChild.children[this.state.cursorCellIndex -
+                                        this.props.instance.fixedColumnCount];
                                 }
                                 else {
                                     let fixedItem = this.dom.fixedTable.querySelector(`tbody[data-record-key="${record.key}"]`);
-                                    let cell = fixedItem && fixedItem.firstChild.children[this.state.cursorCellIndex];
+                                    let cell = fixedItem &&
+                                        fixedItem.firstChild.children[this.state.cursorCellIndex];
                                     if (cell)
                                         scrollElementIntoView(cell, false, true, 10);
                                 }
@@ -2186,7 +2284,8 @@ class GridComponent extends VDOM.Component {
                     record = widget.mapRecord(null, instance, r, cursor - offset);
             }
             if (record && record.type == "data") {
-                if (instance.isRecordSelectable && !instance.isRecordSelectable(record.data, options))
+                if (instance.isRecordSelectable &&
+                    !instance.isRecordSelectable(record.data, options))
                     continue;
                 selection.push(record.data);
                 indexes.push(record.index);
@@ -2228,9 +2327,13 @@ class GridComponent extends VDOM.Component {
         if (widget.onKeyDown && instance.invoke("onKeyDown", e, instance) === false)
             return;
         let recordInstance = this.getRecordInstanceAt(this.state.cursor);
-        if (recordInstance && widget.onRowKeyDown && instance.invoke("onRowKeyDown", e, recordInstance) === false)
+        if (recordInstance &&
+            widget.onRowKeyDown &&
+            instance.invoke("onRowKeyDown", e, recordInstance) === false)
             return;
-        if (widget.onCellKeyDown && widget.cellEditable && this.state.cursorCellIndex != -1) {
+        if (widget.onCellKeyDown &&
+            widget.cellEditable &&
+            this.state.cursorCellIndex != -1) {
             if (instance.invoke("onCellKeyDown", e, instance, {
                 cellIndex: this.state.cursorCellIndex,
                 record: recordInstance,
@@ -2269,7 +2372,8 @@ class GridComponent extends VDOM.Component {
                     e.preventDefault();
                     let direction = e.shiftKey ? -1 : +1;
                     let cursor = this.state.cursor;
-                    let cellIndex = (this.state.cursorCellIndex + direction) % instance.row.line1.columns.length;
+                    let cellIndex = (this.state.cursorCellIndex + direction) %
+                        instance.row.line1.columns.length;
                     if (cellIndex == -1) {
                         cellIndex += instance.row.line1.columns.length;
                         cursor--;
@@ -2330,7 +2434,8 @@ class GridComponent extends VDOM.Component {
                 break;
             case KeyCode.right:
                 if (widget.cellEditable) {
-                    if (this.state.cursorCellIndex + 1 < instance.row.line1.columns.length) {
+                    if (this.state.cursorCellIndex + 1 <
+                        instance.row.line1.columns.length) {
                         this.moveCursor(this.state.cursor, {
                             focused: true,
                             cellIndex: this.state.cursorCellIndex + 1,
@@ -2375,9 +2480,13 @@ class GridComponent extends VDOM.Component {
         let isSelected = widget.selection.getIsSelectedDelegate(store);
         let selected = [];
         let add = (rec, data, index, force) => {
-            if (!data || !(force || isSelected(data, index)) || (isRecordDraggable && !isRecordDraggable(data)))
+            if (!data ||
+                !(force || isSelected(data, index)) ||
+                (isRecordDraggable && !isRecordDraggable(data)))
                 return;
-            let mappedRecord = rec ? { ...rec } : widget.mapRecord(null, instance, data, index);
+            let mappedRecord = rec
+                ? { ...rec }
+                : widget.mapRecord(null, instance, data, index);
             let row = (mappedRecord.row = instance.getDetachedChild(instance.row, "DD:" + mappedRecord.key, mappedRecord.store));
             row.selected = true;
             selected.push(mappedRecord);
@@ -2517,7 +2626,12 @@ class GridColumnHeader extends Widget {
         delete this.class;
         if (this.header)
             this.header1 = this.header;
-        if (this.header1 || this.resizable || this.width || this.defaultWidth || this.sortable || this.draggable) {
+        if (this.header1 ||
+            this.resizable ||
+            this.width ||
+            this.defaultWidth ||
+            this.sortable ||
+            this.draggable) {
             if (!isObject(this.header1))
                 this.header1 = {
                     text: this.header1 || "",