fix(pivot-grid): Defer assignng width to pivot elements after columns have been generated.

Author: Svetoslav Krastev

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

@@ -81,8 +81,8 @@
 </div>
 
 <div class="igx-grid__scroll" [style.height.px]="scrollSize" #scr [hidden]="isHorizontalScrollHidden" (pointerdown)="$event.preventDefault()">
-    <div class="igx-grid__scroll-start" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>
-    <div class="igx-grid__scroll-main" [style.width.px]='unpinnedWidth'>
+    <div class="igx-grid__scroll-start" [style.width.px]='pivotPinnedWidth' [style.min-width.px]='pivotPinnedWidth'></div>
+    <div class="igx-grid__scroll-main" [style.width.px]='pivotUnpinnedWidth'>
         <ng-template igxGridFor [igxGridForOf]='EMPTY_DATA' #scrollContainer>
         </ng-template>
     </div>

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

@@ -1136,6 +1136,10 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
      * @hidden @internal
      */
     public rowDimensionWidthToPixels(dim: IPivotDimension): number {
+        if (this.shouldGenerate) {
+            return 0;
+        }
+
         if (!dim.width) {
             return MINIMUM_COLUMN_WIDTH;
         }
@@ -1161,6 +1165,14 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         return this.calcWidth - totalDimWidth;
     }
 
+    public get pivotPinnedWidth() {
+        return !this.shouldGenerate ? (this.isPinningToStart ? this.pinnedWidth : this.headerFeaturesWidth) : 0;
+    }
+
+    public get pivotUnpinnedWidth() {
+        return !this.shouldGenerate ? this.unpinnedWidth : 0;
+    }
+
     public get rowDimensions() {
         return this.pivotConfiguration.rows?.filter(x => x.enabled) || [];
     }