feat(igxTreeGrid): Initial commit of tree grid's row pinning #6640

Author: 3phase

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

@@ -75,10 +75,29 @@
         <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 *ngFor="let rowData of pinnedRecords
+                | visibleColumns:hasVisibleColumns
+                | treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger
+                | treeGridPinnedRows:id:pipeTrigger
+                | treeGridSorting:sortingExpressions:sortStrategy:id:pipeTrigger; let rowIndex = index">
+                <ng-template #record_template let-rowIndex="index">
+                    <igx-tree-grid-row [gridID]="id" [index]="rowIndex" [treeRow]="rowData" #row>
+                    </igx-tree-grid-row>
+                </ng-template>
+                <ng-container [igxTemplateOutlet]="record_template" [igxTemplateOutletContext]="getContext(rowData, rowIndex)">
+                </ng-container>
+            </ng-container>
+        </ng-template>
+        <div #pinContainer *ngIf='pinnedRecords.length > 0 && isRowPinningToTop' class='igx-grid__tr--pinned igx-grid__tr--pinned-top'>
+            <ng-container *ngTemplateOutlet="pinnedRecordsTemplate">
+            </ng-container>  
+        </div>
         <ng-template igxGridFor let-rowData
             [igxGridForOf]="data
         | treeGridTransaction:id:pipeTrigger
         | visibleColumns:hasVisibleColumns
+        | treeGridRowPinning:id:pipeTrigger
         | treeGridHierarchizing:primaryKey:foreignKey:childDataKey:id:pipeTrigger
         | treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger
         | treeGridSorting:sortingExpressions:sortStrategy:id:pipeTrigger

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

@@ -526,6 +526,56 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy
         }
     }
 
+    /**
+     * Pin the row by its id.
+     * @remarks
+     * ID is either the primaryKey value or the data record instance.
+     * @example
+     * ```typescript
+     * this.grid.pinRow(rowID);
+     * ```
+     * @param rowID The row id - primaryKey value or the data record instance.
+     * @param index The index at which to insert the row in the pinned collection.
+     */
+    public pinRow(rowID, index?): boolean {
+        const rec = this.gridAPI.get_rec_by_id(rowID);
+        const flattenedRecord = {...rec};
+        flattenedRecord.children = [];
+        flattenedRecord.level = 0;
+
+        if (!rec || this.isRowInPinnedRecordsStructure(rec) || this.flatData.indexOf(rec.data) === -1) {
+            return false;
+        }
+        const row = this.gridAPI.get_row_by_key(rowID);
+
+        const eventArgs = {
+            insertAtIndex: index,
+            isPinned: true,
+            rowID: rowID,
+            row: row
+        };
+        this.onRowPinning.emit(eventArgs);
+
+        this.pinnedRecords.splice(eventArgs.insertAtIndex || this.pinnedRecords.length, 0, flattenedRecord);
+        this._pipeTrigger++;
+        if (this.gridAPI.grid) {
+            this.notifyChanges(true);
+        }
+    }
+
+    /**
+     * @hidden @internal
+     */
+    private isRowInPinnedRecordsStructure(rec: ITreeGridRecord): boolean {
+        let inStructure = false;
+        this.pinnedRecords.forEach(pinnedRecord => {
+            if (JSON.stringify(pinnedRecord.data) === JSON.stringify(rec.data)) {
+                inStructure = true;
+            }
+        });
+        return inStructure;
+    }
+
     /** @hidden */
     public deleteRowById(rowId: any) {
         //  if this is flat self-referencing data, and CascadeOnDelete is set to true

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

@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { IgxTreeGridComponent } from './tree-grid.component';
 import { IgxTreeGridRowComponent } from './tree-grid-row.component';
 import { IgxGridCommonModule } from '../grid-common.module';
-import { IgxTreeGridHierarchizingPipe } from './tree-grid.pipes';
+import { IgxTreeGridHierarchizingPipe, IgxTreeGridRowPinningPipe, IgxTreeGridPinnedRowsPipe } from './tree-grid.pipes';
 import { IgxTreeGridFlatteningPipe, IgxTreeGridSortingPipe, IgxTreeGridPagingPipe, IgxTreeGridTransactionPipe } from './tree-grid.pipes';
 import { IgxTreeGridCellComponent } from './tree-cell.component';
 import { IgxTreeGridFilteringPipe } from './tree-grid.filtering.pipe';
@@ -24,7 +24,9 @@ import { IgxRowLoadingIndicatorTemplateDirective } from './tree-grid.directives'
     IgxTreeGridPagingPipe,
     IgxTreeGridTransactionPipe,
     IgxTreeGridSummaryPipe,
-    IgxRowLoadingIndicatorTemplateDirective
+    IgxRowLoadingIndicatorTemplateDirective,
+    IgxTreeGridRowPinningPipe,
+    IgxTreeGridPinnedRowsPipe
   ],
   exports: [
     IgxTreeGridComponent,

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

@@ -307,3 +307,38 @@ export class IgxTreeGridTransactionPipe implements PipeTransform {
         return collection;
     }
 }
+
+@Pipe({
+    name: 'treeGridRowPinning',
+    pure: true
+})
+export class IgxTreeGridRowPinningPipe implements PipeTransform {
+
+    private gridAPI: IgxTreeGridAPIService;
+
+    constructor(gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>) {
+        this.gridAPI = <IgxTreeGridAPIService> gridAPI;
+    }
+
+    transform(collection: any[], id: string, pipeTrigger: number): any[] {
+        return collection;
+    }
+}
+
+@Pipe({
+    name: 'treeGridPinnedRows',
+    pure: true
+})
+export class IgxTreeGridPinnedRowsPipe implements PipeTransform {
+
+    private gridAPI: IgxTreeGridAPIService;
+
+    constructor(gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>) {
+        this.gridAPI = <IgxTreeGridAPIService> gridAPI;
+    }
+
+    transform(collection: any[], id: string, pipeTrigger: number): any[] {
+        return collection;
+    }
+
+}