DataGrid: Fix broken layout after resizing window when there are fixed and band columns (T1193153) (#25880)

Co-authored-by: Alyar <>

Author: Alyar666

packages/devextreme/js/__internal/grids/grid_core/views/m_columns_view.ts

@@ -1119,19 +1119,20 @@ export class ColumnsView extends viewWithColumnStateMixin {
         const $rows = $tableElement.children().children('.dx-row').not(`.${DETAIL_ROW_CLASS}`);
 
         for (let rowIndex = 0; rowIndex < $rows.length; rowIndex++) {
-          const $row = $rows.eq(rowIndex);
-
           const visibleIndex = this.getVisibleColumnIndex(columnIndex, rowIndex);
 
-          const $cell = $row.hasClass(GROUP_ROW_CLASS)
-            ? $row.find(`td[aria-colindex='${visibleIndex + 1}']:not(.${GROUP_CELL_CLASS})`)
-            : $row.find('td').eq(visibleIndex);
+          if (visibleIndex >= 0) {
+            const $row = $rows.eq(rowIndex);
+            const $cell = $row.hasClass(GROUP_ROW_CLASS)
+              ? $row.find(`td[aria-colindex='${visibleIndex + 1}']:not(.${GROUP_CELL_CLASS})`)
+              : $row.find('td').eq(visibleIndex);
 
-          const cell = $cell.get(0) as HTMLElement;
+            if ($cell.length) {
+              const cell = $cell.get(0) as HTMLElement;
 
-          if (cell) {
-            setCellWidth(cell, column, width);
-            cell.style.minWidth = minWidth;
+              setCellWidth(cell, column, width);
+              cell.style.minWidth = minWidth;
+            }
           }
         }
       }

packages/devextreme/testing/testcafe/tests/dataGrid/etalons/T1193153-layout-with-fixed-and-band-columns-1.png

@@ -322,3 +322,41 @@ test.skip('Hovering over a row should work correctly after scrolling when there
 
   await makeRowsViewTemplatesAsync(DATA_GRID_SELECTOR, 100);
 });
+
+// T1193153
+safeSizeTest('The grid layout should be correct after resizing the window when there are fixed and band columns', async (t) => {
+  // arrange
+  const dataGrid = new DataGrid('#container');
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  // assert
+  await t
+    .expect(dataGrid.isReady())
+    .ok();
+
+  // act
+  await takeScreenshot('T1193153-layout-with-fixed-and-band-columns-1.png', dataGrid.element);
+  await t.resizeWindow(400, 400);
+  await takeScreenshot('T1193153-layout-with-fixed-and-band-columns-2.png', dataGrid.element);
+
+  // assert
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}, [800, 800]).before(async () => createWidget('dxDataGrid', {
+  columnAutoWidth: true,
+  dataSource: [{}],
+  columns: [{
+    caption: 'Fixed column',
+    fixed: true,
+    columns: [{
+      caption: 'Banded column',
+      width: 150,
+    }],
+  }, {
+    caption: 'Default column',
+  }, {
+    type: 'buttons',
+    width: 50,
+  }],
+}));

packages/devextreme/testing/testcafe/tests/dataGrid/etalons/T1193153-layout-with-fixed-and-band-columns-2.png

@@ -2803,6 +2803,41 @@ QUnit.module('Headers with band columns', {
             assert.strictEqual($(headerCellElement).attr('rowspan'), undefined);
         });
     });
+
+    // T1193153
+    QUnit.test('setColumnWidths - the command column should have the correct minWidth, width, maxWidth when there are band columns', function(assert) {
+        // arrange
+        const $testElement = $('#container');
+
+        this.columns = [{
+            caption: 'Band column 1',
+            columns: [{
+                caption: 'column 1',
+                width: 150
+            }]
+        }, {
+            caption: 'Default column'
+        }, {
+            type: 'buttons',
+            width: 50,
+            command: 'edit',
+            visible: true,
+            cssClass: 'dx-command-edit',
+        }];
+        this.options.columnAutoWidth = true;
+        this.setupDataGrid();
+        this.columnHeadersView.render($testElement);
+
+        // act
+        this.columnHeadersView.setColumnWidths({ widths: [150, 666, 50] });
+
+        // assert
+        const commandCell = $testElement.find('td').get(2);
+        assert.ok($(commandCell).hasClass('dx-command-edit'), 'command column');
+        assert.strictEqual(commandCell.style.width, '50px', 'width of the command column');
+        assert.strictEqual(commandCell.style.minWidth, '50px', 'minWidth of the command column');
+        assert.strictEqual(commandCell.style.maxWidth, '50px', 'maxWidth of the command column');
+    });
 });
 
 QUnit.module('Multiple sorting', {