GridCore: fix calculateGroupValue comparison on apply group and sort …

e2e/testcafe-devextreme/tests/dataGrid/common/grouping/grouping.ts

@@ -298,6 +298,89 @@ test('DataGrid loses grouping after the expandAll method if a grouped column has
   ],
 }));
 
+test('DataGrid should not lose grouping after the expandAll method if a grouped column has string calculateGroupValue (T1321187)', async (t) => {
+  const dataGrid = new DataGrid('#container');
+
+  await dataGrid.apiExpandAll();
+
+  await t
+    .expect(dataGrid.apiColumnOption('a', 'groupIndex'))
+    .eql(0);
+}).before(async () => createWidget('dxDataGrid', {
+  dataSource: [{
+    id: 0, a: 0, aLabel: 'A_0', b: 'B_0', c: 'C_0',
+  }],
+  keyExpr: 'id',
+  grouping: { autoExpandAll: false },
+  columns: [{
+    dataField: 'a',
+    groupIndex: 0,
+    calculateGroupValue: 'aLabel',
+  },
+  'b', 'c'],
+}));
+
+test('DataGrid should not change group column after the expandAll method, string calculateGroupValue corresponds another column (T1308536)', async (t) => {
+  const dataGrid = new DataGrid('#container');
+  const firstGroupCellText = await dataGrid.getGroupRow(0).getCell(1).element.textContent;
+
+  await dataGrid.apiExpandAll();
+
+  await t
+    .expect(dataGrid.apiColumnOption('a', 'groupIndex'))
+    .eql(0)
+    .expect(dataGrid.apiColumnOption('aLabel', 'groupIndex'))
+    .eql(undefined)
+    .expect(dataGrid.getGroupRow(0).getCell(1).element.textContent)
+    .eql(firstGroupCellText);
+}).before(async () => createWidget('dxDataGrid', {
+  dataSource: [{
+    id: 0, a: 0, aLabel: 'A_0', b: 'B_0', c: 'C_0',
+  }],
+  keyExpr: 'id',
+  grouping: { autoExpandAll: false },
+  columns: [{
+    dataField: 'a',
+    groupIndex: 0,
+    calculateGroupValue: 'aLabel',
+  },
+  { dataField: 'aLabel', visible: false },
+
+  'b', 'c'],
+}));
+
+test('DataGrid should not change group column after the expandAll method, string calculateGroupValue corresponds another unbound column (T1308536)', async (t) => {
+  const dataGrid = new DataGrid('#container');
+  const firstGroupCellText = await dataGrid.getGroupRow(0).getCell(1).element.textContent;
+
+  await dataGrid.apiExpandAll();
+
+  await t
+    .expect(dataGrid.apiColumnOption('a', 'groupIndex'))
+    .eql(0)
+    .expect(dataGrid.apiColumnOption('aLabel', 'groupIndex'))
+    .eql(undefined)
+    .expect(dataGrid.getGroupRow(0).getCell(1).element.textContent)
+    .eql(firstGroupCellText);
+}).before(async () => createWidget('dxDataGrid', {
+  dataSource: [{
+    id: 0, a: 0, aLabel: 'A_0', b: 'B_0', c: 'C_0',
+  }],
+  keyExpr: 'id',
+  grouping: { autoExpandAll: false },
+  columns: [{
+    dataField: 'a',
+    groupIndex: 0,
+    calculateGroupValue: 'aLabel',
+  },
+  {
+    name: 'aLabel',
+    caption: 'aLabel',
+    calculateCellValue(data) { return data.aLabel; },
+  },
+  'b', 'c'],
+}));
+
 test('Grouping and filtering should be applied correctly when they change at runtime (T1237863)', async (t) => {
   const dataGrid = new DataGrid('#container');
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);

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

@@ -1323,38 +1323,56 @@ export class ColumnsController extends modules.Controller {
     updateColumnChanges(this, 'columns');
   }
 
-  public updateSortingGrouping(dataSource, fromDataSource?) {
+  public updateSortingGrouping(dataSource, fromDataSource?: boolean): void {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
     const that = this;
-    let isColumnsChanged;
-    const updateSortGroupParameterIndexes = function (columns, sortParameters, indexParameterName) {
-      each(columns, (index, column) => {
+    // eslint-disable-next-line @typescript-eslint/init-declarations
+    let isColumnsChanged: boolean | undefined;
+    // eslint-disable-next-line func-names
+    const updateSortGroupParameterIndexes = function (
+      columns,
+      sortParameters,
+      indexParameterName: string,
+    ): void {
+      const referencedGroupValues: string[] = columns
+        .filter((column) => isString(column.calculateGroupValue))
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+        .map((column): string => column.calculateGroupValue);
+
+      each(columns, (_: number, column) => {
+        const isReferencedAsGroupValue = indexParameterName === 'groupIndex'
+          && referencedGroupValues.some(
+            (groupValue) => column.dataField === groupValue || column.name === groupValue,
+          );
+
+        if (!isReferencedAsGroupValue) {
         // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
-        delete column[indexParameterName];
-        if (sortParameters) {
-          for (let i = 0; i < sortParameters.length; i++) {
-            const { selector } = sortParameters[i];
-            const { isExpanded } = sortParameters[i];
-
-            if (selector === column.dataField
-              || selector === column.name
-              || selector === column.displayField
-              || gridCoreUtils.isEqualSelectors(selector, column.selector)
-              || gridCoreUtils.isSelectorEqualWithCallback(selector, column.calculateCellValue)
-              || gridCoreUtils.isSelectorEqualWithCallback(selector, column.calculateGroupValue)
-              || gridCoreUtils.isSelectorEqualWithCallback(selector, column.calculateDisplayValue)
-            ) {
-              if (fromDataSource) {
-                column.sortOrder = 'sortOrder' in column ? column.sortOrder : sortParameters[i].desc ? 'desc' : 'asc';
-              } else {
-                column.sortOrder = column.sortOrder || (sortParameters[i].desc ? 'desc' : 'asc');
-              }
-
-              if (isExpanded !== undefined) {
-                column.autoExpandGroup = isExpanded;
+          delete column[indexParameterName];
+          if (sortParameters) {
+            for (let i = 0; i < sortParameters.length; i += 1) {
+              const { selector, isExpanded } = sortParameters[i];
+
+              if (selector === column.dataField
+                || selector === column.name
+                || selector === column.displayField
+                || gridCoreUtils.isEqualSelectors(selector, column.selector)
+                || gridCoreUtils.isSelectorEqualWithCallback(selector, column.calculateCellValue)
+                || gridCoreUtils.isEqualSelectors(selector, column.calculateGroupValue)
+                || gridCoreUtils.isSelectorEqualWithCallback(selector, column.calculateDisplayValue)
+              ) {
+                if (fromDataSource) {
+                  column.sortOrder = 'sortOrder' in column ? column.sortOrder : sortParameters[i].desc ? 'desc' : 'asc';
+                } else {
+                  column.sortOrder = column.sortOrder ?? (sortParameters[i].desc ? 'desc' : 'asc');
+                }
+
+                if (isExpanded !== undefined) {
+                  column.autoExpandGroup = isExpanded;
+                }
+
+                column[indexParameterName] = i;
+                break;
               }
-
-              column[indexParameterName] = i;
-              break;
             }
           }
         }
@@ -1373,10 +1391,10 @@ export class ColumnsController extends modules.Controller {
       const groupExpandingChanged = !groupingChanged && !gridCoreUtils.equalSortParameters(groupParameters, columnsGroupParameters);
 
       if (!that._columns.length) {
-        each(groupParameters, (index, group) => {
+        each(groupParameters, (_: number, group) => {
           that._columns.push(group.selector);
         });
-        each(sortParameters, (index, sort) => {
+        each(sortParameters, (_: number, sort) => {
           if (!isFunction(sort.selector)) {
             that._columns.push(sort.selector);
           }