chore(*): Fix chip displaying when in merged cell.

Author: MKirova

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

@@ -162,7 +162,7 @@
         [lastSearchInfo]="grid.lastSearchInfo"
         [active]="isCellActive(col.visibleIndex)"
         [cellSelectionMode]="grid.cellSelection"
-        [displayPinnedChip]="shouldDisplayPinnedChip(col.visibleIndex)"
+        [displayPinnedChip]="shouldDisplayPinnedChip(col)"
         #cell>
     </igx-grid-cell>
 </ng-template>
@@ -194,7 +194,7 @@
         [lastSearchInfo]="grid.lastSearchInfo"
         [active]="isCellActive(col.visibleIndex)"
         [cellSelectionMode]="grid.cellSelection"
-        [displayPinnedChip]="shouldDisplayPinnedChip(col.visibleIndex)"
+        [displayPinnedChip]="shouldDisplayPinnedChip(col)"
         #cell>
     </igx-expandable-grid-cell>
 </ng-template>
@@ -226,7 +226,7 @@
         [lastSearchInfo]="grid.lastSearchInfo"
         [active]="isCellActive(col.visibleIndex)"
         [cellSelectionMode]="grid.cellSelection"
-        [displayPinnedChip]="shouldDisplayPinnedChip(col.visibleIndex)"
+        [displayPinnedChip]="shouldDisplayPinnedChip(col)"
         #cell>
     </igx-grid-cell>
 </ng-template>
@@ -258,7 +258,7 @@
         [lastSearchInfo]="grid.lastSearchInfo"
         [active]="isCellActive(col.visibleIndex)"
         [cellSelectionMode]="grid.cellSelection"
-        [displayPinnedChip]="shouldDisplayPinnedChip(col.visibleIndex)"
+        [displayPinnedChip]="shouldDisplayPinnedChip(col)"
         #cell>
     </igx-expandable-grid-cell>
 </ng-template>

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

@@ -114,7 +114,7 @@
                 [cellValidationErrorTemplate]="col.errorTemplate"
                 [lastSearchInfo]="grid.lastSearchInfo"
                 [cellSelectionMode]="grid.cellSelection"
-                [displayPinnedChip]="shouldDisplayPinnedChip(col.visibleIndex)">
+                [displayPinnedChip]="shouldDisplayPinnedChip(col)">
             </igx-hierarchical-grid-cell>
         }
     </ng-template>
@@ -148,6 +148,6 @@
     [cellValidationErrorTemplate]="col.errorTemplate"
     [lastSearchInfo]="grid.lastSearchInfo"
     [cellSelectionMode]="grid.cellSelection"
-    [displayPinnedChip]="shouldDisplayPinnedChip(col.visibleIndex)">
+    [displayPinnedChip]="shouldDisplayPinnedChip(col)">
 </igx-hierarchical-grid-cell>
 </ng-template>

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

@@ -16,7 +16,7 @@
         [style.flex-basis]="col.resolvedWidth" [width]="col.getCellWidth()" [visibleColumnIndex]="col.visibleIndex"
         [value]="pivotAggregationData[col.field] | dataMapper:col.field:grid.pipeTrigger:pivotAggregationData[col.field]:col.hasNestedPath"
         [cellTemplate]="col.bodyTemplate" [lastSearchInfo]="grid.lastSearchInfo"
-        [cellSelectionMode]="grid.cellSelection" [displayPinnedChip]="shouldDisplayPinnedChip(col.visibleIndex)"
+        [cellSelectionMode]="grid.cellSelection" [displayPinnedChip]="shouldDisplayPinnedChip(col)"
         (pointerdown)="grid.navigation.focusOutRowHeader($event)">
     </igx-grid-cell>
 </ng-template>

projects/igniteui-angular/src/lib/grids/row.directive.ts

@@ -578,8 +578,8 @@ export class IgxRowDirective implements DoCheck, AfterViewInit, OnDestroy {
     /**
      * @hidden
      */
-    public shouldDisplayPinnedChip(visibleColumnIndex: number): boolean {
-        return this.pinned && this.disabled && visibleColumnIndex === 0;
+    public shouldDisplayPinnedChip(col: ColumnType): boolean {
+        return this.pinned && this.disabled && col.visibleIndex === 0 && !this.metaData?.cellMergeMeta?.get(col.field)?.root;
     }
 
     /**

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

@@ -105,7 +105,7 @@
         [lastSearchInfo]="grid.lastSearchInfo"
         [active]="isCellActive(col.visibleIndex)"
         [cellSelectionMode]="grid.cellSelection"
-        [displayPinnedChip]="shouldDisplayPinnedChip(col.visibleIndex)"
+        [displayPinnedChip]="shouldDisplayPinnedChip(col)"
         #treeCell>
     </igx-grid-cell>
 </ng-template>
@@ -142,7 +142,7 @@
         [lastSearchInfo]="grid.lastSearchInfo"
         [active]="isCellActive(col.visibleIndex)"
         [cellSelectionMode]="grid.cellSelection"
-        [displayPinnedChip]="shouldDisplayPinnedChip(col.visibleIndex)"
+        [displayPinnedChip]="shouldDisplayPinnedChip(col)"
         #treeCell>
     </igx-tree-grid-cell>
 </ng-template>

src/app/grid-cellMerging/grid-cellMerging.component.html

@@ -59,7 +59,6 @@ <h4 class="sample-title">Hierarchical grid with cell merge</h4>
         </igx-column>
         <igx-column field="ShipCity" width="200px" [merge]="true" sortable="true">
         </igx-column>
-
     </igx-row-island>
 </igx-hierarchical-grid>
 

src/app/grid-cellMerging/grid-cellMerging.component.ts

@@ -50,6 +50,8 @@ export class GridCellMergingComponent {
     public hierarchicalData = HIERARCHICAL_DATA.concat(HIERARCHICAL_DATA).concat(HIERARCHICAL_DATA);
     public treeData = HIERARCHICAL_SAMPLE_DATA;
     public treeGridMergeStrategy =  new ByLevelTreeGridMergeStrategy();
+    public alignBottom = { alignItems: "flex-end", paddingBottom: "12px"};
+    public alignTop= { alignItems: "flex-start", paddingTop: "12px" };
     public data = [{
         ProductID: 1,
         ProductName: 'Chai',