chore(*): Adjust indexes when there are pinned rows to top.

MKirova · MKirova · commit 229bcd149c7b · 2025-07-28T16:04:38.000+03:00
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
@@ -3697,7 +3697,7 @@ export abstract class IgxGridBaseDirective implements GridType,
     }
 
     protected getMergeCellOffset(rowData) {
-        const index = rowData.index;
+        const index = rowData.dataIndex;
         let offset = this.verticalScrollContainer.scrollPosition - this.verticalScrollContainer.getScrollForIndex(index);
         if (this.hasPinnedRecords && this.isRowPinningToTop) {
             offset -= this.pinnedRowHeight;
@@ -3892,7 +3892,8 @@ export abstract class IgxGridBaseDirective implements GridType,
                     if (rec.cellMergeMeta &&
                         // index + maxRowSpan is within view
                         startIndex < (index + Math.max(...rec.cellMergeMeta.values().toArray().map(x => x.rowSpan)))) {
-                            data.push({record: rec, index: index });
+                            const visibleIndex = this.isRowPinningToTop ? index + this.pinnedRecordsCount : index;
+                            data.push({record: rec, index: visibleIndex, dataIndex: index });
                         }
                 }
                 this._mergedDataInView = data;
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:activeRowIndexes:pipeTrigger; as pinnedData) {
+                | gridCellMerge:visibleColumns:cellMergeMode:sortingExpressions:activeRowIndexes:true: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:activeRowIndexes:pipeTrigger"
+        | gridCellMerge:visibleColumns:cellMergeMode:sortingExpressions:activeRowIndexes:false: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,11 +85,14 @@ export class IgxGridCellMergePipe implements PipeTransform {
 
     constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { }
 
-    public transform(collection: any, visibleColumns: ColumnType[], mergeMode: GridCellMergeMode, sortExpr: ISortingExpression[], activeRowIndexes: number[], _pipeTrigger: number) {
+    public transform(collection: any, visibleColumns: ColumnType[], mergeMode: GridCellMergeMode, sortExpr: ISortingExpression[], activeRowIndexes: number[], pinned: boolean, _pipeTrigger: number) {
         const colsToMerge = this.grid.columnsToMerge;
-        if (colsToMerge.length=== 0) {
+        if (colsToMerge.length === 0) {
             return collection;
         }
+        if (!pinned && this.grid.isPinningToStart) {
+            activeRowIndexes = activeRowIndexes.map(x => x - this.grid.pinnedRecordsCount);
+        }
         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:activeRowIndexes:pipeTrigger; as pinnedData
+                | gridCellMerge:visibleColumns:cellMergeMode:sortingExpressions:activeRowIndexes:true: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:activeRowIndexes:pipeTrigger"
+        | gridCellMerge:visibleColumns:cellMergeMode:sortingExpressions:activeRowIndexes:false: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:activeRowIndexes:pipeTrigger; as pinnedData
+                | gridCellMerge:visibleColumns:cellMergeMode: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:sortingExpressions:activeRowIndexes:pipeTrigger"
+        | gridCellMerge:visibleColumns:cellMergeMode:sortingExpressions:activeRowIndexes:false: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
@@ -45,7 +45,10 @@ <h4 class="sample-title">Grid with cell merge</h4>
 </div>
 <igx-grid [data]="data" width="800px" height="550px" [moving]="true" #grid1
     [cellMergeMode]="'always'" [rowSelection]="'single'">
-    <igx-column field="OrderID" header="Order ID" [hidden]="true" >
+    <igx-column field="OrderID" header="Order ID">
+        <ng-template igxCell let-cell="cell" let-val>
+            Value: {{val}},Index: {{cell.row.index}}
+          </ng-template>
     </igx-column>
     <igx-column field="ShipCountry" header="Ship Country" width="200px" [merge]="true" sortable="true">
     </igx-column>
@@ -69,9 +72,9 @@ <h4 class="sample-title">Grid with cell merge</h4>
     </igx-column>
     <igx-paginator [perPage]="20">
     </igx-paginator>
-    <!-- <igx-action-strip>
+    <igx-action-strip>
         <igx-grid-pinning-actions></igx-grid-pinning-actions>
-    </igx-action-strip> -->
+    </igx-action-strip>
     <igx-grid-toolbar>
         <igx-grid-toolbar-actions>
             <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
diff --git a/src/app/grid-cellMerging/grid-cellMerging.component.ts b/src/app/grid-cellMerging/grid-cellMerging.component.ts
@@ -38,8 +38,8 @@ import { INVOICE_DATA } from '../shared/invoiceData';
         IgxColumnComponent,
         IgxGridComponent,
         IgxPaginatorComponent,
-        // IgxActionStripComponent,
-        // IgxGridPinningActionsComponent,
+        IgxActionStripComponent,
+        IgxGridPinningActionsComponent,
         IgxGridToolbarComponent,
         IgxGridToolbarActionsComponent,
         IgxGridToolbarPinningComponent,
@@ -51,7 +51,8 @@ import { INVOICE_DATA } from '../shared/invoiceData';
         IgxPrefixDirective,
         IgxSuffixDirective,
         IgxIconComponent,
-        IgxInputDirective
+        IgxInputDirective,
+        IgxCellTemplateDirective
     ]
 })
 export class GridCellMergingComponent {

Original file line number	Diff line number	Diff line change
`@@ -3697,7 +3697,7 @@ export abstract class IgxGridBaseDirective implements GridType,`
`3697`	`3697`	`}`
`3698`	`3698`
`3699`	`3699`	`protected getMergeCellOffset(rowData) {`
`3700`		`- const index = rowData.index;`
	`3700`	`+ const index = rowData.dataIndex;`
`3701`	`3701`	`let offset = this.verticalScrollContainer.scrollPosition - this.verticalScrollContainer.getScrollForIndex(index);`
`3702`	`3702`	`if (this.hasPinnedRecords && this.isRowPinningToTop) {`
`3703`	`3703`	`offset -= this.pinnedRowHeight;`
`@@ -3892,7 +3892,8 @@ export abstract class IgxGridBaseDirective implements GridType,`
`3892`	`3892`	`if (rec.cellMergeMeta &&`
`3893`	`3893`	`// index + maxRowSpan is within view`
`3894`	`3894`	`startIndex < (index + Math.max(...rec.cellMergeMeta.values().toArray().map(x => x.rowSpan)))) {`
`3895`		`- data.push({record: rec, index: index });`
	`3895`	`+ const visibleIndex = this.isRowPinningToTop ? index + this.pinnedRecordsCount : index;`
	`3896`	`+ data.push({record: rec, index: visibleIndex, dataIndex: index });`
`3896`	`3897`	`}`
`3897`	`3898`	`}`
`3898`	`3899`	`this._mergedDataInView = data;`