fix(sort): add sort icons to grouping examples

src/app/examples/grid-draggrouping.component.ts

@@ -311,10 +311,14 @@ export class GridDraggableGroupingComponent implements OnInit {
     }
   }
 
-  groupByDurationOrderByCount(isOrderingByCount = false) {
-    this.durationOrderByCount = isOrderingByCount;
+  groupByDurationOrderByCount(sortedByCount = false) {
+    this.durationOrderByCount = sortedByCount;
     this.clearGrouping();
     this.groupByDuration();
+
+    // you need to manually add the sort icon(s) in UI
+    const sortColumns = sortedByCount ? [] : [{ columnId: 'duration', sortAsc: true }];
+    this.angularGrid.filterService.setSortColumnIcons(sortColumns);
   }
 
   groupByDurationEffortDriven() {

src/app/examples/grid-grouping.component.ts

@@ -221,9 +221,13 @@ export class GridGroupingComponent implements OnInit {
       aggregateCollapsed: false,
       lazyTotalsCalculation: true
     } as Grouping);
+
+    // you need to manually add the sort icon(s) in UI
+    this.angularGrid.filterService.setSortColumnIcons([{ columnId: 'duration', sortAsc: true }]);
   }
 
   groupByDurationOrderByCount(aggregateCollapsed) {
+    this.angularGrid.filterService.setSortColumnIcons([]);
     this.dataviewObj.setGrouping({
       getter: 'duration',
       formatter: (g) => `Duration: ${g.value} <span style="color:green">(${g.count} items)</span>`,
@@ -240,6 +244,7 @@ export class GridGroupingComponent implements OnInit {
   }
 
   groupByDurationEffortDriven() {
+    this.angularGrid.filterService.setSortColumnIcons([]);
     this.dataviewObj.setGrouping([
       {
         getter: 'duration',
@@ -265,6 +270,7 @@ export class GridGroupingComponent implements OnInit {
   }
 
   groupByDurationEffortDrivenPercent() {
+    this.angularGrid.filterService.setSortColumnIcons([]);
     this.dataviewObj.setGrouping([
       {
         getter: 'duration',

src/app/modules/angular-slickgrid/services/__tests__/filter.service.spec.ts

@@ -1041,4 +1041,16 @@ describe('FilterService', () => {
       expect(clearSpy).toHaveBeenCalledWith(false);
     });
   });
+
+  describe('setSortColumnIcons method', () => {
+    it('should set the sorting icon by calling "setSortColumns" on the grid object', () => {
+      const mockSortColumns = [{ columnId: 'duration', sortAsc: true }];
+      const spy = jest.spyOn(gridStub, 'setSortColumns');
+
+      service.init(gridStub);
+      service.setSortColumnIcons(mockSortColumns);
+
+      expect(spy).toHaveBeenCalledWith(mockSortColumns);
+    });
+  });
 });

src/app/modules/angular-slickgrid/services/filter.service.ts

@@ -477,6 +477,18 @@ export class FilterService {
     return this._columnDefinitions;
   }
 
+  /**
+   * Set the sort icons in the UI (ONLY the icons, it does not do any sorting)
+   * The column sort icons are not necessarily inter-connected to the sorting functionality itself,
+   * you can change the sorting icons separately by passing an array of columnId/sortAsc and that will change ONLY the icons
+   * @param sortColumns
+   */
+  setSortColumnIcons(sortColumns: { columnId: string, sortAsc: boolean }[]) {
+    if (this._grid && Array.isArray(sortColumns)) {
+      this._grid.setSortColumns(sortColumns);
+    }
+  }
+
   /**
    * Update Filters dynamically just by providing an array of filter(s).
    * You can also choose emit (default) a Filter Changed event that will be picked by the Grid State Service.