DataGrid - Column reordering doesn't work when there are many columns and columnRenderingMode is 'virtual' (T1304328, T1305380) (DevExpress#31093)

Author: pomahtri

e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/status.ts

@@ -75,8 +75,6 @@ test('Accessibility: DataGrid general status should contains correct text after
   const dataGrid = new DataGrid('#container');
   const filterEditor = dataGrid.getFilterEditor(0, FilterTextBox);
 
-  // await t.debug();
-
   const applyFilterBtn = dataGrid.getHeaderPanel().getApplyFilterButton();
   await t.typeText(filterEditor.input(), 'A')
     .click(applyFilterBtn);

e2e/testcafe-devextreme/tests/dataGrid/common/etalons/data-grid__virtual-columns__column-chooser.png

@@ -296,6 +296,96 @@ test('Columns should be rendered correctly after reinit of columns controller',
   },
 }));
 
+test('Columns reordering should work with virtual columns', async (t) => {
+  const dataGrid = new DataGrid('#container');
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  await dataGrid.scrollTo(t, { x: 100000 });
+
+  await t.drag(
+    dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(499).element,
+    -110,
+    0,
+  );
+
+  await t
+    .expect(await takeScreenshot('data-grid__virtual-columns__reoder.png', dataGrid.element))
+    .ok()
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxDataGrid', {
+  allowColumnReordering: true,
+  height: 440,
+  dataSource: generateData(150, 500),
+  columns: generateColumns(500),
+  columnWidth: 100,
+  scrolling: {
+    columnRenderingMode: 'virtual',
+  },
+}));
+
+test('Grouping should work with virtual columns', async (t) => {
+  const dataGrid = new DataGrid('#container');
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  await dataGrid.scrollTo(t, { x: 100000 });
+
+  await t.dragToElement(
+    dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(499).element,
+    dataGrid.getGroupPanel().element,
+  );
+
+  await t
+    .expect(await takeScreenshot('data-grid__virtual-columns__grouping.png', dataGrid.element))
+    .ok()
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxDataGrid', {
+  height: 440,
+  groupPanel: {
+    visible: true,
+  },
+  dataSource: generateData(150, 500),
+  columns: generateColumns(500),
+  columnWidth: 100,
+  scrolling: {
+    columnRenderingMode: 'virtual',
+  },
+}));
+
+test('Column chooser should work with virtual columns', async (t) => {
+  const dataGrid = new DataGrid('#container');
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  await dataGrid.scrollTo(t, { x: 100000 });
+
+  await t.click(dataGrid.getColumnChooserButton());
+  await t.expect(
+    dataGrid.getColumnChooser().isOpened,
+  ).ok();
+
+  await t.dragToElement(
+    dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(499).element,
+    dataGrid.getColumnChooser().content,
+  );
+  await t
+    .expect(await takeScreenshot('data-grid__virtual-columns__column-chooser.png', dataGrid.element))
+    .ok()
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxDataGrid', {
+  height: 440,
+  columnChooser: {
+    enabled: true,
+  },
+  dataSource: generateData(150, 500),
+  columns: generateColumns(500),
+  columnWidth: 100,
+  scrolling: {
+    columnRenderingMode: 'virtual',
+  },
+}));
+
 test('Group row should have right colspan with summary, virtual columns and fixed columns (T1221369)', async (t) => {
   const grid = new DataGrid('#container');
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);

e2e/testcafe-devextreme/tests/dataGrid/common/etalons/data-grid__virtual-columns__grouping.png

@@ -60,6 +60,11 @@ const allowReordering = function (that) {
   return that.option('allowColumnReordering') || that.getController('columns').isColumnOptionUsed('allowReordering');
 };
 
+type ColumnIndex = number | {
+  rowIndex: number;
+  columnIndex: number;
+};
+
 export class TrackerView extends modules.View {
   private _positionChanged: any;
 
@@ -1513,7 +1518,12 @@ export class DraggingHeaderViewController extends modules.ViewController {
   }
 
   private allowDrop(parameters) {
-    return this._columnsController.allowMoveColumn(parameters.sourceColumnIndex, parameters.targetColumnIndex, parameters.sourceLocation, parameters.targetLocation);
+    return this._columnsController.allowMoveColumn(
+      this.addColumnIndexOffset(parameters.sourceColumnIndex),
+      this.addColumnIndexOffset(parameters.targetColumnIndex),
+      parameters.sourceLocation,
+      parameters.targetLocation,
+    );
   }
 
   public drag(parameters) {
@@ -1570,6 +1580,19 @@ export class DraggingHeaderViewController extends modules.ViewController {
     }
   }
 
+  private addColumnIndexOffset(columnIndex: ColumnIndex): ColumnIndex {
+    const offset = this._columnsController.getColumnIndexOffset();
+
+    if (isObject(columnIndex)) {
+      return {
+        ...columnIndex,
+        columnIndex: columnIndex.columnIndex + offset,
+      };
+    }
+
+    return columnIndex + offset;
+  }
+
   private drop(parameters) {
     const { sourceColumnElement } = parameters;
 
@@ -1586,7 +1609,12 @@ export class DraggingHeaderViewController extends modules.ViewController {
         separator.hide();
       }
 
-      this._columnsController.moveColumn(parameters.sourceColumnIndex, parameters.targetColumnIndex, parameters.sourceLocation, parameters.targetLocation);
+      this._columnsController.moveColumn(
+        this.addColumnIndexOffset(parameters.sourceColumnIndex),
+        this.addColumnIndexOffset(parameters.targetColumnIndex),
+        parameters.sourceLocation,
+        parameters.targetLocation,
+      );
     }
   }
 }

e2e/testcafe-devextreme/tests/dataGrid/common/etalons/data-grid__virtual-columns__reoder.png

@@ -3,13 +3,13 @@ import { GroupPanelItem } from './groupPanelItem';
 const ITEM_SELECTOR = '.dx-group-panel-item';
 
 export class GroupPanel {
-  constructor(private readonly selector: Selector) {}
+  constructor(public readonly element: Selector) {}
 
   getHeader(i: number): GroupPanelItem {
-    return new GroupPanelItem(this.selector.find(ITEM_SELECTOR).nth(i));
+    return new GroupPanelItem(this.element.find(ITEM_SELECTOR).nth(i));
   }
 
   getHeadersCount(): Promise<number> {
-    return this.selector.find(ITEM_SELECTOR).count;
+    return this.element.find(ITEM_SELECTOR).count;
   }
 }