chore(*): Break up merge groups on cell selection.

MKirova · MKirova · commit d0254734c210 · 2025-07-17T18:03:04.000+03:00
diff --git a/projects/igniteui-angular/src/lib/data-operations/data-util.ts b/projects/igniteui-angular/src/lib/data-operations/data-util.ts
@@ -91,11 +91,11 @@ export class DataUtil {
         return grouping.groupBy(data, state, grid, groupsRecords, fullResult);
     }
 
-    public static merge<T>(data: T[], columns: ColumnType[], strategy: IGridMergeStrategy = new DefaultMergeStrategy(), activeRowIndex = -1, grid: GridType = null,
+    public static merge<T>(data: T[], columns: ColumnType[], strategy: IGridMergeStrategy = new DefaultMergeStrategy(), activeRowIndexes = [], grid: GridType = null,
     ): any[] {
         let result = [];
         for (const col of columns) {
-            strategy.merge(data, col.field, col.mergingComparer, result, activeRowIndex, grid);
+            strategy.merge(data, col.field, col.mergingComparer, result, activeRowIndexes, grid);
         }
         return result;
 }
diff --git a/projects/igniteui-angular/src/lib/data-operations/merge-strategy.ts b/projects/igniteui-angular/src/lib/data-operations/merge-strategy.ts
@@ -16,7 +16,7 @@ export interface IGridMergeStrategy {
         field: string,
         comparer: (prevRecord: any, currentRecord: any, field: string) => boolean,
         result: any[],
-        activeRowIndex? : number,
+        activeRowIndexes : number[],
         grid?: GridType
     ) => any[];
     comparer: (prevRecord: any, record: any, field: string) => boolean;
@@ -35,7 +35,7 @@ export class DefaultMergeStrategy implements IGridMergeStrategy {
         field: string,
         comparer: (prevRecord: any, record: any, field: string) => boolean = this.comparer,
         result: any[],
-        activeRowIndex?: number,
+        activeRowIndexes : number[],
         grid?: GridType
     ) {
         let prev = null;
@@ -44,7 +44,7 @@ export class DefaultMergeStrategy implements IGridMergeStrategy {
 
             const recData = result[index];
             // if this is active row or some special record type - add and skip merging
-            if (activeRowIndex === index || (grid && grid.isDetailRecord(rec) || grid.isGroupByRecord(rec) || grid.isChildGridRecord(rec))) {
+            if (activeRowIndexes.indexOf(index) != -1 || (grid && grid.isDetailRecord(rec) || grid.isGroupByRecord(rec) || grid.isChildGridRecord(rec))) {
                 if(!recData) {
                     result.push(rec);
                 }
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
@@ -4054,8 +4054,10 @@ export abstract class IgxGridBaseDirective implements GridType,
     }
 
 
-    protected get activeRowIndex() {
-        return this.navigation.activeNode?.row;
+    protected get activeRowIndexes(): number[] {
+        const activeRow = this.navigation.activeNode?.row;
+        const selectedCellIndexes = (this.selectionService.selection?.keys() as any)?.toArray();
+        return [activeRow, ...selectedCellIndexes];
     }
 
     protected get hasCellsToMerge() {
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html
@@ -63,7 +63,7 @@
                 | gridRowPinning:id:true:pipeTrigger
                 | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true
                 | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger:true
-                | gridCellMerge:visibleColumns:cellMergeMode:sortingExpressions:activeRowIndex:pipeTrigger; as pinnedData) {
+                | gridCellMerge:visibleColumns:cellMergeMode:sortingExpressions:activeRowIndexes:pipeTrigger; as pinnedData) {
                 @if (pinnedData.length > 0) {
                     <div #pinContainer
                         [ngClass]="{
@@ -90,7 +90,7 @@
         | gridDetails:hasDetails:expansionStates:pipeTrigger
         | gridAddRow:false:pipeTrigger
         | gridRowPinning:id:false:pipeTrigger
-        | gridCellMerge:visibleColumns:cellMergeMode:sortingExpressions:((hasPinnedRecords && isRowPinningToTop) ? activeRowIndex - pinnedRecordsCount : activeRowIndex):pipeTrigger"
+        | gridCellMerge:visibleColumns:cellMergeMode:sortingExpressions:activeRowIndexes:pipeTrigger"
             let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]="verticalScroll"
             [igxForContainerSize]="calcHeight"
             [igxForItemSize]="hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight"
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts
@@ -85,12 +85,12 @@ export class IgxGridCellMergePipe implements PipeTransform {
 
     constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { }
 
-    public transform(collection: any, visibleColumns: ColumnType[], mergeMode: GridCellMergeMode, sortExpr: ISortingExpression[], activeRowIndex: number, _pipeTrigger: number) {
+    public transform(collection: any, visibleColumns: ColumnType[], mergeMode: GridCellMergeMode, sortExpr: ISortingExpression[], activeRowIndexes: number[], _pipeTrigger: number) {
         const colsToMerge = this.grid.columnsToMerge;
         if (colsToMerge.length=== 0) {
             return collection;
         }
-        const result = DataUtil.merge(cloneArray(collection), colsToMerge, this.grid.mergeStrategy, activeRowIndex, this.grid);
+        const result = DataUtil.merge(cloneArray(collection), colsToMerge, this.grid.mergeStrategy, activeRowIndexes, this.grid);
         return result;
     }
 }
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html
@@ -46,7 +46,7 @@
                 | gridRowPinning:id:true:pipeTrigger
                 | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true
                 | gridSort:sortingExpressions:[]:sortStrategy:id:pipeTrigger:true
-                | gridCellMerge:visibleColumns:cellMergeMode:sortingExpressions:activeRowIndex:pipeTrigger; as pinnedData
+                | gridCellMerge:visibleColumns:cellMergeMode:sortingExpressions:activeRowIndexes:pipeTrigger; as pinnedData
             ) {
                 @if (pinnedData.length > 0) {
                     <div #pinContainer class="igx-grid__tr--pinned"
@@ -71,7 +71,7 @@
         | gridHierarchical:expansionStates:id:primaryKey:childLayoutKeys:pipeTrigger
         | gridAddRow:false:pipeTrigger
         | gridRowPinning:id:false:pipeTrigger
-        | gridCellMerge:visibleColumns:cellMergeMode:sortingExpressions:((hasPinnedRecords && isRowPinningToTop) ? activeRowIndex - pinnedRecordsCount : activeRowIndex):pipeTrigger"
+        | gridCellMerge:visibleColumns:cellMergeMode:sortingExpressions:activeRowIndexes:pipeTrigger"
             [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]="verticalScroll"
             [igxForContainerSize]="calcHeight" [igxForItemSize]="renderedRowHeight" [igxForTrackBy]="trackChanges"
             #verticalScrollContainer (chunkPreload)="dataLoading($event)" (dataChanging)="dataRebinding($event)" (dataChanged)="dataRebound($event)">
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html b/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:sortingExpressions:activeRowIndex:pipeTrigger; as pinnedData
+                | gridCellMerge:visibleColumns:cellMergeMode:sortingExpressions:activeRowIndexes: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:sortingExpressions:((hasPinnedRecords && isRowPinningToTop) ? activeRowIndex - pinnedRecordsCount : activeRowIndex):pipeTrigger"
+        | gridCellMerge:visibleColumns:cellMergeMode:sortingExpressions:activeRowIndexes:pipeTrigger"
             let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll'
             [igxForContainerSize]='calcHeight' [igxForItemSize]="renderedRowHeight" #verticalScrollContainer
             (dataChanging)="dataRebinding($event)" (dataChanged)="dataRebound($event)">
diff --git a/src/app/grid-cellMerging/grid-cellMerging.component.html b/src/app/grid-cellMerging/grid-cellMerging.component.html
@@ -1,5 +1,5 @@
 <h4 class="sample-title">Grid with cell merge</h4>
-<igx-grid [data]="data" width="800px" height="550px" [primaryKey]="'ProductID'" [moving]="true"
+<igx-grid [data]="data" width="800px" height="550px" [moving]="true"
     [cellMergeMode]="'always'" [rowSelection]="'single'">
     <igx-column field="ProductID" header="Product ID" width="200px">
         <ng-template igxCell let-cell="cell" let-val>

Original file line number	Diff line number	Diff line change
`@@ -91,11 +91,11 @@ export class DataUtil {`
`91`	`91`	`return grouping.groupBy(data, state, grid, groupsRecords, fullResult);`
`92`	`92`	`}`
`93`	`93`
`94`		`- public static merge<T>(data: T[], columns: ColumnType[], strategy: IGridMergeStrategy = new DefaultMergeStrategy(), activeRowIndex = -1, grid: GridType = null,`
	`94`	`+ public static merge<T>(data: T[], columns: ColumnType[], strategy: IGridMergeStrategy = new DefaultMergeStrategy(), activeRowIndexes = [], grid: GridType = null,`
`95`	`95`	`): any[] {`
`96`	`96`	`let result = [];`
`97`	`97`	`for (const col of columns) {`
`98`		`- strategy.merge(data, col.field, col.mergingComparer, result, activeRowIndex, grid);`
	`98`	`+ strategy.merge(data, col.field, col.mergingComparer, result, activeRowIndexes, grid);`
`99`	`99`	`}`
`100`	`100`	`return result;`
`101`	`101`	`}`
Original file line number	Diff line number	Diff line change
`@@ -4054,8 +4054,10 @@ export abstract class IgxGridBaseDirective implements GridType,`
`4054`	`4054`	`}`
`4055`	`4055`
`4056`	`4056`
`4057`		`- protected get activeRowIndex() {`
`4058`		`- return this.navigation.activeNode?.row;`
	`4057`	`+ protected get activeRowIndexes(): number[] {`
	`4058`	`+ const activeRow = this.navigation.activeNode?.row;`
	`4059`	`+ const selectedCellIndexes = (this.selectionService.selection?.keys() as any)?.toArray();`
	`4060`	`+ return [activeRow, ...selectedCellIndexes];`
`4059`	`4061`	`}`
`4060`	`4062`
`4061`	`4063`	`protected get hasCellsToMerge() {`
Original file line number	Diff line number	Diff line change
`@@ -85,12 +85,12 @@ export class IgxGridCellMergePipe implements PipeTransform {`
`85`	`85`
`86`	`86`	`constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { }`
`87`	`87`
`88`		`- public transform(collection: any, visibleColumns: ColumnType[], mergeMode: GridCellMergeMode, sortExpr: ISortingExpression[], activeRowIndex: number, _pipeTrigger: number) {`
	`88`	`+ public transform(collection: any, visibleColumns: ColumnType[], mergeMode: GridCellMergeMode, sortExpr: ISortingExpression[], activeRowIndexes: number[], _pipeTrigger: number) {`
`89`	`89`	`const colsToMerge = this.grid.columnsToMerge;`
`90`	`90`	`if (colsToMerge.length=== 0) {`
`91`	`91`	`return collection;`
`92`	`92`	`}`
`93`		`- const result = DataUtil.merge(cloneArray(collection), colsToMerge, this.grid.mergeStrategy, activeRowIndex, this.grid);`
	`93`	`+ const result = DataUtil.merge(cloneArray(collection), colsToMerge, this.grid.mergeStrategy, activeRowIndexes, this.grid);`
`94`	`94`	`return result;`
`95`	`95`	`}`
`96`	`96`	`}`