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: ghost-copy) {
+        @extend %igx-grid__tr--ghost-copy !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;
     }
@@ -553,6 +561,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;
     }

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-ghost-copy-color [null] - The text color of a cell that is ghost of another row.
 ///
 /// @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-ghost-copy-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-ghost-copy-color: $cell-ghost-copy-color,
+
         resize-line-color: $resize-line-color,
 
         drop-indicator-color: $drop-indicator-color,
@@ -1316,6 +1320,12 @@
         }
     }
 
+    %igx-grid__tr--ghost-copy {
+        %grid-cell-text {
+            color: --var($theme, 'cell-ghost-copy-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;
@@ -2454,6 +2467,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-ghost-copy-color [igx-color: ('grays', 600)] - The color of cell ghost text.
 /// @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-ghost-copy-color: (
+            igx-color: ('grays', 400)
+        ),
+
         resize-line-color: (
             igx-color: ('secondary', 500)
         ),

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

@@ -524,7 +524,7 @@ 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.editable === undefined || this.row.editable)) || this.row.editable;
     }
 
     /**

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

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

projects/igniteui-angular/src/lib/grids/grid-mrl-navigation.service.ts

@@ -219,7 +219,7 @@ export class IgxGridMRLNavigationService extends IgxGridNavigationService {
             } else if (prevRow) {
                 prevRow.nativeElement.focus({ preventScroll: true });
             } else {
-                const prevElem = this.getRowByIndex(rowIndex, '') as any;
+                const prevElem = this.getRowByIndex(rowIndex) as any;
                 prevElem.focus({ preventScroll: true });
             }
         };
@@ -264,7 +264,7 @@ export class IgxGridMRLNavigationService extends IgxGridNavigationService {
             } else if (nextRow) {
                 nextRow.nativeElement.focus({ preventScroll: true });
             } else {
-                const nextElem = this.getRowByIndex(rowIndex, '') as any;
+                const nextElem = this.getRowByIndex(rowIndex) as any;
                 nextElem.focus({ preventScroll: true });
             }
         };

projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts

@@ -323,8 +323,7 @@ export class IgxGridNavigationService {
             this.grid.verticalScrollContainer.onChunkLoad
                 .pipe(first())
                 .subscribe(() => {
-                    const tag = rowElement.tagName.toLowerCase();
-                    rowElement = this.getRowByIndex(currentRowIndex, tag);
+                    rowElement = this.getRowByIndex(currentRowIndex);
                     this.focusPreviousElement(rowElement, visibleColumnIndex);
                 });
         } else {
@@ -594,7 +593,7 @@ export class IgxGridNavigationService {
         if (visibleColumnIndex === 0 && prevIsDetailRow) {
             let target = currentRowEl.previousElementSibling;
             const applyFocusFunc = () => {
-                    target = this.getRowByIndex(rowIndex - 1, '');
+                    target = this.getRowByIndex(rowIndex - 1);
                     target.focus({ preventScroll: true });
             };
             if (target) {
@@ -628,7 +627,7 @@ export class IgxGridNavigationService {
 
     public shouldPerformVerticalScroll(targetRowIndex: number, visibleColumnIndex: number): boolean {
         const containerTopOffset = parseInt(this.verticalDisplayContainerElement.style.top, 10);
-        const targetRow = this.getRowByIndex(targetRowIndex, '') as any;
+        const targetRow = this.getRowByIndex(targetRowIndex) as any;
         const rowHeight = this.grid.verticalScrollContainer.getSizeAt(targetRowIndex);
         const containerHeight = this.grid.calcHeight ? Math.ceil(this.grid.calcHeight) : 0;
         const targetEndTopOffset = targetRow ? targetRow.offsetTop + rowHeight + containerTopOffset :
@@ -672,10 +671,10 @@ export class IgxGridNavigationService {
         return this.grid;
     }
 
-    protected getRowByIndex(index, selector = this.getRowSelector()) {
+    protected getRowByIndex(index) {
         const gridTag = this.grid.nativeElement.tagName.toLocaleLowerCase();
         const row = Array.from(this.grid.tbody.nativeElement.querySelectorAll(
-            `${selector}[data-rowindex="${index}"]`))
+            `[data-rowindex="${index}"]`))
             .find(x => this.getClosestElemByTag(x, gridTag).getAttribute('id') === this.grid.id);
             return row;
         }

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

@@ -0,0 +1,31 @@
+<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'" class="igx-grid__td-text">
+        {{ formatter ? formatter(value) : column.dataType === 'number' ? (value | igxdecimal: grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value }}
+    </div>
+</ng-template>
+<ng-template #inlineEditor let-cell="cell">
+    <ng-container *ngIf="column.dataType === 'string'">
+        <igx-input-group displayDensity="compact">
+            <input igxInput [value]="editValue" (input)="editValue = $event.target.value" [igxFocus]="focused" />
+        </igx-input-group>
+    </ng-container>
+    <ng-container *ngIf="column.dataType === 'number'">
+        <igx-input-group displayDensity="compact">
+            <input igxInput [value]="editValue" (input)="editValue = $event.target.value" [igxFocus]="focused" type="number">
+        </igx-input-group>
+    </ng-container>
+    <ng-container *ngIf="column.dataType === 'boolean'">
+        <igx-checkbox (change)="editValue = $event.checked" [value]="editValue" [checked]="editValue"
+            [igxFocus]="focused" [disableRipple]="true"></igx-checkbox>
+    </ng-container>
+    <ng-container *ngIf="column.dataType === 'date'">
+        <igx-date-picker [style.width.%]="100" [outlet]="grid.outletDirective" mode="dropdown"
+            [locale]="grid.locale" [(value)]="editValue" [igxFocus]="focused" [labelVisibility]="false">
+        </igx-date-picker>
+    </ng-container>
+</ng-template>
+<ng-container *ngTemplateOutlet="template; context: context">
+</ng-container>

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

@@ -1,21 +1,37 @@
 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';
 import { PlatformUtil } from '../../core/utils';
+import { HierarchicalRowType } from './hierarchical-row.interface';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.OnPush,
     preserveWhitespaces: false,
     selector: 'igx-hierarchical-grid-cell',
-    templateUrl: './../cell.component.html',
+    templateUrl: './hierarchical-cell.component.html',
     providers: [HammerGesturesManager]
 })
 export class IgxHierarchicalGridCellComponent extends IgxGridCellComponent implements OnInit {
 
+    /**
+     * @hidden
+     */
+    public get displayPinnedChip() {
+        return this.hierarchicalRow.ghostRow &&
+            (!this.grid.visibleColumns[this.visibleColumnIndex - 1] || this.grid.visibleColumns[this.visibleColumnIndex - 1].cellTemplate);
+    }
+
+    /**
+     * @hidden
+     */
+    public get hierarchicalRow(): HierarchicalRowType {
+        return this.row as HierarchicalRowType;
+    }
+
     // protected hSelection;
     protected _rootGrid;
 

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

