T1264497: DataGrid - fix separator height for grouped columns (#28827)

Co-authored-by: CORP\vladimir.bushmanov <vladimir.bushmanov@devexpress.com>

Author: Ambrozy

e2e/testcafe-devextreme/tests/dataGrid/columnResizing.ts

@@ -0,0 +1,69 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import DataGrid from 'devextreme-testcafe-models/dataGrid';
+
+import url from '../../helpers/getPageUrl';
+import { createWidget } from '../../helpers/createWidget';
+
+fixture`Column resizing`
+  .page(url(__dirname, '../container.html'));
+
+test('column separator should starts from the parent', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const dataGrid = new DataGrid('#container');
+  async function makeColumnSeparatorScreenshot(index: number) {
+    await dataGrid.resizeHeader(index, 0, false);
+    await t.expect(await takeScreenshot(`column-separator-${index}.png`)).ok();
+    await t.dispatchEvent(dataGrid.element, 'mouseup');
+  }
+
+  await makeColumnSeparatorScreenshot(1);
+  await makeColumnSeparatorScreenshot(2);
+  await makeColumnSeparatorScreenshot(3);
+  await makeColumnSeparatorScreenshot(4);
+  await makeColumnSeparatorScreenshot(5);
+  await makeColumnSeparatorScreenshot(6);
+  await makeColumnSeparatorScreenshot(7);
+  await makeColumnSeparatorScreenshot(8);
+  await makeColumnSeparatorScreenshot(9);
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxDataGrid', {
+  dataSource: [{
+    ID: 1,
+    Country: 'Brazil',
+    Area: 8515767,
+    Population_Urban: 0.85,
+    Population_Rural: 0.15,
+    Population_Total: 205809000,
+    GDP_Agriculture: 0.054,
+    GDP_Industry: 0.274,
+    GDP_Services: 0.672,
+    GDP_Total: 2353025,
+  }],
+  keyExpr: 'ID',
+  columnWidth: 100,
+  allowColumnResizing: true,
+  showBorders: true,
+  editing: {
+    allowUpdating: true,
+  },
+  columns: ['Country', {
+    dataField: 'Population_Total',
+    visible: false,
+  }, {
+    caption: 'Population',
+    columns: ['Population_Rural', {
+      caption: 'By Sector',
+      columns: ['GDP_Total', {
+        caption: 'not resizable',
+        dataField: 'ID',
+        allowResizing: false,
+      }, 'GDP_Agriculture', 'GDP_Industry'],
+    }],
+  }, {
+    caption: 'Nominal GDP',
+    columns: ['GDP_Total', 'Population_Urban'],
+  }, 'Area'],
+}));

e2e/testcafe-devextreme/tests/dataGrid/etalons/column-separator-1.png

@@ -22,7 +22,7 @@ import {
 import { isDefined, isObject, isString } from '@js/core/utils/type';
 import swatchContainer from '@js/ui/widget/swatch_container';
 import type { EditorFactory } from '@ts/grids/grid_core/editor_factory/m_editor_factory';
-import type { ModuleType } from '@ts/grids/grid_core/m_types';
+import type { ColumnPoint, ModuleType } from '@ts/grids/grid_core/m_types';
 import type { RowsView } from '@ts/grids/grid_core/views/m_rows_view';
 
 import type { ColumnChooserView } from '../column_chooser/m_column_chooser';
@@ -914,27 +914,60 @@ export class ColumnsResizerViewController extends modules.ViewController {
     }
   }
 
