From 5004900bc11e7716dec6a25cf5e9089f0541b512 Mon Sep 17 00:00:00 2001 From: Deyan Kalinov <130121354+dkalinovInfra@users.noreply.github.com> Date: Mon, 28 Sep 2026 11:15:42 +0300 Subject: [PATCH 1/2] fix(skills): Fixing sorting strategy example --- .../SKILL.md | 27 +++++++++++++++---- 1 file changed, 22 insertions(+), 5 deletions(-) diff --git a/skills/igniteui-wc-migrate-grid-lite-to-premium/SKILL.md b/skills/igniteui-wc-migrate-grid-lite-to-premium/SKILL.md index 99090492c..6e4d65d78 100644 --- a/skills/igniteui-wc-migrate-grid-lite-to-premium/SKILL.md +++ b/skills/igniteui-wc-migrate-grid-lite-to-premium/SKILL.md @@ -183,20 +183,37 @@ const column = document.querySelector('igc-column[field="name"]') as IgcColumnCo | `dataType` | `dataType` | Premium adds `dateTime`, `time`, `currency`, `percent` | | `filteringCaseSensitive` | `filteringIgnoreCase` | **Logic inverted** - `true` becomes `false` | | `sortingCaseSensitive` | `sortingIgnoreCase` | **Logic inverted** - `true` becomes `false` | -| `sortConfiguration: { comparer }` | `sortStrategy: IgcSortingStrategy` | Class-based (see below) | +| `sortConfiguration: { comparer }` | `sortStrategy` | Object with a `sort(...)` method (see below) - no base class to extend | | _(none)_ | `editable`, `pinned`, `groupable`, `hasSummary`, `disableHiding`, `disablePinning`, `selectable`, `searchable`, `formatter`, `minWidth`, `maxWidth` | Premium-only | **Custom sort strategy migration:** +The Premium Grid has no exported base class for sort strategies: `IgcSortingStrategy` is +exported as a type only, and the built-in default strategy is internal. A column's `sortStrategy` is any object with this method: + +```typescript +sort(data: any[], fieldName: string, dir: SortingDirection, ignoreCase: boolean, + valueResolver: (record: any, fieldName: string, isDate?: boolean, isTime?: boolean) => any): any[] +``` + +It receives the whole data array and returns it sorted. Read cell values through +`valueResolver`, not `record[fieldName]`, so nested fields (e.g. `address.city`) and +date/time columns work. + ```typescript // Before (Grid Lite) - function comparer on column column.sortConfiguration = { comparer: (a, b) => a.length - b.length }; -// After (Premium Grid) - class extending DefaultSortingStrategy -import { DefaultSortingStrategy } from 'igniteui-webcomponents-grids'; +// After (Premium Grid) - object implementing sort() +import { SortingDirection } from 'igniteui-webcomponents-grids/grids'; -class LengthSort extends DefaultSortingStrategy { - override compareValues(a: string, b: string) { return a.length - b.length; } +class LengthSort { + sort(data: any[], fieldName: string, dir: SortingDirection, _ignoreCase: boolean, + valueResolver: (record: any, fieldName: string, isDate?: boolean, isTime?: boolean) => any) { + const factor = dir === SortingDirection.Desc ? -1 : 1; + const len = (record: any) => String(valueResolver(record, fieldName) ?? '').length; + return [...data].sort((a, b) => factor * (len(a) - len(b))); + } } column.sortStrategy = new LengthSort(); ``` From ca69d9bcbfe44e016149df5c765c20a7fe7dd2d3 Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Mon, 28 Sep 2026 16:05:12 +0300 Subject: [PATCH 2/2] Refactor sorting configuration for Premium Grid Updated import path for SortingDirection and added length-based comparer for sorting. Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- skills/igniteui-wc-migrate-grid-lite-to-premium/SKILL.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/skills/igniteui-wc-migrate-grid-lite-to-premium/SKILL.md b/skills/igniteui-wc-migrate-grid-lite-to-premium/SKILL.md index 6e4d65d78..c76fd6c73 100644 --- a/skills/igniteui-wc-migrate-grid-lite-to-premium/SKILL.md +++ b/skills/igniteui-wc-migrate-grid-lite-to-premium/SKILL.md @@ -205,7 +205,7 @@ date/time columns work. column.sortConfiguration = { comparer: (a, b) => a.length - b.length }; // After (Premium Grid) - object implementing sort() -import { SortingDirection } from 'igniteui-webcomponents-grids/grids'; +import { SortingDirection } from 'igniteui-webcomponents-grids'; class LengthSort { sort(data: any[], fieldName: string, dir: SortingDirection, _ignoreCase: boolean,