@@ -84,16 +84,38 @@
 <div igxGridBody (keydown.control.c)="copyHandlerIE()" (copy)="copyHandler($event)" class="igx-grid__tbody">
     <div class="igx-grid__tbody-content" (onDragStop)="selectionService.dragMode = $event"
         (onDragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode" role="rowgroup"
-        [style.height.px]='calcHeight' [style.width.px]='calcWidth' #tbody (scroll)='scrollHandler($event)'>
+        [style.height.px]='totalHeight' [style.width.px]='calcWidth' #tbody (scroll)='scrollHandler($event)'>
         <span *ngIf="hasMovableColumns && draggedColumn && pinnedColumns.length <= 0"
             [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
             class="igx-grid__scroll-on-drag-left"></span>
         <span *ngIf="hasMovableColumns && draggedColumn && pinnedColumns.length > 0"
             [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
             class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
+        <ng-template #pinnedRecordsTemplate>
+            <ng-container *ngIf="data
+            | visibleColumns:hasVisibleColumns
+            | gridHierarchicalRowPinning:true:pipeTrigger
+            | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger
+            | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger as pinnedData">
+                <div #pinContainer *ngIf='pinnedData.length > 0' [ngClass]="{ 'igx-grid__tr--pinned-bottom':  !isRowPinningToTop, 'igx-grid__tr--pinned-top': isRowPinningToTop }">
+                    <ng-container *ngFor="let rowData of pinnedData; let rowIndex = index">
+                        <ng-template #hierarchical_record_template>
+                            <igx-hierarchical-grid-row [gridID]="id" [index]="getRowIndex(rowIndex, true)" [rowData]="rowData">
+                            </igx-hierarchical-grid-row>
+                        </ng-template>
+
+                        <ng-container *ngTemplateOutlet="hierarchical_record_template; context: getContext(rowData, rowIndex, true)">
+                        </ng-container>
+                    </ng-container>
+                </div>
+            </ng-container>
+        </ng-template>
+        <ng-container *ngTemplateOutlet="hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null">
+        </ng-container>
         <ng-template igxGridFor let-rowData [igxGridForOf]="data
         | gridTransaction:id:pipeTrigger
         | visibleColumns:hasVisibleColumns
+        | gridHierarchicalRowPinning:false:pipeTrigger
         | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger
         | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger
         | gridHierarchicalPaging:page:perPage:id:pipeTrigger
@@ -102,7 +124,7 @@
             [igxForContainerSize]='calcHeight' [igxForItemSize]="renderedRowHeight" [igxForTrackBy]='trackChanges'
             #verticalScrollContainer (onChunkPreload)="dataLoading($event)">
             <ng-template #hierarchical_record_template>
-                <igx-hierarchical-grid-row [gridID]="id" [index]="rowIndex" [rowData]="rowData" #row>
+                <igx-hierarchical-grid-row [gridID]="id" [index]="getRowIndex(rowIndex, false)" [ghostRow]="isGhostRecord(rowData)" [rowData]="!isGhostRecord(rowData) ? rowData : rowData.recordData" #row>
                 </igx-hierarchical-grid-row>
             </ng-template>
             <ng-template #child_record_template let-rowIndex="index" let-rowData>
@@ -111,28 +133,33 @@
                     'igx-grid__tr-container': true,
                     'igx-grid__tr--highlighted':isRowHighlighted(rowData)
                 }">
-                    <igx-child-grid-row *ngFor="let layout of childLayoutList" [parentGridID]="id" [index]="rowIndex"
+                    <igx-child-grid-row *ngFor="let layout of childLayoutList" [parentGridID]="id" [index]="getRowIndex(rowIndex, false)"
                         [rowData]="rowData" [layout]='layout' #row>
                     </igx-child-grid-row>
                 </div>
             </ng-template>
             <ng-template
             [igxTemplateOutlet]='(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) && isExpanded(rowData) ? child_record_template : hierarchical_record_template))'
-            [igxTemplateOutletContext]='getContext(rowData)' (onViewCreated)='viewCreatedHandler($event)'
+            [igxTemplateOutletContext]='getContext(rowData, rowIndex, false)' (onViewCreated)='viewCreatedHandler($event)'
             (onViewMoved)='viewMovedHandler($event)' (onCachedViewLoaded)='cachedViewLoaded($event)'
             (onBeforeViewDetach)='viewDetachHandler($event)'></ng-template>
             <!-- <ng-container *igxTemplateOutlet="(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) && isExpanded(rowData) ? child_record_template : hierarchical_record_template)); context: getContext(rowData)"></ng-container> -->
         </ng-template>
+        <ng-container *ngTemplateOutlet="hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null">
+        </ng-container>
         <ng-container *ngTemplateOutlet="template"></ng-container>
         <span *ngIf="hasMovableColumns && draggedColumn" [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true"
             id="right" class="igx-grid__scroll-on-drag-right"></span>
         <div class="igx-grid__row-editing-outlet" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>
     </div>
     <span *ngIf="hasMovableColumns && draggedColumn" [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true"
         id="right" class="igx-grid__scroll-on-drag-right"></span>
-    <div [hidden]='!hasVerticalSroll()' class="igx-grid__tbody-scrollbar" [style.width.px]="scrollWidth"
-        [style.height.px]='calcHeight'>
-        <ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder></ng-template>
+    <div [hidden]='!hasVerticalSroll()' class="igx-grid__tbody-scrollbar" [style.width.px]="scrollWidth">
+        <div class="igx-grid__tbody-scrollbar-start" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>
+        <div class="igx-grid__tbody-scrollbar-main" [style.height.px]='calcHeight'>
+            <ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder></ng-template>
+        </div>
+        <div class="igx-grid__tbody-scrollbar-end" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>        
     </div>
 </div>