Custom Sorting Strategy is not working properly in multiple sorting mode

[Zneeky]

Description

When a custom sorting strategy is applied to a column and I try to sort the grid by an additional column there is no effect

• igniteui-angular version: 17.0.0
• browser: any

Steps to reproduce

1. Open the attached StackBlitz sample
2. Sort by the first column
3. Sort by the second column

Result

The second column is not adequately sorted, the default strategy is not applied

Expected result

The second column should be sorted alphabetically

Attachments

StackBlitz sample

[sboggs-trs]

Hi, I originally reported the issue. We currently have 5 different custom sorting strategies. But, we only experience this problem for date columns (with date data having values for the time portion of the date) that are displayed as shortDate and therefore require the custom sorting strategy used in the Stackblitz example. To be clear - we do not have this issue when using the other 4 sorting strategies, or if all the date data actually has zeros for the time part of the dates.

It is as if the column is sorted correctly (as seen in the column) according to the custom strategy, but in the background is also sorted by the default strategy - this is just speculation and not based on any source code evaluation, though.

[MonikaKirkova]

When custom sorting strategy is used and the column is sorted based on transformed values and not the default ones and a second column is sorted, the values of the first one are grouped in order to sort the second column only for the groups (the same values) and not to reorder the first column. However, when the grouping is executed the first column is grouped based on a groupingComparer. If there is non set, the default one is used. In order to successfully sort multiple columns with custom sorting strategy a groupingComparer should be set to the column with the custom strategy:

public onColumnInit(ev: IgxColumnComponent) { if (ev.field === 'ADate') { ev.sortStrategy = this.shortDateStrategy; ev.groupingComparer = (a: any, b: any, currRec: any, groupRec: any) => { const aDate: number = this.getShortDate(a); const bDate: number = this.getShortDate(b); let comparison: number = 0; if (!aDate && !bDate) return 0; if ((!aDate && bDate) || (aDate && bDate && aDate < bDate)) { comparison = -1; } else if ((aDate && !bDate) || (aDate && bDate && aDate > bDate)) { comparison = 1; } else if (aDate && bDate && aDate === bDate) { comparison = 0; } return comparison; } } } Please test the modified sample, demonstrating this behavior.

[MonikaKirkova]

The custom sorting strategy sorts based on the date without taking the hour under consideration and this is why ‘2023-02-02 6:30’ is below ‘2023-02-02 8:30’. If the ‘Adate’ column should be sorted based on the hour as well what I could suggest is changing the sorting strategy and removing the comparer or changing the method passed as groupingComparer.

[sboggs-trs]

Monika, you are correct. I have deleted that comment and screenshot, since it is of no benefit to others. Thank you for this solution.