Datagrid/TreeList - Sticky Columns: Adaptation the column reordering …

…feature (#28040)

Co-authored-by: Alyar <>

e2e/testcafe-devextreme/tests/dataGrid/stickyColumns/stickyColumnReordering.ts

@@ -0,0 +1,201 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import DataGrid from 'devextreme-testcafe-models/dataGrid';
+import { safeSizeTest } from '../../../helpers/safeSizeTest';
+import { createWidget } from '../../../helpers/createWidget';
+import { getData } from '../helpers/generateDataSourceData';
+import url from '../../../helpers/getPageUrl';
+
+const DATA_GRID_SELECTOR = '#container';
+
+fixture.disablePageReloads`Reorder columns`
+  .page(url(__dirname, '../../container.html'));
+
+safeSizeTest('Move left fixed column to the right', async (t) => {
+  // arrange
+  const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  // act
+  await t.drag(dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(0).element, 400, 0);
+
+  await takeScreenshot('move_left_fixed_column_to_right.png', dataGrid.element);
+
+  // assert
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}, [1000, 800]).before(async () => createWidget('dxDataGrid', {
+  dataSource: getData(5, 25),
+  columnAutoWidth: true,
+  allowColumnReordering: true,
+  columnWidth: 100,
+  customizeColumns: (columns) => {
+    columns[5].fixed = true;
+    columns[5].fixedPosition = 'left';
+    columns[6].fixed = true;
+    columns[6].fixedPosition = 'left';
+    columns[7].fixed = true;
+    columns[7].fixedPosition = 'left';
+  },
+}));
+
+safeSizeTest('Move right fixed column to the left', async (t) => {
+  // arrange
+  const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  // act
+  await t.drag(dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(24).element, -400, 0);
+
+  await takeScreenshot('move_right_fixed_column_to_left.png', dataGrid.element);
+
+  // assert
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}, [1000, 800]).before(async () => createWidget('dxDataGrid', {
+  dataSource: getData(5, 25),
+  columnAutoWidth: true,
+  allowColumnReordering: true,
+  columnWidth: 100,
+  customizeColumns: (columns) => {
+    columns[5].fixed = true;
+    columns[5].fixedPosition = 'right';
+    columns[6].fixed = true;
+    columns[6].fixedPosition = 'right';
+    columns[7].fixed = true;
+    columns[7].fixedPosition = 'right';
+  },
+}));
+
+safeSizeTest('Move fixed column with fixedPosition = \'sticky\' to the right', async (t) => {
+  // arrange
+  const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  // act
+  await t.drag(dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(5).element, 200, 0);
+
+  await takeScreenshot('move_fixed_column_with_sticky_position_to_right.png', dataGrid.element);
+
+  // assert
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}, [1000, 800]).before(async () => createWidget('dxDataGrid', {
+  dataSource: getData(5, 25),
+  columnAutoWidth: true,
+  allowColumnReordering: true,
+  columnWidth: 100,
+  customizeColumns: (columns) => {
+    columns[5].fixed = true;
+    columns[5].fixedPosition = 'left';
+    columns[6].fixed = true;
+    columns[6].fixedPosition = 'left';
+
+    columns[3].fixed = true;
+    columns[3].fixedPosition = 'sticky';
+
+    columns[15].fixed = true;
+    columns[15].fixedPosition = 'right';
+    columns[17].fixed = true;
+    columns[17].fixedPosition = 'right';
+  },
+}));
+
+safeSizeTest('Move left fixed band column to the right', async (t) => {
+  // arrange
+  const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  // act
+  await t.drag(dataGrid.getHeaders().getHeaderRow(1).getHeaderCell(0).element, 500, 0);
+
+  await takeScreenshot('move_left_fixed_band_column_to_right.png', dataGrid.element);
+
+  // assert
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}, [1000, 800]).before(async () => createWidget('dxDataGrid', {
+  dataSource: getData(5, 25),
+  columnAutoWidth: true,
+  allowColumnReordering: true,
+  columnWidth: 100,
+  customizeColumns: (columns) => {
+    columns.push({
+      caption: 'Band column 1',
+      fixed: true,
+      fixedPosition: 'left',
+      columns: ['field_1', 'field_2'],
+    }, {
+      caption: 'Band column 2',
+      fixed: true,
+      fixedPosition: 'left',
+      columns: ['field_3', 'field_4'],
+    });
+  },
+}));
+
+safeSizeTest('Move right fixed band column to the left', async (t) => {
+  // arrange
+  const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  // act
+  await t.drag(dataGrid.getHeaders().getHeaderRow(1).getHeaderCell(3).element, -500, 0);
+
+  await takeScreenshot('move_right_fixed_band_column_to_left.png', dataGrid.element);
+
+  // assert
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}, [1000, 800]).before(async () => createWidget('dxDataGrid', {
+  dataSource: getData(5, 25),
+  columnAutoWidth: true,
+  allowColumnReordering: true,
+  columnWidth: 100,
+  customizeColumns: (columns) => {
+    columns.push({
+      caption: 'Band column 1',
+      fixed: true,
+      fixedPosition: 'right',
+      columns: ['field_1', 'field_2'],
+    }, {
+      caption: 'Band column 2',
+      fixed: true,
+      fixedPosition: 'right',
+      columns: ['field_3', 'field_4'],
+    });
+  },
+}));
+
+safeSizeTest('Move fixed band column with fixedPosition=\'sticky\' to the right', async (t) => {
+  // arrange
+  const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  // act
+  await t.drag(dataGrid.getHeaders().getHeaderRow(1).getHeaderCell(0).element, 400, 0);
+
+  await takeScreenshot('move_fixed_band_column_with_sticky_position_to_right.png', dataGrid.element);
+
+  // assert
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}, [1000, 800]).before(async () => createWidget('dxDataGrid', {
+  dataSource: getData(5, 25),
+  columnAutoWidth: true,
+  allowColumnReordering: true,
+  columnWidth: 100,
+  customizeColumns: (columns) => {
+    columns.splice(3, 0, {
+      caption: 'Band column 1',
+      fixed: true,
+      fixedPosition: 'sticky',
+      columns: ['field_1', 'field_2'],
+    });
+  },
+}));

packages/devextreme/js/__internal/grids/grid_core/column_fixing/m_column_fixing.ts

@@ -909,8 +909,10 @@ const rowsView = (Base: ModuleType<RowsView>) => class RowsViewFixedColumnsExten
   public setRowsOpacity(columnIndex, value) {
     super.setRowsOpacity(columnIndex, value);
 
-    const $rows = this._getRowElements(this._fixedTableElement);
-    this._setRowsOpacityCore($rows, this.getFixedColumns(), columnIndex, value);
+    if (this._isFixedColumns) {
+      const $rows = this._getRowElements(this._fixedTableElement);
+      this._setRowsOpacityCore($rows, this.getFixedColumns(), columnIndex, value);
+    }
   }
 
   public getCellIndex($cell) {
@@ -1040,7 +1042,7 @@ const normalizeColumnIndicesByPoints = function (columns, fixedColumns, pointsBy
 };
 
 const draggingHeader = (Base: ModuleType<DraggingHeaderViewController>) => class DraggingHeaderColumnFixingExtender extends Base {
-  public _generatePointsByColumns(options) {
+  public _generatePointsByColumns(options, needToCheckPrevPoint) {
     const visibleColumns = options.columns;
     const { targetDraggingPanel } = options;
 
@@ -1051,13 +1053,13 @@ const draggingHeader = (Base: ModuleType<DraggingHeaderViewController>) => class
         }
         options.columns = targetDraggingPanel.getFixedColumns(options.rowIndex);
 
-        const pointsByColumns = super._generatePointsByColumns(options);
+        const pointsByColumns = super._generatePointsByColumns(options, needToCheckPrevPoint);
         normalizeColumnIndicesByPoints(visibleColumns, options.columns, pointsByColumns);
         return pointsByColumns;
       }
     }
 
-    return super._generatePointsByColumns(options);
+    return super._generatePointsByColumns(options, needToCheckPrevPoint);
   }
 
   protected _pointCreated(point, columns, location, sourceColumn) {

packages/devextreme/js/__internal/grids/grid_core/columns_controller/m_columns_controller_utils.ts

@@ -14,7 +14,7 @@ import variableWrapper from '@js/core/utils/variable_wrapper';
 import numberLocalization from '@js/localization/number';
 
 import gridCoreUtils from '../m_utils';
-import type { StickyPosition } from '../sticky_columns/const';
+import { StickyPosition } from '../sticky_columns/const';
 import { getColumnFixedPosition } from '../sticky_columns/utils';
 import {
   COLUMN_CHOOSER_LOCATION,
@@ -876,7 +876,7 @@ export const mergeColumns = (that: ColumnsController, columns, commandColumns, n
   return result;
 };
 
-export const isColumnFixed = (that: ColumnsController, column) => (isDefined(column.fixed) || !column.type ? column.fixed : that._isColumnFixing());
+export const isColumnFixed = (that: ColumnsController, column) => (isDefined(column.fixed) || !column.type ? column.fixed && column.fixedPosition !== StickyPosition.Sticky : that._isColumnFixing());
 
 export const convertOwnerBandToColumnReference = (columns) => {
   columns.forEach((column) => {

packages/devextreme/js/__internal/grids/grid_core/columns_resizing_reordering/m_columns_resizing_reordering.ts

@@ -1266,8 +1266,6 @@ export class DraggingHeaderViewController extends modules.ViewController {
 
   private _animationColumnIndex?: number;
 
-  private _columnHeadersView!: ColumnHeadersView;
-
   private _draggingHeaderView!: DraggingHeaderView;
 
   private _rowsView!: RowsView;
@@ -1278,6 +1276,8 @@ export class DraggingHeaderViewController extends modules.ViewController {
 
   private isCustomGroupColumnPosition?: boolean;
 
+  protected _columnHeadersView!: ColumnHeadersView;
+
   public init() {
     super.init();
 
@@ -1314,11 +1314,16 @@ export class DraggingHeaderViewController extends modules.ViewController {
   /**
    * @extended: column_fixing
    */
-  public _generatePointsByColumns(options) {
-    const that = this;
-
+  public _generatePointsByColumns(options, needToCheckPrevPoint = false) {
     this.isCustomGroupColumnPosition = this.checkIsCustomGroupColumnPosition(options);
-    const points = gridCoreUtils.getPointsByColumns(options.columnElements, (point) => that._pointCreated(point, options.columns, options.targetDraggingPanel.getName(), options.sourceColumn), options.isVerticalOrientation, options.startColumnIndex);
+    const points = gridCoreUtils.getPointsByColumns(
+      options.columnElements,
+      (point) => this._pointCreated(point, options.columns, options.targetDraggingPanel.getName(), options.sourceColumn),
+      options.isVerticalOrientation,
+      options.startColumnIndex,
+      needToCheckPrevPoint,
+    );
+
     return points;
   }
 

packages/devextreme/js/__internal/grids/grid_core/sticky_columns/dom.ts

@@ -100,6 +100,29 @@ const isFirstRightFixedCell = (
 ): boolean => $cell.hasClass(addWidgetPrefix(CLASSES.stickyColumnRight))
     && $cell.hasClass(addWidgetPrefix(CLASSES.stickyColumnBorderLeft));
 
+const isFixedCell = (
+  $cell: dxElementWrapper,
+  addWidgetPrefix,
+): boolean => $cell.hasClass(addWidgetPrefix(CLASSES.stickyColumnLeft))
+      || $cell.hasClass(addWidgetPrefix(CLASSES.stickyColumnRight))
+      || $cell.hasClass(addWidgetPrefix(CLASSES.stickyColumn));
+
+const getLeftFixedCells = ($cells: dxElementWrapper, addWidgetPrefix): dxElementWrapper => $cells
+  // @ts-expect-error
+  .filter((_, cell: HTMLElement) => $(cell).hasClass(addWidgetPrefix(CLASSES.stickyColumnLeft)));
+
+const getRightFixedCells = ($cells: dxElementWrapper, addWidgetPrefix): dxElementWrapper => $cells
+  // @ts-expect-error
+  .filter((_, cell: HTMLElement) => $(cell).hasClass(addWidgetPrefix(CLASSES.stickyColumnRight)));
+
+const getNonFixedAndStickyCells = (
+  $cells: dxElementWrapper,
+  addWidgetPrefix,
+): dxElementWrapper => $cells
+  // @ts-expect-error
+  .filter((_, cell: HTMLElement) => $(cell).hasClass(addWidgetPrefix(CLASSES.stickyColumn))
+      || !isFixedCell($(cell), addWidgetPrefix));
+
 const getLastLeftFixedCell = (
   $cells: dxElementWrapper,
   $container: dxElementWrapper,
@@ -211,13 +234,43 @@ const noNeedToCreateResizingPoint = (
   return isOutsideVisibleArea || (!isLastOrFirstPoint && isPointBoundary);
 };
 
+const noNeedToCreateReorderingPoint = (
+  point,
+  $cells: dxElementWrapper,
+  $container: dxElementWrapper,
+  addWidgetPrefix,
+): boolean => {
+  const { item, isLeftBoundary, isRightBoundary }: {
+    item: HTMLElement;
+    isLeftBoundary: boolean | undefined;
+    isRightBoundary: boolean | undefined;
+  } = point;
+  const $item = $(item);
+  const isSplitPoint = isDefined(isLeftBoundary) || isDefined(isRightBoundary);
+  const nonFixedAreaBoundingRect = getNonFixedAreaBoundingRect($cells, $container, addWidgetPrefix);
+
+  if (isStickyCellPinnedToLeft($item, $container, addWidgetPrefix)) {
+    return isSplitPoint && !isLeftBoundary;
+  }
+
+  if (isStickyCellPinnedToRight($item, $container, addWidgetPrefix)) {
+    return isSplitPoint && !isRightBoundary;
+  }
+
+  return point.x < nonFixedAreaBoundingRect.left || point.x > nonFixedAreaBoundingRect.right;
+};
+
 export const GridCoreStickyColumnsDom = {
   addFirstHeaderClass,
   addColumnNoBorderClass,
   addStickyColumnClass,
   addStickyColumnBorderLeftClass,
   addStickyColumnBorderRightClass,
   toggleStickyColumnsClass,
+  getLeftFixedCells,
+  getRightFixedCells,
+  getNonFixedAndStickyCells,
   noNeedToCreateResizingPoint,
   isFixedCellPinnedToRight,
+  noNeedToCreateReorderingPoint,
 };