Implement Row Pinning for igxHierarchicalGrid.

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss

@@ -358,6 +358,10 @@
         @extend %igx-grid__td--editing !optional;
     }
 
+    @include e(tr, $m: disabled) {
+        @extend %igx-grid__tr--disabled !optional;
+    }
+
     @include e(td, $m: number) {
         @extend %grid-cell-number !optional;
     }
@@ -392,6 +396,10 @@
         @extend %grid-cell--pinned--column-selected !optional;
     }
 
+    @include e(td, $m: pinned-chip) {
+        @extend %grid-cell--pinned-chip !optional;
+    }
+
     @include e(td-text) {
         @extend %grid-cell-text !optional;
     }
@@ -558,6 +566,11 @@
         @extend %igx-grid__hierarchical-expander !optional;
     }
 
+    @include e(hierarchical-expander, $m: empty) {
+        @extend %igx-grid__hierarchical-expander !optional;
+        @extend %igx-grid__hierarchical-expander--empty !optional;
+    }
+
     @include e(hierarchical-expander, $m: header) {
         @extend %igx-grid__hierarchical-expander--header !optional;
     }
@@ -673,6 +686,11 @@
             @extend %igx-grid__hierarchical-expander--cosy !optional;
         }
 
+        @include e(hierarchical-expander, $m: empty) {
+            @extend %igx-grid__hierarchical-expander--cosy !optional;
+            @extend %igx-grid__hierarchical-expander--empty !optional;
+        }
+
         @include e(hierarchical-expander, $m: push) {
             @extend %igx-grid__hierarchical-expander--push--cosy !optional;
         }
@@ -772,6 +790,11 @@
         @include e(hierarchical-expander) {
             @extend %igx-grid__hierarchical-expander--compact !optional;
         }
+
+        @include e(hierarchical-expander, $m: empty) {
+            @extend %igx-grid__hierarchical-expander--compact !optional;
+            @extend %igx-grid__hierarchical-expander--empty !optional;
+        }
 
         @include e(hierarchical-expander, $m: push) {
             @extend %igx-grid__hierarchical-expander--push--compact !optional;

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -47,7 +47,8 @@
 /// @param {Color} $cell-selected-background [null] - The selected cell background color.
 /// @param {Color} $cell-selected-text-color [null] - The selected cell text color.
 /// @param {Color} $cell-editing-background [null] - The background color of the cell being edited.
-/// @param {Color} $cell-edited-value-color [null] - The text color of a sell that has been edited.
+/// @param {Color} $cell-edited-value-color [null] - The text color of a cell that has been edited.
+/// @param {Color} $cell-disabled-color [null] - The text color of a disabled cell.
 ///
 /// @param {Color} $edit-mode-color [null] - The color applied around the row when in editing mode.
 /// @param {Color} $edited-row-indicator [null] - The color applied to the edited row indicator line.
@@ -155,6 +156,7 @@
     $cell-selected-text-color: null,
     $cell-editing-background: null,
     $cell-edited-value-color: null,
+    $cell-disabled-color: null,
 
     $edit-mode-color: null,
     $edited-row-indicator: null,
@@ -479,6 +481,8 @@
         edited-row-indicator: $edited-row-indicator,
         cell-edited-value-color: $cell-edited-value-color,
 
+        cell-disabled-color: $cell-disabled-color,
+
         resize-line-color: $resize-line-color,
 
         drop-indicator-color: $drop-indicator-color,
@@ -1316,6 +1320,12 @@
         }
     }
 
+    %igx-grid__tr--disabled {
+        %grid-cell-text {
+            color: --var($theme, 'cell-disabled-color');
+        }
+    }
+
     %igx-grid__td--editing {
         background: --var($theme, 'cell-editing-background') !important;
         box-shadow: inset 0 0 0 rem(2px) --var($theme, 'edit-mode-color');
@@ -1371,6 +1381,9 @@
         }
     }
 