+  private _generateColumnsTopYIndex(needToCheckPrevPoint = false) {
+    const that = this;
+    const rowCount = that._columnsController.getRowCount();
+    const topYMap: Record<number, number> = {};
+    const pointCreated = (point: ColumnPoint): boolean => {
+      const x = Math.ceil(point.x);
+
+      if (!topYMap[x]) {
+        topYMap[x] = point.y;
+      }
+
+      return true;
+    };
+
+    for (let rowIndex = 0; rowIndex < rowCount - 1; rowIndex++) {
+      const cells = that._columnHeadersView.getColumnElements(rowIndex);
+
+      if (cells && cells.length > 0) {
+        gridCoreUtils.getPointsByColumns(cells, pointCreated, false, 0, needToCheckPrevPoint);
+      }
+    }
+
+    return topYMap;
+  }
+
   /**
    * @extended: column_fixing
    * @protected
    */
   protected _generatePointsByColumns(needToCheckPrevPoint = false) {
     const that = this;
+    const topYMap = that._generateColumnsTopYIndex(needToCheckPrevPoint);
     const columns = that._columnsController ? that._columnsController.getVisibleColumns() : [];
     const cells = that._columnHeadersView.getColumnElements();
-    let pointsByColumns: any = [];
+    const correctColumnY = (point: ColumnPoint): ColumnPoint => {
+      const x = Math.ceil(point.x);
+
+      if (topYMap[x]) {
+        point.y = topYMap[x];
+      }
+
+      return point;
+    };
 
+    that._pointsByColumns = [];
     if (cells && cells.length > 0) {
-      pointsByColumns = gridCoreUtils.getPointsByColumns(
+      that._pointsByColumns = gridCoreUtils.getPointsByColumns(
         cells,
-        (point) => that._pointCreated(point, cells.length, columns),
+        (point) => that._pointCreated(correctColumnY(point), cells.length, columns),
         false,
         0,
         needToCheckPrevPoint,
       );
     }
-
-    that._pointsByColumns = pointsByColumns;
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars

e2e/testcafe-devextreme/tests/dataGrid/etalons/column-separator-2.png

@@ -16,6 +16,13 @@ export type GridPropertyType<T, TProp extends string> = PropertyType<T, TProp> e
 // Data types
 export type RowKey = unknown;
 
+export interface ColumnPoint {
+  index: number;
+  columnIndex: number;
+  x: number;
+  y: number;
+}
+
 // todo: move to upper .d.ts
 type OptionsMethod<TOptions> =
   (() => TOptions) &

e2e/testcafe-devextreme/tests/dataGrid/etalons/column-separator-3.png

@@ -19,6 +19,7 @@ import { getWindow } from '@js/core/utils/window';
 import formatHelper from '@js/format_helper';
 import LoadPanel from '@js/ui/load_panel';
 import sharedFiltering from '@js/ui/shared/filtering';
+import type { ColumnPoint } from '@ts/grids/grid_core/m_types';
 
 const DATAGRID_SELECTION_DISABLED_CLASS = 'dx-selection-disabled';
 const DATAGRID_GROUP_OPENED_CLASS = 'dx-datagrid-group-opened';
@@ -154,16 +155,14 @@ const equalFilterParameters = function (filter1, filter2) {
   return toComparable(filter1) == toComparable(filter2); // eslint-disable-line eqeqeq
 };
 
-const createPoint = function (options): Record<string, any> {
-  return {
-    index: options.index,
-    columnIndex: options.columnIndex,
-    x: options.x,
-    y: options.y,
-  };
-};
+const createPoint = <T extends ColumnPoint>(options: T): ColumnPoint => ({
+  index: options.index,
+  columnIndex: options.columnIndex,
+  x: options.x,
+  y: options.y,
+});
 
-const addPointIfNeed = function (points, pointProps, pointCreated): void {
+const addPointIfNeed = <T extends ColumnPoint> (points: ColumnPoint[], pointProps: T, pointCreated: (point: T) => boolean): void => {
   let notCreatePoint = false;
 
   if (pointCreated) {
@@ -439,8 +438,8 @@ export default {
     return (!sortParameters1 || !sortParameters1.length) === (!sortParameters2 || !sortParameters2.length);
   },
 
-  getPointsByColumns(items, pointCreated, isVertical?, startColumnIndex = 0, needToCheckPrevPoint = false) {
-    const result: any[] = [];
+  getPointsByColumns<T extends ColumnPoint>(items, pointCreated: (point: T) => boolean, isVertical = false, startColumnIndex = 0, needToCheckPrevPoint = false): ColumnPoint[] {
+    const result: ColumnPoint[] = [];
     const cellsLength: number = items.length;
     let $item;
     let offset: { left: number; top: number } = { left: 0, top: 0 };

e2e/testcafe-devextreme/tests/dataGrid/etalons/column-separator-4.png

@@ -68,6 +68,7 @@ export const CLASS = {
   dialogWrapper: 'dx-dialog-wrapper',
   summaryTotal: 'dx-datagrid-summary-item',
   scrollableContainer: 'dx-scrollable-container',
+  columnsSeparator: 'dx-datagrid-columns-separator',
 };
 
 const E2E_ATTRIBUTES = {
@@ -239,6 +240,10 @@ export default class DataGrid extends Widget {
     return new TextBox(this.element.find(`.${CLASS.searchBox}`));
   }
 
+  getColumnsSeparator(): TextBox {
+    return new TextBox(this.element.find(`.${CLASS.columnsSeparator}`));
+  }
+
   getOverlay(): Overlay {
     return new Overlay(this.element.find(`.${CLASS.overlayWrapper}`));
   }