fix(igxPivot): Fix width calculations when inside flex container with… (#15057)

Author: MayaKirova

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

@@ -3208,6 +3208,7 @@ export abstract class IgxGridBaseDirective implements GridType,
     private _columnSelectionMode: GridSelectionMode = GridSelectionMode.none;
 
     private lastAddedRowIndex;
+    protected isColumnWidthSum = false;
     private _currencyPositionLeft: boolean;
 
     private rowEditPositioningStrategy = new RowEditPositionStrategy({
@@ -6496,6 +6497,7 @@ export abstract class IgxGridBaseDirective implements GridType,
 
         if (this.width === null || !width) {
             width = this.getColumnWidthSum();
+            this.isColumnWidthSum = true;
         }
 
         if (this.hasVerticalScroll() && this.width !== null) {
@@ -7325,6 +7327,10 @@ export abstract class IgxGridBaseDirective implements GridType,
             this.resetCachedWidths();
             this.cdr.detectChanges();
         }
+
+        if (this.isColumnWidthSum) {
+            this.calcWidth = this.getColumnWidthSum();
+        }
     }
 
     protected extractDataFromColumnsSelection(source: any[], formatters = false, headers = false): any[] {

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

@@ -1165,7 +1165,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
 
     /** @hidden */
     public override featureColumnsWidth() {
-        return this.pivotRowWidths;
+        return this.pivotRowWidths || 0;
     }
 
     /* blazorSuppress */
@@ -1295,7 +1295,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
 
     /** @hidden @internal */
     public get pivotPinnedWidth() {
-        return this.isPinningToStart ? this.pinnedWidth : this.headerFeaturesWidth;
+        return !this._init ? (this.isPinningToStart ? this.pinnedWidth : this.headerFeaturesWidth) : 0;
     }
 
     /** @hidden @internal */
@@ -1340,12 +1340,6 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         this.reflow();
     }
 
-    protected override getColumnWidthSum(): number {
-        let colSum = super.getColumnWidthSum();
-        colSum += this.rowDimensions.map(dim => this.rowDimensionWidthToPixels(dim)).reduce((prev, cur) => prev + cur, 0);
-        return colSum;
-    }
-
     /**
      * @hidden @internal
      */
@@ -2245,6 +2239,10 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
                 dim.autoWidth = maxSize;
             }
         }
+
+        if (this.isColumnWidthSum) {
+            this.calcWidth = this.getColumnWidthSum();
+        }
     }
 
     /** @hidden @internal */

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts

@@ -10,7 +10,7 @@ import { ISortingExpression, SortingDirection } from '../../data-operations/sort
 import { configureTestSuite } from '../../test-utils/configure-suite';
 import { GridFunctions, GridSelectionFunctions } from '../../test-utils/grid-functions.spec';
 import { PivotGridFunctions } from '../../test-utils/pivot-grid-functions.spec';
-import { IgxPivotGridTestBaseComponent, IgxPivotGridTestComplexHierarchyComponent, IgxTotalSaleAggregate } from '../../test-utils/pivot-grid-samples.spec';
+import { IgxPivotGridFlexContainerComponent, IgxPivotGridTestBaseComponent, IgxPivotGridTestComplexHierarchyComponent, IgxTotalSaleAggregate } from '../../test-utils/pivot-grid-samples.spec';
 import { UIInteractions, wait } from '../../test-utils/ui-interactions.spec';
 import { IgxPivotDateAggregate, IgxPivotNumericAggregate } from './pivot-grid-aggregate';
 import { IgxPivotDateDimension } from './pivot-grid-dimensions';
@@ -36,7 +36,8 @@ describe('IgxPivotGrid #pivotGrid', () => {
             imports: [
                 NoopAnimationsModule,
                 IgxPivotGridTestBaseComponent,
-                IgxPivotGridTestComplexHierarchyComponent
+                IgxPivotGridTestComplexHierarchyComponent,
+                IgxPivotGridFlexContainerComponent
             ]
         }).compileComponents();
     }));
@@ -796,6 +797,16 @@ describe('IgxPivotGrid #pivotGrid', () => {
             expect(rowHeader[0].nativeElement.offsetHeight).toBe(rowHeightMedium);
         });
 
+        it('should render with correct width when set to 100% inside of flex container', async() => {
+            fixture = TestBed.createComponent(IgxPivotGridFlexContainerComponent);
+            fixture.detectChanges();
+            await wait(100);
+            fixture.detectChanges();
+            const pivotGrid = fixture.componentInstance.pivotGrid;
+            const colSum = pivotGrid.featureColumnsWidth() + pivotGrid.columns.filter(x => !x.columnGroup).map(x => x.calcPixelWidth).reduce((x, y) => x + y);
+            const expectedSize = Math.min(window.innerWidth, colSum);
+            expect(pivotGrid.nativeElement.clientWidth - expectedSize).toBeLessThan(50, "should take sum of columns as width.");
+        });
 
         describe('IgxPivotGrid Features #pivotGrid', () => {
             it('should show excel style filtering via dimension chip.', async () => {
@@ -2418,6 +2429,7 @@ describe('IgxPivotGrid #pivotGrid', () => {
         });
 
         it("should position correct the horizontal scrollbar", () => {
+            fixture.detectChanges();
             const scrollBarPosition = fixture.nativeElement.querySelector("igx-horizontal-virtual-helper").getBoundingClientRect();
             const displayContainerPosition = fixture.nativeElement.querySelector(".igx-grid__tbody-content").getBoundingClientRect()
             expect(scrollBarPosition.x).toEqual(displayContainerPosition.x);

projects/igniteui-angular/src/lib/test-utils/pivot-grid-samples.spec.ts

@@ -346,6 +346,32 @@ export class IgxPivotGridMultipleRowComponent extends IgxPivotGridTestBaseCompon
     }
 }
 
+
+@Component({
+    styles: `
+    .pivot-container {
+    display: flex;
+    align-items: flex-start;
+    flex: 1 1 auto;
+    order: 0;
+    align-items: stretch;
+    }
+    `,
+    template: `
+    <div class="pivot-container">
+        <div>
+            <igx-pivot-grid #grid [width]="'100%'" [height]="'800px'" [data]="data" [pivotConfiguration]="pivotConfigHierarchy"
+                [rowSelection]="'single'" [columnSelection]="'single'" [defaultExpandState]="defaultExpand">
+            </igx-pivot-grid>
+        </div>
+    </div>
+    `,
+    standalone: true,
+    imports: [IgxPivotGridComponent]
+})
+export class IgxPivotGridFlexContainerComponent extends IgxPivotGridTestBaseComponent{
+}
+
 export class IgxTotalSaleAggregate {
     public static totalSale: PivotAggregation = (members, data: any) =>
         data.reduce((accumulator, value) => accumulator + value.UnitPrice * value.UnitsSold, 0);