Merge pull request #7244 from IgniteUI/mkirova/pinned-chip-refactor

fix(igxGrid): Refactor displayPinnedChip to be an Input set by the ro…

Author: ChronosSF

projects/igniteui-angular/src/lib/grids/cell.component.ts

@@ -526,10 +526,10 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
     /**
      * @hidden
      */
+    @Input()
     @HostBinding('class.igx-grid__td--row-pinned-first')
-    public get displayPinnedChip() {
-        return this.row.pinned && this.row.disabled && this.visibleColumnIndex === 0;
-    }
+    public displayPinnedChip = false;
+
 
     @ViewChild('defaultCell', { read: TemplateRef, static: true })
     protected defaultCellTemplate: TemplateRef<any>;

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

@@ -110,7 +110,9 @@
         [cellTemplate]="col.bodyTemplate"
         [lastSearchInfo]="grid.lastSearchInfo"
         [active]="isCellActive(col.visibleIndex)"
-        [cellSelectionMode]="grid.cellSelection" #cell>
+        [cellSelectionMode]="grid.cellSelection"
+        [displayPinnedChip]="shouldDisplayPinnedChip(col.visibleIndex)"
+        #cell>
     </igx-grid-cell>
 </ng-template>
 
@@ -138,7 +140,9 @@
         [cellTemplate]="col.bodyTemplate"
         [lastSearchInfo]="grid.lastSearchInfo"
         [active]="isCellActive(col.visibleIndex)"
-        [cellSelectionMode]="grid.cellSelection" #cell>
+        [cellSelectionMode]="grid.cellSelection"
+        [displayPinnedChip]="shouldDisplayPinnedChip(col.visibleIndex)"
+        #cell>
     </igx-expandable-grid-cell>
 </ng-template>
 
@@ -170,7 +174,9 @@
         [cellTemplate]="col.bodyTemplate"
         [lastSearchInfo]="grid.lastSearchInfo"
         [active]="isCellActive(col.visibleIndex)"
-        [cellSelectionMode]="grid.cellSelection" #cell>
+        [cellSelectionMode]="grid.cellSelection"
+        [displayPinnedChip]="shouldDisplayPinnedChip(col.visibleIndex)"
+        #cell>
     </igx-grid-cell>
 </ng-template>
 
@@ -202,6 +208,8 @@
         [cellTemplate]="col.bodyTemplate"
         [lastSearchInfo]="grid.lastSearchInfo"
         [active]="isCellActive(col.visibleIndex)"
-        [cellSelectionMode]="grid.cellSelection" #cell>
+        [cellSelectionMode]="grid.cellSelection"
+        [displayPinnedChip]="shouldDisplayPinnedChip(col.visibleIndex)"
+        #cell>
     </igx-expandable-grid-cell>
 </ng-template>

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

@@ -58,7 +58,8 @@
         [value]="rowData[col.field]"
         [cellTemplate]="col.bodyTemplate"
         [lastSearchInfo]="grid.lastSearchInfo"
-        [cellSelectionMode]="grid.cellSelection">
+        [cellSelectionMode]="grid.cellSelection"
+        [displayPinnedChip]="shouldDisplayPinnedChip(col.visibleIndex)">
     </igx-hierarchical-grid-cell>
 </ng-template>
 
@@ -104,6 +105,7 @@
         [value]="rowData[col.field]"
         [cellTemplate]="col.bodyTemplate"
         [lastSearchInfo]="grid.lastSearchInfo"
-        [cellSelectionMode]="grid.cellSelection">
+        [cellSelectionMode]="grid.cellSelection"
+        [displayPinnedChip]="shouldDisplayPinnedChip(col.visibleIndex)">
     </igx-hierarchical-grid-cell>
 </ng-template>

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

@@ -434,6 +434,13 @@ export class IgxRowDirective<T extends IgxGridBaseDirective & GridType> implemen
         this.cdr.markForCheck();
     }
 
+    /**
+     * @hidden
+     */
+    public shouldDisplayPinnedChip(visibleColumnIndex: number): boolean {
+        return this.pinned && this.disabled && visibleColumnIndex === 0;
+    }
+
     /**
      * @hidden
      */

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

@@ -36,7 +36,9 @@
             [cellTemplate]="col.bodyTemplate"
             [lastSearchInfo]="grid.lastSearchInfo"
             [active]="isCellActive(col.visibleIndex)"
-            [cellSelectionMode]="grid.cellSelection"  #treeCell>
+            [cellSelectionMode]="grid.cellSelection"
+            [displayPinnedChip]="shouldDisplayPinnedChip(col.visibleIndex)"
+            #treeCell>
         </igx-grid-cell>
     </ng-template>
     <ng-template #treeCellTemplate>
@@ -64,7 +66,9 @@
             [cellTemplate]="col.bodyTemplate"
             [lastSearchInfo]="grid.lastSearchInfo"
             [active]="isCellActive(col.visibleIndex)"
-            [cellSelectionMode]="grid.cellSelection"  #treeCell>
+            [cellSelectionMode]="grid.cellSelection"
+            [displayPinnedChip]="shouldDisplayPinnedChip(col.visibleIndex)"
+            #treeCell>
         </igx-tree-grid-cell>
     </ng-template>
     <ng-container *ngTemplateOutlet="col.visibleIndex === 0 ? treeCellTemplate : cellTemplate"></ng-container>
@@ -112,7 +116,9 @@
                 [cellTemplate]="col.bodyTemplate"
                 [lastSearchInfo]="grid.lastSearchInfo"
                 [active]="isCellActive(col.visibleIndex)"
-                [cellSelectionMode]="grid.cellSelection" #treeCell>
+                [cellSelectionMode]="grid.cellSelection"
+                [displayPinnedChip]="shouldDisplayPinnedChip(col.visibleIndex)"
+                #treeCell>
             </igx-grid-cell>
             </ng-template>
         <ng-template #treeCellTemplate>
@@ -142,7 +148,9 @@
                 [cellTemplate]="col.bodyTemplate"
                 [lastSearchInfo]="grid.lastSearchInfo"
                 [active]="isCellActive(col.visibleIndex)"
-                [cellSelectionMode]="grid.cellSelection"  #treeCell>
+                [cellSelectionMode]="grid.cellSelection"
+                [displayPinnedChip]="shouldDisplayPinnedChip(col.visibleIndex)"
+                #treeCell>
             </igx-tree-grid-cell>
         </ng-template>
         <ng-container *ngTemplateOutlet="col.visibleIndex === 0 ? treeCellTemplate : cellTemplate"></ng-container>