+    %grid-cell--pinned-chip {
+        margin-right: rem(4px);
+    }
 
     %grid-cell-header {
         flex-flow: row nowrap;
@@ -2459,6 +2472,11 @@
         @include if-rtl() {
             transform: scaleX(-1);
         }
+
+        &--empty {
+            cursor: default;
+            pointer-events: none;
+        }
     }
 
     %igx-grid__hierarchical-expander--cosy {

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid.scss

@@ -45,6 +45,7 @@
 /// @prop {Map} edit-mode-color [igx-color: ('secondary', 500)] - The text color in edit mode.
 /// @prop {Map} edited-row-indicator [igx-color: ('grays', 400)] - The indicator's color of edited row.
 /// @prop {Map} cell-edited-value-color [igx-color: ('grays', 600)] - The color of cell edited value.
+/// @prop {Map} cell-disabled-color [igx-color: ('grays', 600)] - The text color of a disabled cell.
 /// @prop {Map} resize-line-color [igx-color: ('secondary', 500)] - The table header resize line color.
 /// @prop {Map} drop-indicator-color [igx-color: ('secondary', 500)] - The color of the drop indicator.
 /// @prop {Map} grouparea-background [igx-color: ('grays', 100), hexrgba: #fff] - The grid group area background color.
@@ -221,6 +222,10 @@ $_light-grid: extend(
             igx-color: ('grays', 600)
         ),
 
+        cell-disabled-color: (
+            igx-color: ('grays', 400)
+        ),
+
         resize-line-color: (
             igx-color: ('secondary', 500)
         ),

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

@@ -1,4 +1,5 @@
 <ng-template #defaultCell>
+    <igx-chip *ngIf="displayPinnedChip" class="igx-grid__td--pinned-chip" [disabled]="true" [displayDensity]="'compact'">Pinned</igx-chip>
     <div igxTextHighlight style="pointer-events: none" [cssClass]="highlightClass" [activeCssClass]="activeHighlightClass" [groupName]="gridID"
         [value]="formatter ? formatter(value) : column.dataType === 'number' ? (value | igxdecimal: grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value"
         [row]="rowData" [column]="this.column.field" [containerClass]="'igx-grid__td-text'"

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

@@ -382,7 +382,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
      */
     @HostBinding('attr.aria-readonly')
     get readonly(): boolean {
-        return !this.column.editable;
+        return !this.editable;
     }
 
     get gridRowSpan(): number {
@@ -524,7 +524,14 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
      * Returns whether the cell is editable.
      */
     get editable(): boolean {
-        return this.column.editable;
+        return this.column.editable && !this.row.disabled;
+    }
+
+    /**
+     * @hidden
+     */
+    public get displayPinnedChip() {
+        return this.row.pinned && this.row.disabled && this.visibleColumnIndex === 0 && !(this.column as any).cellTemplate;
     }
 
     /**
@@ -1044,7 +1051,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
         if (this.isInCompositionMode) {
             return;
         }
-        if (this.column.editable && !this.row.deleted) {
+        if (this.editable && !this.row.deleted) {
             if (this.editMode) {
                 this.grid.endEdit(true);
                 this.nativeElement.focus();

projects/igniteui-angular/src/lib/grids/common/row.interface.ts

@@ -5,10 +5,12 @@ export interface RowType {
     checkboxElement: IgxCheckboxComponent;
     rowID: any;
     rowData: any;
+    disabled: boolean;
     rowSelectable: boolean;
     index: number;
     gridID: string;
     added: boolean;
+    pinned: boolean;
     deleted: boolean;
     selected: boolean;
     focused: boolean;

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

@@ -5148,6 +5148,17 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         return this.verticalScrollContainer.igxForOf;
     }
 
+    /**
+     * Returns the currently transformed paged/filtered/sorted/grouped pinned data, displayed in the grid.
+     * @example
+     * ```typescript
+     *      const pinnedDataView = this.grid.pinnedDataView;
+     * ```
+     */
+    get pinnedDataView(): any[] {
+        return this.pinnedRows.map(row => row.rowData);
+    }
+
     /**
      * Get current selection state.
      * @example
@@ -5353,8 +5364,8 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
                 columnsArray.forEach((col) => {
                     if (col) {
                         const key = headers ? col.header || col.field : col.field;
-                        record[key] = formatters && col.formatter ? col.formatter(source[row][col.field])
-                            : source[row][col.field];
+                        const value = source[row].ghostRecord ? source[row].recordRef[col.field] : source[row][col.field];
+                        record[key] = formatters && col.formatter ? col.formatter(value) : value;
                     }
                 });
             }
@@ -5389,7 +5400,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      * If `headers` is enabled, it will use the column header (if any) instead of the column field.
      */
     public getSelectedData(formatters = false, headers = false) {
-        const source = this.dataView;
+        const source = this.isRowPinningToTop ? [...this.pinnedDataView, ...this.dataView] : [...this.dataView, ...this.pinnedDataView];
         return this.extractDataFromSelection(source, formatters, headers);
     }
 

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

@@ -76,7 +76,7 @@
         <igx-checkbox
             [checked]="selected"
             [readonly]="true"
-            [disabled]="deleted"
+            [disabled]="disabled || deleted"
             disableRipple="true"
             [disableTransitions]="grid.disableTransitions"
             [aria-label]="rowCheckboxAriaLabel">

projects/igniteui-angular/src/lib/grids/grid/row-pinning.spec.ts

@@ -15,6 +15,7 @@ import { IgxGridTransaction } from '../tree-grid';
 import { IgxTransactionService } from '../../services';
 import { GridSummaryFunctions } from '../../test-utils/grid-functions.spec';
 import { IgxStringFilteringOperand } from '../../data-operations/filtering-condition';
+import { IgxPaginatorComponent } from '../../paginator/paginator.component';
 
 describe('Row Pinning #grid', () => {
     const FIXED_ROW_CONTAINER = '.igx-grid__tr--pinned ';
@@ -401,26 +402,40 @@ describe('Row Pinning #grid', () => {
             grid.paging = true;
             grid.perPage = 5;
             fix.detectChanges();
-            let row = grid.getRowByIndex(1);
-            row.pin();
+            const paginator = fix.debugElement.query(By.directive(IgxPaginatorComponent));
+            expect(paginator.componentInstance.totalPages).toEqual(6);
+
+            grid.getRowByIndex(1).pin();
             fix.detectChanges();
 
             expect(grid.pinnedRows.length).toBe(1);
             let pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
             expect(pinRowContainer.length).toBe(1);
-
             expect(grid.dataView.length).toBe(4);
+            expect(paginator.componentInstance.totalPages).toEqual(6);
+
+            grid.getRowByIndex(3).pin();
+            fix.detectChanges();
+
+            expect(grid.pinnedRows.length).toBe(2);
+            pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
+            expect(pinRowContainer.length).toBe(1);
+            expect(grid.dataView.length).toBe(3);
+            expect(paginator.componentInstance.totalPages).toEqual(5);
 
             // unpin
-            row = grid.getRowByIndex(0);
-            row.unpin();
+            grid.getRowByIndex(0).unpin();
+            fix.detectChanges();
+
+            grid.getRowByIndex(0).unpin();
             fix.detectChanges();
 
             expect(grid.pinnedRows.length).toBe(0);
             pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
             expect(pinRowContainer.length).toBe(0);
 
             expect(grid.dataView.length).toBe(5);
+            expect(paginator.componentInstance.totalPages).toEqual(6);
         });
 
         it('should apply sorting to both pinned and unpinned rows.', () => {

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

@@ -1,7 +1,7 @@
 import { IgxGridCellComponent } from '../cell.component';
 import { GridBaseAPIService } from '../api.service';
 import { ChangeDetectorRef, ElementRef, ChangeDetectionStrategy, Component,
-     OnInit, HostListener, NgZone } from '@angular/core';
+     OnInit, HostListener, NgZone, HostBinding } from '@angular/core';
 import { IgxHierarchicalGridComponent } from './hierarchical-grid.component';
 import { IgxGridSelectionService, IgxGridCRUDService } from '../selection/selection.service';
 import { HammerGesturesManager } from '../../core/touch';
@@ -11,11 +11,10 @@ import { PlatformUtil } from '../../core/utils';
     changeDetection: ChangeDetectionStrategy.OnPush,
     preserveWhitespaces: false,
     selector: 'igx-hierarchical-grid-cell',
-    templateUrl: './../cell.component.html',
+    templateUrl: '../cell.component.html',
     providers: [HammerGesturesManager]
 })
 export class IgxHierarchicalGridCellComponent extends IgxGridCellComponent implements OnInit {
-
     // protected hSelection;
     protected _rootGrid;