chore(*): Cache columnsToMerge and use as pipe trigger.

Author: MKirova

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -3358,7 +3358,8 @@ export abstract class IgxGridBaseDirective implements GridType,
     private _defaultRowHeight = 50;
     private _rowCount: number;
     private _cellMergeMode: GridCellMergeMode = GridCellMergeMode.onSort;
-    private _prevVisibleColumns: IgxColumnComponent[] = [];
+    private _prevColsToMerge: IgxColumnComponent[] = [];
+    private _columnsToMerge: IgxColumnComponent[] = [];
 
     /**
      * @hidden @internal
@@ -3994,10 +3995,19 @@ export abstract class IgxGridBaseDirective implements GridType,
      * @internal
      */
     public get columnsToMerge() : ColumnType[] {
-        return this.visibleColumns.filter(
+        if (this._columnsToMerge.length) {
+            return this._columnsToMerge;
+        }
+        const cols = this.visibleColumns.filter(
             x => x.merge && (this.cellMergeMode ==='always' ||
             (this.cellMergeMode === 'onSort' && !!this.sortingExpressions.find( y => y.fieldName === x.field)))
         );
+        if (areEqualArrays(cols, this._prevColsToMerge)) {
+            return this._prevColsToMerge;
+        }
+        this._columnsToMerge = cols;
+        this._prevColsToMerge = [...cols];
+        return this._columnsToMerge;
     }
 
     protected get mergedDataInView() {
@@ -4015,6 +4025,7 @@ export abstract class IgxGridBaseDirective implements GridType,
         this._visibleColumns.length = 0;
         this._pinnedVisible.length = 0;
         this._unpinnedVisible.length = 0;
+        this._columnsToMerge.length = 0;
     }
 
     /**
@@ -4734,12 +4745,7 @@ export abstract class IgxGridBaseDirective implements GridType,
         if (this._visibleColumns.length) {
             return this._visibleColumns;
         }
-        const newCollection = this._columns.filter(c => !c.hidden);
-        if (areEqualArrays(newCollection, this._prevVisibleColumns)) {
-            return this._prevVisibleColumns;
-        }
-        this._visibleColumns = newCollection;
-        this._prevVisibleColumns = [...this._visibleColumns];
+        this._visibleColumns = this._columns.filter(c => !c.hidden);
         return this._visibleColumns;
     }
 

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

@@ -62,7 +62,7 @@
                 | gridRowPinning:id:true:pipeTrigger
                 | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true
                 | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger:true
-                | gridCellMerge:visibleColumns:cellMergeMode:mergeStrategy:sortingExpressions:activeRowIndexes:true:pipeTrigger; as pinnedData) {
+                | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:sortingExpressions:activeRowIndexes:true:pipeTrigger; as pinnedData) {
                 @if (pinnedData.length > 0) {
                     <div #pinContainer
                         [ngClass]="{
@@ -89,7 +89,7 @@
         | gridDetails:hasDetails:expansionStates:pipeTrigger
         | gridAddRow:false:pipeTrigger
         | gridRowPinning:id:false:pipeTrigger
-        | gridCellMerge:visibleColumns:cellMergeMode:mergeStrategy:sortingExpressions:activeRowIndexes:false:pipeTrigger"
+        | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:sortingExpressions:activeRowIndexes:false:pipeTrigger"
             let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]="verticalScroll"
             [igxForContainerSize]="calcHeight"
             [igxForItemSize]="hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight"

projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts

@@ -86,8 +86,7 @@ export class IgxGridCellMergePipe implements PipeTransform {
 
     constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { }
 
-    public transform(collection: any, visibleColumns: ColumnType[], mergeMode: GridCellMergeMode, mergeStrategy: IGridMergeStrategy, sortExpr: ISortingExpression[], activeRowIndexes: number[], pinned: boolean, _pipeTrigger: number) {
-        const colsToMerge = this.grid.columnsToMerge;
+    public transform(collection: any, colsToMerge: ColumnType[], mergeMode: GridCellMergeMode, mergeStrategy: IGridMergeStrategy, sortExpr: ISortingExpression[], activeRowIndexes: number[], pinned: boolean, _pipeTrigger: number) {
         if (colsToMerge.length === 0) {
             return collection;
         }

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

@@ -45,7 +45,7 @@
                 | gridRowPinning:id:true:pipeTrigger
                 | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true
                 | gridSort:sortingExpressions:[]:sortStrategy:id:pipeTrigger:true
-                | gridCellMerge:visibleColumns:cellMergeMode:mergeStrategy:sortingExpressions:activeRowIndexes:true:pipeTrigger; as pinnedData
+                | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:sortingExpressions:activeRowIndexes:true:pipeTrigger; as pinnedData
             ) {
                 @if (pinnedData.length > 0) {
                     <div #pinContainer class="igx-grid__tr--pinned"
@@ -70,7 +70,7 @@
         | gridHierarchical:expansionStates:id:primaryKey:childLayoutKeys:pipeTrigger
         | gridAddRow:false:pipeTrigger
         | gridRowPinning:id:false:pipeTrigger
-        | gridCellMerge:visibleColumns:cellMergeMode:mergeStrategy:sortingExpressions:activeRowIndexes:false:pipeTrigger"
+        | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:sortingExpressions:activeRowIndexes:false:pipeTrigger"
             [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]="verticalScroll"
             [igxForContainerSize]="calcHeight" [igxForItemSize]="renderedRowHeight" [igxForTrackBy]="trackChanges"
             #verticalScrollContainer (chunkPreload)="dataLoading($event)" (dataChanging)="dataRebinding($event)" (dataChanged)="dataRebound($event)">

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

@@ -47,7 +47,7 @@
                 | gridRowPinning:id:true:pipeTrigger
                 | treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:pipeTrigger:filteringPipeTrigger:true
                 | treeGridSorting:sortingExpressions:treeGroupArea?.expressions:sortStrategy:pipeTrigger:true
-                | gridCellMerge:visibleColumns:cellMergeMode:mergeStrategy:sortingExpressions:activeRowIndexes:true:pipeTrigger; as pinnedData
+                | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:sortingExpressions:activeRowIndexes:true:pipeTrigger; as pinnedData
             ) {
                 @if (pinnedData.length > 0) {
                     <div #pinContainer
@@ -76,7 +76,7 @@
         | treeGridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger
         | treeGridAddRow:false:pipeTrigger
         | gridRowPinning:id:false:pipeTrigger
-        | gridCellMerge:visibleColumns:cellMergeMode:mergeStrategy:sortingExpressions:activeRowIndexes:false:pipeTrigger"
+        | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:sortingExpressions:activeRowIndexes:false:pipeTrigger"
             let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll'
             [igxForContainerSize]='calcHeight' [igxForItemSize]="renderedRowHeight" #verticalScrollContainer
             (dataChanging)="dataRebinding($event)" (dataChanged)="dataRebound($event)">