fix(grid): Allow using custom sorting strategy when sorting mode is multiple (#12682)

* fix(grid): Allow using custom sorting strategy when sorting mode is multiple

* chore(*): add an optional chaining operator to prevent throwing an error

* chore(*): update changelog for adding two new params to groupingComparer

---------

Co-authored-by: Svetloslav Novoselski <[email protected]>
Co-authored-by: Konstantin Dinev <[email protected]>

Author: 3 people

CHANGELOG.md

@@ -3,6 +3,11 @@
 All notable changes for each version of this project will be documented in this file.
 
 ## 15.1.0
+
+### New Features
+- `IgxColumnComponent`
+    - Added `currRec` and `groupRec` parameters to the `groupingComparer` function that give access to the all properties of the compared records.
+
 ### General
  - `IgxPivotGrid`
     - The `IgxPivotDateDimension` properties `inBaseDimension` and `inOption` have been deprecated and renamed to `baseDimension` and `options` respectively.

projects/igniteui-angular/src/lib/data-operations/grouping-expression.interface.ts

@@ -1,5 +1,5 @@
 import { ISortingExpression } from './sorting-strategy';
 
 export interface IGroupingExpression extends ISortingExpression {
-    groupingComparer?: (a: any, b: any) => number;
+    groupingComparer?: (a: any, b: any, currRec?: any, groupRec?: any) => number;
 }

projects/igniteui-angular/src/lib/grids/columns/column.component.ts

@@ -1110,19 +1110,19 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
      * @memberof IgxColumnComponent
      */
     @Input()
-    public get groupingComparer(): (a: any, b: any) => number {
+    public get groupingComparer(): (a: any, b: any, currRec?: any, groupRec?: any) => number {
         return this._groupingComparer;
     }
     /**
      * Sets a custom function to compare values for grouping.
      * Subsequent values in the sorted data that the function returns 0 for are grouped.
      * ```typescript
-     * this.column.groupingComparer = (a: any, b: any) => { return a === b ? 0 : -1; }
+     * this.column.groupingComparer = (a: any, b: any, currRec?: any, groupRec?: any) => { return a === b ? 0 : -1; }
      * ```
      *
      * @memberof IgxColumnComponent
      */
-    public set groupingComparer(funcRef: (a: any, b: any) => number) {
+    public set groupingComparer(funcRef: (a: any, b: any, currRec?: any, groupRec?: any) => number) {
         this._groupingComparer = funcRef;
     }
     /**
@@ -1698,7 +1698,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
     /**
      * @hidden
      */
-    protected _groupingComparer: (a: any, b: any) => number;
+    protected _groupingComparer: (a: any, b: any, currRec?: any, groupRec?: any) => number;
     /**
      * @hidden
      */

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

@@ -110,24 +110,27 @@ export class IgxSorting implements IGridSortingStrategy {
         expression: IGroupingExpression,
         isDate: boolean = false,
         isTime: boolean = false,
-        isString: boolean
+        isString: boolean,
+        groupingComparer?: (a: any, b: any, currRec: any, groupRec: any) => number
     ): T[] {
         const res = [];
         const key = expression.fieldName;
         const len = data.length;
-        let groupval = this.getFieldValue(data[index], key, isDate, isTime);
-        res.push(data[index]);
+        const groupRecord = data[index];
+        let groupval = this.getFieldValue(groupRecord, key, isDate, isTime);
+        res.push(groupRecord);
         index++;
-        const comparer = expression.groupingComparer || DefaultSortingStrategy.instance().compareValues;
+        const comparer = expression.groupingComparer || groupingComparer || DefaultSortingStrategy.instance().compareValues;
         for (let i = index; i < len; i++) {
-            let fieldValue = this.getFieldValue(data[i], key, isDate, isTime);
+            const currRec = data[i];
+            let fieldValue = this.getFieldValue(currRec, key, isDate, isTime);
             if (expression.ignoreCase && isString) {
                 // when column's dataType is string but the value is number
                 fieldValue = fieldValue?.toString().toLowerCase();
                 groupval = groupval?.toString().toLowerCase();
             }
-            if (comparer(fieldValue, groupval) === 0) {
-                res.push(data[i]);
+            if (comparer(fieldValue, groupval, currRec, groupRecord) === 0) {
+                res.push(currRec);
             } else {
                 break;
             }
@@ -166,7 +169,7 @@ export class IgxSorting implements IGridSortingStrategy {
         }
         // in case of multiple sorting
         for (i = 0; i < dataLen; i++) {
-            gbData = this.groupedRecordsByExpression(data, i, expr, isDate, isTime, isString);
+            gbData = this.groupedRecordsByExpression(data, i, expr, isDate, isTime, isString, column?.groupingComparer);
             gbDataLen = gbData.length;
             if (gbDataLen > 1) {
                 gbData = this.sortDataRecursive(gbData, expressions, expressionIndex + 1, grid);

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

@@ -5,7 +5,7 @@ import { DefaultSortingStrategy, SortingDirection } from '../../data-operations/
 import { configureTestSuite } from '../../test-utils/configure-suite';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { GridFunctions } from '../../test-utils/grid-functions.spec';
-import { GridDeclaredColumnsComponent, SortByParityComponent, GridWithPrimaryKeyComponent } from '../../test-utils/grid-samples.spec';
+import { GridDeclaredColumnsComponent, SortByParityComponent, GridWithPrimaryKeyComponent, SortByAnotherColumnComponent } from '../../test-utils/grid-samples.spec';
 import { UIInteractions } from '../../test-utils/ui-interactions.spec';
 import { SampleTestData } from '../../test-utils/sample-test-data.spec';
 import { CellType } from '../common/grid.interface';
@@ -21,7 +21,8 @@ describe('IgxGrid - Grid Sorting #grid', () => {
             declarations: [
                 GridDeclaredColumnsComponent,
                 SortByParityComponent,
-                GridWithPrimaryKeyComponent
+                GridWithPrimaryKeyComponent,
+                SortByAnotherColumnComponent
             ],
             imports: [NoopAnimationsModule, IgxGridModule]
         });
@@ -356,6 +357,37 @@ describe('IgxGrid - Grid Sorting #grid', () => {
             expect(isFirstHalfOdd).toEqual(true);
             expect(isSecondHalfEven).toEqual(true);
         });
+
+        it(`Should allow sorting using a custom Sorting Strategy in multiple mode`, () => {
+            fixture = TestBed.createComponent(SortByAnotherColumnComponent);
+            grid = fixture.componentInstance.grid;
+            fixture.detectChanges();
+
+            grid.primaryKey = 'ID';
+            const column = grid.getColumnByName('ID');
+            fixture.detectChanges();
+
+            column.groupingComparer = (a: any, b: any, currRec: any, groupRec: any) => {
+                return currRec.Name === groupRec.Name ? 0 : -1;
+            }
+
+            fixture.detectChanges();
+            grid.sortingExpressions = [
+                {
+                  dir: SortingDirection.Asc,
+                  fieldName: 'ID',
+                  strategy: new SortByAnotherColumnComponent,
+                },
+                {
+                  dir: SortingDirection.Asc,
+                  fieldName: 'LastName',
+                  strategy: DefaultSortingStrategy.instance(),
+                },
+              ];
+            fixture.detectChanges();
+            expect(grid.getCellByKey(6, 'LastName').row.index).toBeGreaterThan(grid.getCellByKey(7, 'LastName').row.index);
+            expect(grid.getCellByKey(4, 'LastName').row.index).toBeGreaterThan(grid.getCellByKey(5, 'LastName').row.index);
+        });
     });
 
     describe('UI tests', () => {

projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts

@@ -2366,6 +2366,30 @@ export class SortByParityComponent extends GridDeclaredColumnsComponent implemen
     }
 }
 
+@Component({
+    template: GridTemplateStrings.declareGrid(
+        '',
+        '',
+        ColumnDefinitions.idFirstLastNameSortable,
+        '',
+        '',
+        '')
+})
+export class SortByAnotherColumnComponent extends GridDeclaredColumnsComponent implements ISortingStrategy {
+
+    public sort(data: any[]) {
+        const key = 'Name';
+        const cmpFunc = (obj1, obj2) => this.compareObjects(obj1, obj2, key);
+        return data.sort(cmpFunc);
+    }
+
+    protected compareObjects(obj1, obj2, key: string) {
+        const a = obj1[key].toLowerCase();
+        const b = obj2[key].toLowerCase();
+        return a > b ? 1 : a < b ? -1 : 0;
+    }
+}
+
 @Component({
     template: `
     <igx-grid #grid [data]="data" [height]="'500px'" [width]="'500px'">