perf(grid): Improved data view performance (#10630)

Author: rkaraivanov

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

@@ -826,7 +826,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
      */
     public pointerenter = (event: PointerEvent) => {
         const isHierarchicalGrid = this.grid.nativeElement.tagName.toLowerCase() === 'igx-hierarchical-grid';
-        if (isHierarchicalGrid && (!this.grid.navigation.activeNode.gridID || this.grid.navigation.activeNode.gridID !== this.gridID)) {
+        if (isHierarchicalGrid && (!this.grid.navigation?.activeNode?.gridID || this.grid.navigation.activeNode.gridID !== this.gridID)) {
             return;
         }
         const dragMode = this.selectionService.pointerEnter(this.selectionNode, event);
@@ -841,7 +841,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
      */
     public pointerup = (event: PointerEvent) => {
         const isHierarchicalGrid = this.grid.nativeElement.tagName.toLowerCase() === 'igx-hierarchical-grid';
-        if (!this.platformUtil.isLeftClick(event) || (isHierarchicalGrid && (!this.grid.navigation.activeNode.gridID ||
+        if (!this.platformUtil.isLeftClick(event) || (isHierarchicalGrid && (!this.grid.navigation?.activeNode?.gridID ||
             this.grid.navigation.activeNode.gridID !== this.gridID))) {
             return;
         }

projects/igniteui-angular/src/lib/grids/columns/column-group.component.ts

@@ -371,10 +371,6 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
             });
         }
     }
-    // constructor(public gridAPI: GridBaseAPIService<IgxGridBaseDirective & IGridDataBindable>, public cdr: ChangeDetectorRef) {
-    //     // D.P. constructor duplication due to es6 compilation, might be obsolete in the future
-    //     super(gridAPI, cdr);
-    // }
 
     /**
      * @hidden

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

@@ -233,6 +233,19 @@ export class IgxHasVisibleColumnsPipe implements PipeTransform {
 
 }
 
+/** @hidden @internal */
+function buildDataView(): MethodDecorator {
+    return function (_target: unknown, _propertyKey: string, descriptor: PropertyDescriptor) {
+        const original = descriptor.value;
+        descriptor.value = function (...args: unknown[]) {
+            const result = original.apply(this, args);
+            this.grid.buildDataView();
+            return result;
+        }
+        return descriptor;
+    }
+}
+
 /**
  * @hidden
  */
@@ -241,6 +254,7 @@ export class IgxGridRowPinningPipe implements PipeTransform {
 
     constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { }
 
+    @buildDataView()
     public transform(collection: any[], id: string, isPinned = false, _pipeTrigger: number) {
 
         if (this.grid.hasPinnedRecords && isPinned) {

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

@@ -1159,7 +1159,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     }
 
     public get headerSelectorContainer() {
-        return  this.theadRow?.headerSelectorContainer;
+        return this.theadRow?.headerSelectorContainer;
     }
 
     public get headerDragContainer() {
@@ -2761,6 +2761,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     private _visibleColumns = [];
     private _columnGroups = false;
     private _autoGeneratedCols = [];
+    private _dataView = [];
 
     private _columnWidth: string;
 
@@ -3237,7 +3238,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         this.onDensityChanged.pipe(destructor).subscribe(() => {
             this.crudService.endEdit(false);
             if (this._summaryRowHeight === 0) {
-            this.summaryService.summaryHeight = 0;
+                this.summaryService.summaryHeight = 0;
             }
             this.notifyChanges(true);
         });
@@ -3430,18 +3431,21 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      */
     public setFilteredSortedData(data, pinned: boolean) {
         data = data || [];
-        if (this.pinnedRecordsCount > 0 && pinned) {
-            this._filteredSortedPinnedData = data;
-            this.pinnedRecords = data;
-            this._filteredSortedData = this.isRowPinningToTop ? [... this._filteredSortedPinnedData, ... this._filteredSortedUnpinnedData] :
-                [... this._filteredSortedUnpinnedData, ... this._filteredSortedPinnedData];
-            this.refreshSearch(true, false);
-        } else if (this.pinnedRecordsCount > 0 && !pinned) {
-            this._filteredSortedUnpinnedData = data;
+        if (this.pinnedRecordsCount > 0) {
+            if (pinned) {
+                this._filteredSortedPinnedData = data;
+                this.pinnedRecords = data;
+                this._filteredSortedData = this.isRowPinningToTop ? [... this._filteredSortedPinnedData, ... this._filteredSortedUnpinnedData] :
+                    [... this._filteredSortedUnpinnedData, ... this._filteredSortedPinnedData];
+                this.refreshSearch(true, false);
+            } else {
+                this._filteredSortedUnpinnedData = data;
+            }
         } else {
             this._filteredSortedData = data;
             this.refreshSearch(true, false);
         }
+        this.buildDataView();
     }
 
     /**
@@ -5115,10 +5119,8 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      *      const dataView = this.grid.dataView;
      * ```
      */
-    public get dataView(): any[] {
-        return this.isRowPinningToTop ?
-            [...this.pinnedDataView, ...this.unpinnedDataView] :
-            [...this.unpinnedDataView, ...this.pinnedDataView];
+    public get dataView() {
+        return this._dataView;
     }
 
     /**
@@ -6911,6 +6913,12 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         column.resetCaches();
     }
 
+    private buildDataView() {
+        this._dataView = this.isRowPinningToTop ?
+            [...this.pinnedDataView, ...this.unpinnedDataView] :
+            [...this.unpinnedDataView, ...this.pinnedDataView];
+    }
+
     private _applyWidthHostBinding() {
         let width = this._width;
         if (width === null) {

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

@@ -124,7 +124,7 @@
                                 <div class="igx-grid__row-indentation igx-grid__row-indentation--level-{{groupingExpressions.length}}"></div>
                         </ng-container>
                         <ng-template
-                    [ngTemplateOutlet]='detailTemplate'
+                    [ngTemplateOutlet]='detailTemplate.first'
                     [ngTemplateOutletContext]='getDetailsContext(rowData, rowIndex)'>
                     </ng-template>
                 </div>

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

@@ -150,8 +150,8 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
     /**
      * @hidden @internal
      */
-    @ContentChild(IgxGridDetailTemplateDirective, { read: TemplateRef, static: false })
-    public detailTemplate: TemplateRef<any> = null;
+    @ContentChildren(IgxGridDetailTemplateDirective, { read: TemplateRef })
+    public detailTemplate: QueryList<TemplateRef<any>> = new QueryList();
 
     /**
      * @hidden @internal
@@ -200,12 +200,6 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
     @ContentChild(IgxGroupByRowTemplateDirective, { read: IgxGroupByRowTemplateDirective })
     protected groupTemplate: IgxGroupByRowTemplateDirective;
 
-    /**
-     * @hidden @internal
-     */
-    @ContentChild(IgxGridDetailTemplateDirective, { read: IgxGridDetailTemplateDirective, static: false })
-    protected gridDetailsTemplate: IgxGridDetailTemplateDirective;
-
     /**
      * @hidden
      * @internal
@@ -555,16 +549,6 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
         };
     }
 
-    /**
-     * @hidden @internal
-     */
-    public trackChanges(index, rec) {
-        if (rec && rec.detailsData !== undefined) {
-            return rec.detailsData;
-        }
-        return rec;
-    }
-
     /**
      * @hidden @internal
      */
@@ -576,7 +560,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
      * @hidden @internal
      */
     public get hasDetails() {
-        return !!this.gridDetailsTemplate;
+        return !!this.detailTemplate.length;
     }
 
     /**
@@ -645,6 +629,9 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
         this.notifyChanges();
     }
 
+    /** @hidden @internal */
+    public trackChanges: (index, rec) => any;
+
     /**
      * Groups by a new `IgxColumnComponent` based on the provided expression, or modifies an existing one.
      *
@@ -938,6 +925,9 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
             this._groupRowTemplate = this.groupTemplate.template;
         }
 
+        this.detailTemplate.changes.subscribe(() =>
+            this.trackChanges = (_, rec) => (rec?.detailsData !== undefined ? rec.detailsData : rec));
+
         if (this.hideGroupedColumns && this.columnList && this.groupingExpressions) {
             this._setGroupColsVisibility(this.hideGroupedColumns);
         }