feat(igxTreeGrid): Adds pipe to modify data for a shadow row #6640

Author: 3phase

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

@@ -78,10 +78,9 @@
         <ng-template #pinnedRecordsTemplate>
             <ng-container *ngFor="let rowData of data
                 | visibleColumns:hasVisibleColumns
-                | treeGridRowPinning:id:true:pipeTrigger
+                | treeGridRowPinning:id:pipeTrigger
                 | treeGridHierarchizing:primaryKey:foreignKey:childDataKey:id:pipeTrigger
                 | treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger
-                | treeGridPinnedRows:id:pipeTrigger
                 | treeGridSorting:sortingExpressions:sortStrategy:id:pipeTrigger; let rowIndex = index">
                 <ng-container *ngTemplateOutlet="record_template; context: getContext(rowData, rowIndex, true)">
                 </ng-container>
@@ -94,8 +93,8 @@
         <ng-template igxGridFor let-rowData [igxGridForOf]="data
         | treeGridTransaction:id:pipeTrigger
         | visibleColumns:hasVisibleColumns
-        | treeGridRowPinning:id:false:pipeTrigger
         | treeGridHierarchizing:primaryKey:foreignKey:childDataKey:id:pipeTrigger
+        | treeGridShadowRows:id:pipeTrigger
         | treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger
         | treeGridSorting:sortingExpressions:sortStrategy:id:pipeTrigger
         | treeGridFlattening:id:expansionDepth:expansionStates:pipeTrigger

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, IgxTreeGridRowPinningPipe, IgxTreeGridPinnedRowsPipe } from './tree-grid.pipes';
+import { IgxTreeGridHierarchizingPipe, IgxTreeGridRowPinningPipe, IgxTreeGridShadowRowsPipe } 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';
@@ -26,7 +26,7 @@ import { IgxRowLoadingIndicatorTemplateDirective } from './tree-grid.directives'
     IgxTreeGridSummaryPipe,
     IgxRowLoadingIndicatorTemplateDirective,
     IgxTreeGridRowPinningPipe,
-    IgxTreeGridPinnedRowsPipe
+    IgxTreeGridShadowRowsPipe
   ],
   exports: [
     IgxTreeGridComponent,

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

@@ -324,28 +324,27 @@ export class IgxTreeGridRowPinningPipe implements PipeTransform {
         this.gridAPI = <IgxTreeGridAPIService> gridAPI;
     }
 
-    transform(collection: any[], id: string, isPinned = false, pipeTrigger: number): any[] {
+    transform(collection: any[], id: string, pipeTrigger: number): any[] {
         const grid = this.gridAPI.grid;
 
         if (!grid.hasPinnedRecords) {
-            return isPinned ? [] : collection;
+            return [];
         }
 
-        const result = (isPinned) ? collection.filter((value, index) => grid.isRecordPinned(value)) : collection;
+        const result = collection.filter((value, index) => grid.isRecordPinned(value));
+
+        // pinned records should be ordered as they were pinned.
+        result.sort((rec1, rec2) => grid.pinRecordIndex(rec1) - grid.pinRecordIndex(rec2));
 
-        if (isPinned) {
-            // pinned records should be ordered as they were pinned.
-            result.sort((rec1, rec2) => grid.pinRecordIndex(rec1) - grid.pinRecordIndex(rec2));
-        }
         return result;
     }
 }
 
 @Pipe({
-    name: 'treeGridPinnedRows',
+    name: 'treeGridShadowRows',
     pure: true
 })
-export class IgxTreeGridPinnedRowsPipe implements PipeTransform {
+export class IgxTreeGridShadowRowsPipe implements PipeTransform {
 
     private gridAPI: IgxTreeGridAPIService;
 
@@ -354,7 +353,24 @@ export class IgxTreeGridPinnedRowsPipe implements PipeTransform {
     }
 
     transform(collection: any[], id: string, pipeTrigger: number): any[] {
+
+        this.modifyPinnedRecordsIDs(collection);
+
         return collection;
     }
 
+    private modifyPinnedRecordsIDs(records: ITreeGridRecord[]) {
+        if (records && records.length) {
+            records.map((value, idx) => {
+                if (this.gridAPI.grid.isRecordPinned(value.data)) {
+                    // Modify the rowID in order to make a recognizeable shadow row
+                    // value.rowID += "_shadow";
+                }
+                if (value.children) {
+                    this.modifyPinnedRecordsIDs(value.children);
+                }
+            });
+        }
+    }
+
 }