DataGrid: Fix duplicate headers when headerCellTemplate is given (T11…

…55453) (#24531)

Co-authored-by: Alyar <>

js/ui/grid_core/ui.grid_core.column_fixing.js

@@ -243,6 +243,10 @@ const baseFixedColumns = {
         return $cell;
     },
 
+    _getContent: function(isFixedTableRendering) {
+        return isFixedTableRendering ? this._fixedTableElement?.parent() : this.callBase.apply(this, arguments);
+    },
+
     _wrapTableInScrollContainer: function($table, isFixedTableRendering) {
         const $scrollContainer = this.callBase.apply(this, arguments);
 

js/ui/grid_core/ui.grid_core.columns_view.js

@@ -891,6 +891,18 @@ const columnsViewMembers = {
         }
     },
 
+    _getContent: function() {
+        return this._tableElement?.parent();
+    },
+
+    _removeContent: function(isFixedTableRendering) {
+        const $scrollContainer = this._getContent(isFixedTableRendering);
+
+        if($scrollContainer?.length) {
+            $scrollContainer.remove();
+        }
+    },
+
     _wrapTableInScrollContainer: function($table) {
         const $scrollContainer = $('<div>');
         const useNative = this.option('scrolling.useNative');
@@ -949,6 +961,7 @@ const columnsViewMembers = {
 
     _updateContent: function($newTableElement, change, isFixedTableRendering) {
         return this.waitAsyncTemplates().done(() => {
+            this._removeContent(isFixedTableRendering);
             this.setTableElement($newTableElement, isFixedTableRendering);
             this._wrapTableInScrollContainer($newTableElement, isFixedTableRendering);
         });

testing/testcafe/model/dataGrid/index.ts

@@ -1,4 +1,5 @@
 import { ClientFunction, Selector } from 'testcafe';
+import DataGridInstance from '../../../../js/ui/data_grid';
 import Widget from '../internal/widget';
 import DataRow from './data/row';
 import GroupRow from './groupRow';
@@ -458,6 +459,19 @@ export default class DataGrid extends Widget {
     )();
   }
 
+  apiCollapseAllGroups(): Promise<void> {
+    const { getInstance } = this;
+
+    return ClientFunction(
+      () => (getInstance() as DataGridInstance).option('grouping.autoExpandAll', false),
+      {
+        dependencies: {
+          getInstance,
+        },
+      },
+    )();
+  }
+
   moveRow(rowIndex: number, x: number, y: number, isStart = false): Promise<void> {
     const { getInstance } = this;
 

testing/testcafe/tests/dataGrid/grouping/grouping.ts

@@ -2,10 +2,13 @@ import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import url from '../../../helpers/getPageUrl';
 import createWidget from '../../../helpers/createWidget';
 import DataGrid from '../../../model/dataGrid';
+import { makeColumnHeadersViewTemplatesAsync } from '../helpers/asyncTemplates';
 
 fixture.disablePageReloads`Grouping Panel`
   .page(url(__dirname, '../../container.html'));
 
+const DATA_GRID_SELECTOR = '#container';
+
 test('Grouping Panel label should not overflow in a narrow grid (T1103925)', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
@@ -77,3 +80,143 @@ test('Content should be rendered correctly after setting the grouping.autoExpand
     autoExpandAll: false,
   },
 }));
+
+// T1112573
+test('Content should be rendered correctly after setting the grouping.autoExpandAll property to true when dataRowTemplate is given', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const dataGrid = new DataGrid('#container');
+
+  await dataGrid.apiExpandAllGroups();
+
+  await t
+    .wait(100)
+    .expect(await takeScreenshot('expanded-groups-content', dataGrid.element))
+    .ok()
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxDataGrid', {
+  dataSource: [
+    {
+      field1: '1', field2: 'test1',
+    },
+    {
+      field1: '2', field2: 'test1',
+    },
+    {
+      field1: '3', field2: 'test2',
+    },
+  ],
+  width: 700,
+  columns: [
+    'field1',
+    { dataField: 'field2', groupIndex: 0 },
+  ],
+  dataRowTemplate(container, { data }) {
+    return $(container).append($(`<tr><td>${data.field1}</td></tr>`));
+  },
+  groupPanel: {
+    visible: true,
+  },
+  grouping: {
+    autoExpandAll: false,
+  },
+}));
+
+// T1155453
+test('Headers should be rendered correctly after changing the grouping.autoExpandAll when headerCellTemplate is given (React)', async (t) => {
+  // arrange
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const dataGrid = new DataGrid('#container');
+
+  await takeScreenshot('T1155453-expanded-groups', dataGrid.element);
+
+  // act
+  await dataGrid.apiCollapseAllGroups();
+  await t.wait(100);
+
+  await takeScreenshot('T1155453-collapsed-groups', dataGrid.element);
+
+  // assert
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await createWidget('dxDataGrid', {
+    dataSource: [
+      {
+        field1: '1', field2: 'test1',
+      },
+      {
+        field1: '2', field2: 'test1',
+      },
+      {
+        field1: '3', field2: 'test2',
+      },
+    ],
+    width: 700,
+    renderAsync: false,
+    templatesRenderAsynchronously: true,
+    columns: [
+      { dataField: 'field1', headerCellTemplate: (_, { column }) => $('<div>').text(column.caption) },
+      { dataField: 'field2', groupIndex: 0 },
+    ],
+    groupPanel: {
+      visible: true,
+    },
+    grouping: {
+      autoExpandAll: true,
+    },
+  });
+
+  await makeColumnHeadersViewTemplatesAsync(DATA_GRID_SELECTOR);
+});
+
+// T1155453
+test('Headers should be rendered correctly after changing the grouping.autoExpandAll when there is fixed column and headerCellTemplate is given (React)', async (t) => {
+  // arrange
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const dataGrid = new DataGrid('#container');
+
+  await takeScreenshot('T1155453-expanded-groups-with-fixed-content', dataGrid.element);
+
+  // act
+  await dataGrid.apiCollapseAllGroups();
+  await t.wait(200);
+
+  await takeScreenshot('T1155453-collapsed-groups-with-fixed-content', dataGrid.element);
+
+  // assert
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await createWidget('dxDataGrid', {
+    dataSource: [
+      {
+        field1: '1', field2: 'test1', field3: 'test11',
+      },
+      {
+        field1: '2', field2: 'test1', field3: 'test12',
+      },
+      {
+        field1: '3', field2: 'test2', field3: 'test13',
+      },
+    ],
+    width: 700,
+    renderAsync: false,
+    templatesRenderAsynchronously: true,
+    columns: [
+      { dataField: 'field1', headerCellTemplate: (_, { column }) => $('<div>').text(column.caption) },
+      { dataField: 'field2', groupIndex: 0 },
+      { dataField: 'field3', fixed: true },
+    ],
+    groupPanel: {
+      visible: true,
+    },
+    grouping: {
+      autoExpandAll: true,
+    },
+  });
+
+  await makeColumnHeadersViewTemplatesAsync(DATA_GRID_SELECTOR);
+});

