Merge pull request #6936 from IgniteUI/pbozhinov/row-pinning-tree-grid

Row Pinning Tree Grid

Author: ChronosSF

projects/igniteui-angular/src/lib/grids/common/grid-pipes.module.ts

@@ -10,7 +10,8 @@ import {
     IgxGridPaginatorOptionsPipe,
     IgxHasVisibleColumnsPipe,
     IgxDatePipeComponent,
-    IgxDecimalPipeComponent
+    IgxDecimalPipeComponent,
+    IgxGridRowPinningPipe
 } from './pipes';
 
 @NgModule({
@@ -24,7 +25,8 @@ import {
         IgxGridCellStylesPipe,
         IgxGridCellStyleClassesPipe,
         IgxGridPaginatorOptionsPipe,
-        IgxHasVisibleColumnsPipe
+        IgxHasVisibleColumnsPipe,
+        IgxGridRowPinningPipe
     ],
     exports: [
         IgxDatePipeComponent,
@@ -36,7 +38,8 @@ import {
         IgxGridCellStylesPipe,
         IgxGridCellStyleClassesPipe,
         IgxGridPaginatorOptionsPipe,
-        IgxHasVisibleColumnsPipe
+        IgxHasVisibleColumnsPipe,
+        IgxGridRowPinningPipe
     ],
     imports: [
         CommonModule

projects/igniteui-angular/src/lib/grids/common/pipes.ts

@@ -212,3 +212,34 @@ export class IgxDecimalPipeComponent extends DecimalPipe implements PipeTransfor
         }
     }
 }
+
+/**
+ * @hidden
+ */
+@Pipe({
+    name: 'gridRowPinning',
+    pure: true
+})
+export class IgxGridRowPinningPipe implements PipeTransform {
+
+    constructor(private gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>) {}
+
+    public transform(collection: any[] , id: string, isPinned = false, pipeTrigger: number) {
+        const grid = this.gridAPI.grid;
+
+        if (!grid.hasPinnedRecords) {
+            return isPinned ? [] : collection;
+        }
+
+        if (grid.hasPinnedRecords && isPinned) {
+            const result = collection.filter(rec => grid.isRecordPinned(rec));
+            result.sort((rec1, rec2) => grid.pinRecordIndex(rec1) - grid.pinRecordIndex(rec2));
+            return result;
+        }
+
+        grid.unpinnedRecords = collection;
+        return collection.map((rec) => {
+            return grid.isRecordPinned(rec) ? { recordRef: rec, ghostRecord: true} : rec;
+        });
+    }
+}

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

@@ -2930,8 +2930,9 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
 
     public setFilterData(data, pinned: boolean) {
         if (this.hasPinnedRecords && pinned) {
-            this._filteredPinnedData = data;
-            this.filteredData = [... this._filteredPinnedData, ... this._filteredUnpinnedData];
+            this._filteredPinnedData = data || [];
+            const filteredUnpinned =  this._filteredUnpinnedData || [];
+            this.filteredData = [... this._filteredPinnedData, ... filteredUnpinned];
         } else if (this.hasPinnedRecords && !pinned) {
             this._filteredUnpinnedData = data;
         } else {
@@ -2987,6 +2988,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      * @internal
      */
     public setFilteredSortedData(data, pinned: boolean) {
+        data = data.map(rec => rec.ghostRecord !== undefined ? rec.recordRef : rec);
         if (this._pinnedRecordIDs.length > 0 && pinned) {
             this._filteredSortedPinnedData = data;
             this.filteredSortedData = this.isRowPinningToTop ? [... this._filteredSortedPinnedData, ... this._filteredSortedUnpinnedData] :
@@ -5164,13 +5166,13 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         return this.unpinnedRecords ? this.unpinnedRecords : this.verticalScrollContainer.igxForOf;
     }
 
-    /**
-     * Returns the currently transformed paged/filtered/sorted/grouped pinned data, displayed in the grid.
-     * @example
-     * ```typescript
-     *      const pinnedDataView = this.grid.pinnedDataView;
-     * ```
-     */
+     /**
+      * 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);
     }

projects/igniteui-angular/src/lib/grids/grid/grid.module.ts

@@ -13,8 +13,7 @@ import {
     IgxGridPagingPipe,
     IgxGridGroupingPipe,
     IgxGridSortingPipe,
-    IgxGridFilteringPipe,
-    IgxGridRowPinningPipe
+    IgxGridFilteringPipe
 } from './grid.pipes';
 import { IgxGridGroupByRowComponent } from './groupby-row.component';
 import { IgxGridRowComponent } from './grid-row.component';
@@ -42,7 +41,6 @@ import { IgxGridExpandableCellComponent } from './expandable-cell.component';
     IgxGridPagingPipe,
     IgxGridSortingPipe,
     IgxGridFilteringPipe,
-    IgxGridRowPinningPipe,
     IgxGridSummaryPipe,
     IgxGridDetailsPipe,
     IgxGridExpandableCellComponent
@@ -63,7 +61,6 @@ import { IgxGridExpandableCellComponent } from './expandable-cell.component';
     IgxGridPagingPipe,
     IgxGridSortingPipe,
     IgxGridFilteringPipe,
-    IgxGridRowPinningPipe,
     IgxGridSummaryPipe,
     IgxGridDetailsPipe,
     IgxGridCommonModule

projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts

@@ -152,33 +152,3 @@ export class IgxGridFilteringPipe implements PipeTransform {
     }
 }
 
-/**
- * @hidden
- */
-@Pipe({
-    name: 'gridRowPinning',
-    pure: true
-})
-export class IgxGridRowPinningPipe implements PipeTransform {
-
-    constructor(private gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>) {}
-
-    public transform(collection: any[] , id: string, isPinned = false, pipeTrigger: number) {
-        const grid = this.gridAPI.grid;
-
-        if (!grid.hasPinnedRecords) {
-            return isPinned ? [] : collection;
-        }
-
-        if (grid.hasPinnedRecords && isPinned) {
-            const result = collection.filter(rec => grid.isRecordPinned(rec));
-            result.sort((rec1, rec2) => grid.pinRecordIndex(rec1) - grid.pinRecordIndex(rec2));
-            return result;
-        }
-
-        grid.unpinnedRecords = collection;
-        return collection.map((rec) => {
-            return grid.isRecordPinned(rec) ? { recordRef: rec, ghostRecord: true} : rec;
-        });
-    }
-}

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

@@ -696,7 +696,7 @@ describe('IgxGrid - search API #grid - ', () => {
             setupGridScrollDetection(fix, grid);
             fix.detectChanges();
 
-            grid.data[29] = { ID: 30, Name: 'Eduardo Ramirez', JobTitle: 'Manager', HireDate: '1887-11-28T11:23:17.714Z' };
+            grid.data[29].HireDate = '1887-11-28T11:23:17.714Z';
             grid.width = '500px';
             grid.height = '600px';
             fixNativeElement = fix.debugElement.nativeElement;

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

@@ -1,3 +1,6 @@
+<ng-template #defaultPinnedIndicator>
+    <igx-chip *ngIf="displayPinnedChip" class="igx-grid__td--pinned-chip" [disabled]="true" [displayDensity]="'compact'">{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>
+</ng-template>
 <ng-template #defaultCell>
     <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"
@@ -36,6 +39,8 @@
          (click)="toggle($event)" (focus)="onIndicatorFocus()" tabindex="-1">
          <ng-container *ngTemplateOutlet="iconTemplate; context: { $implicit:  this }">
         </ng-container>
+        <ng-container *ngTemplateOutlet="pinnedIndicatorTemplate; context: context">
+        </ng-container>
     </div>
     <div *ngIf="isLoading"
          (dblclick)="onLoadingDblClick($event)"

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

@@ -1,9 +1,8 @@
-import { Component, ChangeDetectorRef, ElementRef, ViewChild, Inject,
-     ChangeDetectionStrategy, NgZone, OnInit, Input, TemplateRef } from '@angular/core';
-import { IgxGridCellComponent } from '../cell.component';
+import { Component, ChangeDetectorRef, ElementRef, Inject,
+     ChangeDetectionStrategy, NgZone, Input } from '@angular/core';
 import { IgxTreeGridAPIService } from './tree-grid-api.service';
 import { GridBaseAPIService } from '../api.service';
-import { getNodeSizeViaRange, PlatformUtil } from '../../core/utils';
+import { PlatformUtil } from '../../core/utils';
 import { DOCUMENT } from '@angular/common';
 import { IgxGridBaseDirective } from '../grid';
 import { IgxGridSelectionService, IgxGridCRUDService } from '../selection/selection.service';
@@ -21,15 +20,15 @@ export class IgxTreeGridCellComponent extends IgxGridExpandableCellComponent {
     private treeGridAPI: IgxTreeGridAPIService;
 
     constructor(
-                selectionService: IgxGridSelectionService,
-                crudService: IgxGridCRUDService,
-                gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>,
-                cdr: ChangeDetectorRef,
-                element: ElementRef,
-                protected zone: NgZone,
-                touchManager: HammerGesturesManager,
-                @Inject(DOCUMENT) public document,
-                protected platformUtil: PlatformUtil) {
+        selectionService: IgxGridSelectionService,
+        crudService: IgxGridCRUDService,
+        gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>,
+        cdr: ChangeDetectorRef,
+        element: ElementRef,
+        protected zone: NgZone,
+        touchManager: HammerGesturesManager,
+        @Inject(DOCUMENT) public document,
+        protected platformUtil: PlatformUtil) {
         super(selectionService, crudService, gridAPI, cdr, element, zone, touchManager, document, platformUtil);
         this.treeGridAPI = <IgxTreeGridAPIService>gridAPI;
     }
@@ -46,7 +45,6 @@ export class IgxTreeGridCellComponent extends IgxGridExpandableCellComponent {
     @Input()
     showIndicator = false;
 
-
     /**
      * @hidden
      */