feat(igxTreeGrid): Implements ghost row data modifications #6640

Author: 3phase

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

@@ -50,7 +50,6 @@ export class IgxTreeGridCellComponent extends IgxGridExpandableCellComponent {
     @Input()
     showIndicator = false;
 
-
     /**
      * @hidden
      */

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

@@ -40,7 +40,9 @@ export class IgxTreeGridRowComponent extends IgxRowDirective<IgxTreeGridComponen
     public set treeRow(value: ITreeGridRecord) {
         if (this._treeRow !== value) {
             this._treeRow = value;
-            this.rowData = this._treeRow.data;
+            this.rowData = this.grid.isGhostRecord(this._treeRow.data) ?
+                            this._treeRow.data.recordData :
+                            this._treeRow.data;
         }
     }
 

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

@@ -98,8 +98,8 @@
         <ng-template igxGridFor let-rowData [igxGridForOf]="data
         | treeGridTransaction:id:pipeTrigger
         | visibleColumns:hasVisibleColumns
-        | treeGridHierarchizing:primaryKey:foreignKey:childDataKey:id:pipeTrigger
         | treeGridShadowRows:id:pipeTrigger
+        | treeGridHierarchizing:primaryKey:foreignKey:childDataKey: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.component.ts

@@ -381,7 +381,7 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy
     private flattenTreeGridRecords(records: ITreeGridRecord[], flatData: any[]) {
         if (records && records.length) {
             for (const record of records) {
-                flatData.push(record.data);
+                (this.isGhostRecord(record)) ? flatData.push(record.data.recordData) : flatData.push(record.data);
                 this.flattenTreeGridRecords(record.children, flatData);
             }
         }
@@ -642,6 +642,15 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy
         };
     }
 
+    /**
+     * Informs whether the record is a ghost, i.e. a pinned body instance.
+     * @param record
+     * @hidden @internal
+     */
+    public isGhostRecord(record: any): boolean {
+        return record.ghostRec !== undefined;
+    }
+
     /**
      * @inheritdoc
      */

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

@@ -54,20 +54,22 @@ export class IgxTreeGridHierarchizingPipe implements PipeTransform {
         const result: ITreeGridRecord[] = [];
         const missingParentRecords: ITreeGridRecord[] = [];
         collection.forEach(row => {
+            const ghostRow = row.ghostRec !== undefined;
             const record: ITreeGridRecord = {
-                rowID: this.getRowID(primaryKey, row),
+                rowID: ghostRow ? this.getRowID(primaryKey, row.recordData) : this.getRowID(primaryKey, row),
                 data: row,
                 children: []
             };
-            const parent = map.get(row[foreignKey]);
+            const parent = ghostRow ? map.get(row.recordData[foreignKey]) : map.get(row[foreignKey]);
             if (parent) {
                 record.parent = parent;
                 parent.children.push(record);
             } else {
                 missingParentRecords.push(record);
             }
 
-            map.set(row[primaryKey], record);
+            ghostRow ? map.set(row.recordData[primaryKey], record) :
+                map.set(row[primaryKey], record);
         });
 
         missingParentRecords.forEach(record => {
@@ -90,7 +92,7 @@ export class IgxTreeGridHierarchizingPipe implements PipeTransform {
             const record = collection[i];
             record.level = indentationLevel;
             record.expanded = this.gridAPI.get_row_expansion_state(record);
-            flatData.push(record.data);
+            this.gridAPI.grid.isGhostRecord(record.data) ? flatData.push(record.data.recordData) : flatData.push(record.data);
 
             if (record.children && record.children.length > 0) {
                 this.setIndentationLevels(id, record.children, indentationLevel + 1, flatData);
@@ -363,23 +365,15 @@ export class IgxTreeGridShadowRowsPipe implements PipeTransform {
 
     transform(collection: any[], id: string, pipeTrigger: number): any[] {
 
-        this.modifyPinnedRecordsIDs(collection);
+        const result = [];
 
-        return collection;
-    }
+        collection.forEach(value => {
+            if (this.gridAPI.grid.isRecordPinned(value)) {
+                value = { recordData: value, ghostRec: true };
+            }
+            result.push(value);
+        });
 
-    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);
-                }
-            });
-        }
+        return result;
     }
-
 }