fix(pivot-grid): Add override for getColumnWidthSum for initial render when grrid and parent element don't have sizes.

Author: Svetoslav Krastev

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

@@ -7523,7 +7523,11 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         directive.scrollTo(goal);
     }
 
-    private getColumnWidthSum(): number {
+
+    /**
+     * @hidden
+     */
+    protected getColumnWidthSum(): number {
         let colSum = 0;
         const cols = this.hasColumnLayouts ?
             this.visibleColumns.filter(x => x.columnLayout) : this.visibleColumns.filter(x => !x.columnGroup);

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

@@ -86,7 +86,7 @@
         <ng-template igxGridFor [igxGridForOf]='EMPTY_DATA' #scrollContainer>
         </ng-template>
     </div>
-    <div class="igx-grid__scroll-end" [style.float]='"right"' [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]="pinnedWidth === 0 || isPinningToStart"></div>
+    <div class="igx-grid__scroll-end" [style.float]='"right"' [style.width.px]='pivotPinnedWidth' [style.min-width.px]='pivotPinnedWidth' [hidden]="pivotPinnedWidth === 0 || isPinningToStart"></div>
 </div>
 
 <div class="igx-grid__tfoot" role="rowgroup" #tfoot>

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

@@ -1135,8 +1135,8 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     /**
      * @hidden @internal
      */
-    public rowDimensionWidthToPixels(dim: IPivotDimension): number {
-        if (this.shouldGenerate) {
+    public rowDimensionWidthToPixels(dim: IPivotDimension, ignoreBeforeInit: boolean = false): number {
+        if (!ignoreBeforeInit && this.shouldGenerate) {
             return 0;
         }
 
@@ -1197,6 +1197,12 @@ 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, true)).reduce((prev, cur) => prev + cur, 0);
+        return colSum;
+    }
+
     /**
      * @hidden @internal
      */