testing/testcafe/tests/dataGrid/helpers/asyncTemplates.ts

@@ -6,10 +6,30 @@ export const makeRowsViewTemplatesAsync = async (selector: string): Promise<void
 
     const rowsView = dataGrid.getView('rowsView');
     const originRender = rowsView.renderDelayedTemplates.bind(rowsView);
+
+    // eslint-disable-next-line no-underscore-dangle
+    rowsView._templatesCache = {};
     rowsView.renderDelayedTemplates = (changes) => {
       setTimeout(() => { originRender(changes); });
     };
   }, {
     dependencies: { selector },
   })();
 };
+
+export const makeColumnHeadersViewTemplatesAsync = async (selector: string): Promise<void> => {
+  await ClientFunction(() => {
+    const dataGrid = ($(selector) as any).dxDataGrid('instance');
+
+    const columnHeadersView = dataGrid.getView('columnHeadersView');
+    const originRender = columnHeadersView.renderDelayedTemplates.bind(columnHeadersView);
+
+    // eslint-disable-next-line no-underscore-dangle
+    columnHeadersView._templatesCache = {};
+    columnHeadersView.renderDelayedTemplates = (changes) => {
+      setTimeout(() => { originRender(changes); });
+    };
+  }, {
+    dependencies: { selector },
+  })();
+};