fix(*): fix the iissues with hierarchical and tree grid #9674

Author: ddincheva

projects/igniteui-angular/src/lib/grids/common/grid.interface.ts

@@ -36,6 +36,7 @@ import { OverlaySettings } from '../../services/overlay/utilities';
 import { IPinningConfig } from '../grid.common';
 import { IDimensionsChange, IPivotConfiguration, IPivotDimension, IPivotKeys, IPivotValue, IValuesChange, PivotDimensionType } from '../pivot-grid/pivot-grid.interface';
 import { IDataCloneStrategy } from '../../data-operations/data-clone-strategy';
+import { IgxTreeGridGroupByAreaComponent } from '../grouping/tree-grid-group-by-area.component';
 
 export const IGX_GRID_BASE = new InjectionToken<GridType>('IgxGridBaseToken');
 export const IGX_GRID_SERVICE_BASE = new InjectionToken<GridServiceType>('IgxGridServiceBaseToken');
@@ -444,6 +445,7 @@ export interface GridType extends IGridDataBindable {
     records?: Map<any, ITreeGridRecord>;
     processedExpandedFlatData?: any[] | null;
     processedRecords?: Map<any, ITreeGridRecord>;
+    treeGroupArea?: IgxTreeGridGroupByAreaComponent;
 
     activeNodeChange: EventEmitter<IActiveNodeChangeEventArgs>;
     gridKeydown: EventEmitter<IGridKeydownEventArgs>;

projects/igniteui-angular/src/lib/grids/grid/grid.component.html

@@ -52,7 +52,7 @@
         | gridAddRow:true:pipeTrigger
         | gridRowPinning:id:true:pipeTrigger
         | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true
-        | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger:true as pinnedData'>
+        | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger:true as pinnedData'>
             <div #pinContainer *ngIf='pinnedData.length > 0'
                 [ngClass]="{
                     'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,

projects/igniteui-angular/src/lib/grids/grouping/group-by-area.directive.ts

@@ -51,7 +51,7 @@ export abstract class IgxGroupByAreaDirective {
 
     /** The parent grid containing the component. */
     @Input()
-    public grid: FlatGridType & GridType;
+    public grid: FlatGridType | GridType;
 
     /**
      * The group-by expressions provided by the parent grid.
@@ -159,9 +159,10 @@ export abstract class IgxGroupByAreaDirective {
     }
 
     protected updateGroupSorting(id: string) {
-        const expr = this.grid.groupingExpressions.find(e => e.fieldName === id);
+        const expr = this.expressions.find(e => e.fieldName === id);
         expr.dir = 3 - expr.dir;
         this.grid.pipeTrigger++;
+        this.grid.notifyChanges();
     }
 
     protected expressionsChanged() {

projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts

@@ -153,7 +153,8 @@ export class IgxGridHeaderComponent implements DoCheck, OnDestroy {
      * @hidden
      */
     public get disabled() {
-        if (this.grid.groupingExpressions.length && this.grid.groupingExpressions.map(g => g.fieldName).includes(this.column.field)) {
+        const groupArea = this.grid.groupArea || this.grid.treeGroupArea;
+        if (groupArea?.expressions && groupArea.expressions.length && groupArea.expressions.map(g => g.fieldName).includes(this.column.field)) {
             return true;
         }
         return false;

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html

@@ -34,7 +34,7 @@
             | gridAddRow:true:pipeTrigger
             | gridRowPinning:id:true:pipeTrigger
             | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true
-            | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger:true as pinnedData">
+            | gridSort:sortingExpressions:[]:sortStrategy:id:pipeTrigger:true as pinnedData">
                 <div #pinContainer *ngIf='pinnedData.length > 0' class='igx-grid__tr--pinned'
                     [ngClass]="{ 'igx-grid__tr--pinned-bottom':  !isRowPinningToTop, 'igx-grid__tr--pinned-top': isRowPinningToTop }"
                     [style.width.px]='calcWidth'>
@@ -51,7 +51,7 @@
         | gridTransaction:id:pipeTrigger
         | visibleColumns:hasVisibleColumns
         | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger
-        | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger
+        | gridSort:sortingExpressions:[]:sortStrategy:id:pipeTrigger
         | gridHierarchicalPaging:paginator?.page:paginator?.perPage:id:pipeTrigger
         | gridHierarchical:expansionStates:id:primaryKey:childLayoutKeys:pipeTrigger
         | gridAddRow:false:pipeTrigger

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html

@@ -34,7 +34,7 @@
             | treeGridAddRow:true:pipeTrigger
             | gridRowPinning:id:true:pipeTrigger
             | treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:pipeTrigger:filteringPipeTrigger:true
-            | treeGridSorting:sortingExpressions:sortStrategy:pipeTrigger:true as pinnedData'>
+            | treeGridSorting:sortingExpressions:treeGroupArea?.expressions:sortStrategy:pipeTrigger:true as pinnedData'>
                 <div #pinContainer *ngIf='pinnedData.length > 0'
                     [ngClass]="{
                         'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,
@@ -54,7 +54,7 @@
         | visibleColumns:hasVisibleColumns
         | treeGridHierarchizing:primaryKey:foreignKey:childDataKey:pipeTrigger
         | treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:pipeTrigger:filteringPipeTrigger
-        | treeGridSorting:sortingExpressions:sortStrategy:pipeTrigger
+        | treeGridSorting:sortingExpressions:treeGroupArea?.expressions:sortStrategy:pipeTrigger
         | treeGridFlattening:expansionDepth:expansionStates:pipeTrigger
         | treeGridPaging:paginator?.page:paginator?.perPage:pipeTrigger
         | treeGridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger