DataGrid: Fix incorrect display of headers and filter row when there are fixed, banded, and grouped columns (T1276277) (DevExpress#30778)

Co-authored-by: Alyar <>

Author: Alyar666

e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/T1279722_band_sticky_columns-headers_with_filter_row_and_grouped_column_(rtl=false).png

@@ -0,0 +1,52 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import DataGrid from 'devextreme-testcafe-models/dataGrid';
+import { safeSizeTest } from '../../../../helpers/safeSizeTest';
+import { createWidget } from '../../../../helpers/createWidget';
+import url from '../../../../helpers/getPageUrl';
+
+const DATA_GRID_SELECTOR = '#container';
+
+fixture.disablePageReloads`Band sticky columns`
+  .page(url(__dirname, '../../../container.html'));
+
+[false, true].forEach((rtlEnabled) => {
+  // T1279722
+  safeSizeTest(`Headers and filter row should display correctly after scrolling to the max right position when there is a grouped column (rtl=${rtlEnabled})`, async (t) => {
+    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+    const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+
+    await t.expect(dataGrid.isReady()).ok();
+
+    await dataGrid.scrollTo(t, { x: rtlEnabled ? 0 : 10000 });
+    await takeScreenshot(`T1279722_band_sticky_columns-headers_with_filter_row_and_grouped_column_(rtl=${rtlEnabled}).png`, dataGrid.element);
+
+    await t
+      .expect(compareResults.isValid())
+      .ok(compareResults.errorMessages());
+  }, [900, 800]).before(async () => createWidget('dxDataGrid', {
+    dataSource: [
+      {
+        field0: 1, field1: 1, field2: 1, field3: 1, field4: 1, field5: 1, field6: 1, field7: 1,
+      },
+    ],
+    keyExpr: 'field0',
+    width: 500,
+    columnWidth: 100,
+    columns: [{
+      dataField: 'field0',
+      fixed: true,
+      fixedPosition: rtlEnabled ? 'right' : 'left',
+    }, {
+      caption: 'Band',
+      fixed: true,
+      fixedPosition: rtlEnabled ? 'right' : 'left',
+      columns: [{
+        dataField: 'field1',
+        groupIndex: 0,
+      }, 'field2'],
+    }, 'field3', 'field4', 'field5', 'field6', 'field7'],
+    showBorders: true,
+    filterRow: { visible: true },
+    rtlEnabled,
+  }));
+});

e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/T1279722_band_sticky_columns-headers_with_filter_row_and_grouped_column_(rtl=true).png

@@ -613,17 +613,26 @@ export class ColumnsController extends modules.Controller {
       expandColumn = this.columnOption('command:expand');
     }
 
-    expandColumns = map(expandColumns, (column) => extend({}, column, {
-      visibleWidth: null,
-      minWidth: null,
-      cellTemplate: !isDefined(column.groupIndex) ? column.cellTemplate : null,
-      headerCellTemplate: null,
-      fixed: !isDefined(column.groupIndex) || !isFixedFirstGroupColumn ? isColumnFixing : true,
-      fixedPosition: rtlEnabled ? 'right' : 'left',
-    }, expandColumn, {
-      index: column.index,
-      type: column.type || GROUP_COMMAND_COLUMN_NAME,
-    }));
+    expandColumns = map(expandColumns, (column) => extend(
+      {},
+      {
+        ...column,
+        ownerBand: undefined,
+      },
+      {
+        visibleWidth: null,
+        minWidth: null,
+        cellTemplate: !isDefined(column.groupIndex) ? column.cellTemplate : null,
+        headerCellTemplate: null,
+        fixed: !isDefined(column.groupIndex) || !isFixedFirstGroupColumn ? isColumnFixing : true,
+        fixedPosition: rtlEnabled ? 'right' : 'left',
+      },
+      expandColumn,
+      {
+        index: column.index,
+        type: column.type || GROUP_COMMAND_COLUMN_NAME,
+      },
+    ));
 
     return expandColumns;
   }

e2e/testcafe-devextreme/tests/dataGrid/sticky/common/withBandColumns.ts

@@ -991,7 +991,7 @@ export const isFirstOrLastColumn = function (
 ): boolean {
   const targetColumnIndex = targetColumn.index;
   const bandColumnsCache = that.getBandColumnsCache();
-  const parentBandColumns = getParentBandColumns(targetColumnIndex, bandColumnsCache.columnParentByIndex);
+  const parentBandColumns = !isDefined(targetColumn.type) && getParentBandColumns(targetColumnIndex, bandColumnsCache.columnParentByIndex);
 
   if (parentBandColumns?.length) {
     return isFirstOrLastBandColumn(that, parentBandColumns.concat([targetColumn]), onlyWithinBandColumn, isLast, fixedPosition);