fix(groupby): adding proper comparison function to determine expansion state (#12869)

Author: ChronosSF

projects/igniteui-angular/src/lib/data-operations/data-util.ts

@@ -19,6 +19,7 @@ import {
     IgxGrouping
 } from '../grids/common/strategy';
 import { DefaultDataCloneStrategy, IDataCloneStrategy } from '../data-operations/data-clone-strategy';
+import { IGroupingExpression } from './grouping-expression.interface';
 
 /**
  * @hidden
@@ -132,8 +133,8 @@ export class DataUtil {
         return getHierarchy(gRow);
     }
 
-    public static isHierarchyMatch(h1: Array<IGroupByKey>, h2: Array<IGroupByKey>): boolean {
-        return isHierarchyMatch(h1, h2);
+    public static isHierarchyMatch(h1: Array<IGroupByKey>, h2: Array<IGroupByKey>, expressions: IGroupingExpression[]): boolean {
+        return isHierarchyMatch(h1, h2, expressions);
     }
 
     /**

projects/igniteui-angular/src/lib/data-operations/operations.ts

@@ -1,11 +1,17 @@
 import { IGroupByKey } from './groupby-expand-state.interface';
 import { IGroupByRecord } from './groupby-record.interface';
+import { IGroupingExpression } from './grouping-expression.interface';
+import { DefaultSortingStrategy } from './sorting-strategy';
 
-export const isHierarchyMatch = (h1: Array<IGroupByKey>, h2: Array<IGroupByKey>): boolean => {
+export const isHierarchyMatch = (h1: Array<IGroupByKey>, h2: Array<IGroupByKey>, expressions: IGroupingExpression[]): boolean => {
     if (h1.length !== h2.length) {
         return false;
     }
-    return h1.every((level, index): boolean => level.fieldName === h2[index].fieldName && level.value === h2[index].value);
+    return h1.every((level, index): boolean => {
+        const expr = expressions.find(e => e.fieldName === level.fieldName);
+        const comparer = expr.groupingComparer || DefaultSortingStrategy.instance().compareValues;
+        return level.fieldName === h2[index].fieldName && comparer(level.value, h2[index].value) === 0;
+    });
 };
 
 export const getHierarchy = (gRow: IGroupByRecord): Array<IGroupByKey> => {

projects/igniteui-angular/src/lib/grids/common/strategy.ts

@@ -63,7 +63,11 @@ export class IgxSorting implements IGridSortingStrategy {
             }
             const hierarchy = getHierarchy(groupRow);
             const expandState: IGroupByExpandState = expansion.find((s) =>
-                isHierarchyMatch(s.hierarchy || [{ fieldName: groupRow.expression.fieldName, value: groupRow.value }], hierarchy));
+                isHierarchyMatch(
+                    s.hierarchy || [{ fieldName: groupRow.expression.fieldName, value: groupRow.value }],
+                    hierarchy,
+                    expressions
+                ));
             const expanded = expandState ? expandState.expanded : state.defaultExpanded;
             let recursiveResult;
             result.push(groupRow);

projects/igniteui-angular/src/lib/grids/grid/grid-api.service.ts

@@ -58,7 +58,10 @@ export class IgxGridAPIService extends GridBaseAPIService<GridType> implements G
         const grState = this.grid.groupingExpansionState;
         const hierarchy = DataUtil.getHierarchy(groupRow);
         return grState.find((state) =>
-            DataUtil.isHierarchyMatch(state.hierarchy || [{ fieldName: groupRow.expression.fieldName, value: groupRow.value }], hierarchy));
+            DataUtil.isHierarchyMatch(
+                state.hierarchy || [{ fieldName: groupRow.expression.fieldName, value: groupRow.value }],
+                hierarchy,
+                this.grid.groupingExpressions));
     }
 
     public groupBy_is_row_in_group(groupRow: IGroupByRecord, rowID): boolean {

projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts

@@ -467,6 +467,15 @@ describe('IgxGrid - GroupBy #grid', () => {
         tick();
         fix.detectChanges();
         expect(groupRow.expanded).toBe(false);
+
+        grid.clearGrouping();
+        tick();
+        grid.groupBy({ fieldName: 'ReleaseDate', dir: SortingDirection.Desc });
+        fix.detectChanges();
+        grid.toggleGroup(grid.groupsRowList.first.groupRow);
+        tick();
+        fix.detectChanges();
+        expect(groupRows[0].expanded).toEqual(false);
     }));
 
     it('should allow changing the order of the groupBy columns.', fakeAsync(() => {

projects/igniteui-angular/src/lib/services/exporter-common/base-export-service.ts

@@ -1028,7 +1028,9 @@ export abstract class IgxBaseExporter {
             const hierarchicalOwner = setGridParent ? GRID_PARENT : `${GRID_CHILD}${++this.rowIslandCounter}`;
             const hierarchy = getHierarchy(record);
             const expandState: IGroupByExpandState = groupingState.expansion.find((s) =>
-                isHierarchyMatch(s.hierarchy || [{ fieldName: record.expression.fieldName, value: recordVal }], hierarchy));
+                isHierarchyMatch(s.hierarchy || [{ fieldName: record.expression.fieldName, value: recordVal }],
+                hierarchy,
+                grid.groupingExpressions));
             const expanded = expandState ? expandState.expanded : groupingState.defaultExpanded;
 
             const isDate = recordVal instanceof Date;