feat(igxPivotGrid): Apply horizontal virtualization per column header level so that each level virtualizes its content individually.

Author: MKirova

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

@@ -638,6 +638,7 @@ export interface PivotGridType extends GridType {
     dimensionsChange: EventEmitter<IDimensionsChange>;
     valuesChange: EventEmitter<IValuesChange>;
     pivotKeys: IPivotKeys;
+    hasMultipleValues: boolean;
 }
 export interface GridSVGIcon {
     name: string;

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

@@ -1183,7 +1183,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     public footer: ElementRef;
 
     public get headerContainer() {
-        return this.theadRow?.headerContainer;
+        return this.theadRow?.headerForOf;
     }
 
     public get headerSelectorContainer() {

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

@@ -65,7 +65,7 @@
         <ng-container *ngTemplateOutlet="column.headerTemplate ? column.headerTemplate : defaultColumn; context: { $implicit: column, column: column}">
         </ng-container>
     </div>
-    <div class="igx-grid-thead__group">
+    <div class="igx-grid-thead__group" *ngIf='!grid.isPivot'>
         <ng-container *ngFor="let child of column.children">
             <igx-grid-header-group *ngIf="!child.hidden" class="igx-grid-thead__subgroup"
                 [ngClass]="child.headerGroupClasses"

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

@@ -122,6 +122,10 @@ export class IgxGridHeaderRowComponent implements DoCheck {
     @ViewChild('headerVirtualContainer', { read: IgxGridForOfDirective, static: true })
     public headerContainer: IgxGridForOfDirective<IgxGridHeaderGroupComponent>;
 
+    public get headerForOf() {
+        return this.headerContainer;
+    }
+
     @ViewChild('headerDragContainer')
     public headerDragContainer: ElementRef<HTMLElement>;
 

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

@@ -162,19 +162,21 @@
                 </igx-grid-header-group>
             </ng-container>
         </ng-container>
-
-        <!-- Unpinned columns collection -->
-        <ng-template igxGridFor #headerVirtualContainer let-column
-            [igxGridForOf]="unpinnedColumnCollection | igxTopLevel" [igxForScrollContainer]="grid.parentVirtDir"
-            [igxForContainerSize]="grid.unpinnedWidth" [igxForTrackBy]="grid.trackColumnChanges"
-            [igxForSizePropName]="'calcPixelWidth'" [igxForScrollOrientation]="'horizontal'">
-            <igx-grid-header-group [ngClass]="column.headerGroupClasses"
+    <div>
+        <div class="igx-grid-thead__group" *ngFor='let dimLevelColumns of columnDimensionsByLevel' [style.width.px]='grid.unpinnedWidth'>
+            <ng-template igxGridFor #headerVirtualContainer let-column
+                [igxGridForOf]="dimLevelColumns" [igxForScrollContainer]="grid.parentVirtDir"
+                [igxForContainerSize]="grid.unpinnedWidth" [igxForTrackBy]="grid.trackColumnChanges"
+                [igxForSizePropName]="'calcPixelWidth'" [igxForScrollOrientation]="'horizontal'">
+                <igx-grid-header-group [ngClass]="column.headerGroupClasses"
                 [ngStyle]="column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger" [column]="column"
                 [style.min-width]="column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
                 [style.flex-basis]="column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
                 (pointerdown)="grid.navigation.focusOutRowHeader($event)">
             </igx-grid-header-group>
-        </ng-template>
+            </ng-template>
+        </div>
+    </div>
 
         <!-- Pinned columns collection at the end -->
         <ng-container *ngIf="pinnedColumnCollection.length && !grid.isPinningToStart">

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

@@ -13,14 +13,17 @@ import { IBaseChipEventArgs, IgxChipComponent } from '../../chips/chip.component
 import { IgxChipsAreaComponent } from '../../chips/chips-area.component';
 import { GridColumnDataType } from '../../data-operations/data-util';
 import { SortingDirection } from '../../data-operations/sorting-strategy';
+import { IgxGridForOfDirective } from '../../directives/for-of/for_of.directive';
 import { ISelectionEventArgs } from '../../drop-down/drop-down.common';
 import { IgxDropDownComponent } from '../../drop-down/drop-down.component';
 import { AbsoluteScrollStrategy, AutoPositionStrategy, OverlaySettings, PositionSettings, VerticalAlignment } from '../../services/public_api';
 import { IGX_GRID_BASE, PivotGridType } from '../common/grid.interface';
+import { IgxGridHeaderGroupComponent } from '../headers/grid-header-group.component';
 import { IgxGridHeaderRowComponent } from '../headers/grid-header-row.component';
 import { DropPosition } from '../moving/moving.service';
 import { IgxPivotAggregate, IgxPivotDateAggregate, IgxPivotNumericAggregate, IgxPivotTimeAggregate } from './pivot-grid-aggregate';
 import { IPivotAggregator, IPivotDimension, IPivotValue, PivotDimensionType } from './pivot-grid.interface';
+import { PivotUtil } from './pivot-util';
 
 /**
  *
@@ -61,9 +64,33 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
         super(ref, cdr);
     }
 
+   /** The virtualized part of the header row containing the unpinned header groups. */
+   @ViewChildren('headerVirtualContainer', { read: IgxGridForOfDirective})
+   public headerContainers: QueryList<IgxGridForOfDirective<IgxGridHeaderGroupComponent>>;
+
+   public get headerForOf() {
+       return this.headerContainers.last;
+   }
+
     @ViewChildren('notifyChip')
     public notificationChips: QueryList<IgxChipComponent>;
 
+    public get columnDimensionsByLevel() {
+        const res = [];
+        const columnDimensions = this.grid.columnDimensions;
+        const cols = this.unpinnedColumnCollection;
+        let totalDepth = columnDimensions.map(x => PivotUtil.getDimensionDepth(x)).reduce((acc, val) => acc + val) + 1;
+        if (this.grid.hasMultipleValues) {
+            totalDepth += 1;
+        }
+        for (let i = 0; i < totalDepth; i++) {
+            const lvl = i;
+            const colsForLevel = cols.filter(x => x.level === lvl);
+            res[i] = colsForLevel;
+        }
+        return res;
+    }
+
     public onDimDragStart(event, area) {
         this.cdr.detectChanges();
         for (let chip of this.notificationChips) {

src/app/pivot-grid/pivot-grid.sample.ts

@@ -88,10 +88,10 @@ export class PivotGridSampleComponent {
 
     public pivotConfigHierarchy: IPivotConfiguration = {
         columns: [
-            this.dimensions[0]
+            this.dimensions[1]
         ],
         rows: [
-            this.dimensions[1],
+            this.dimensions[0],
             this.dimensions[2]
         ],
         values: [