fix(pivotGrid): Cover additional cases for empty row dimension list. Add separate fill style and template.

Author: skrustev

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -3492,23 +3492,19 @@
         }
     }
 
-    .igx-grid__tbody-pivot-dimension {
-        > .igx-grid-thead__wrapper {
+    .igx-pivot-grid-row-filler__wrapper {
+        .igx-grid-thead__wrapper {
+            height: 100%;
             border-bottom: initial;
-        }
 
-        .igx-grid-th {
-            height: 100%;
+            .igx-grid-th {
+                height: 100%;
+            }
         }
     }
 
     %igx-grid__tbody-pivot-mrl-dimension {
-        > .igx-grid-thead__wrapper {
-            border-bottom: initial;
-        }
-
         .igx-grid-th {
-            height: 100%;
             border-bottom: none;
         }
     }

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

@@ -154,11 +154,8 @@
                                              [width]="rowDimensionWidthToPixels(dim)">
             </igx-pivot-row-dimension-content>
         </ng-template>
-        <div *ngIf="remainingBottomSize > 0" class="igx-grid-thead__wrapper" [style.height.px]="remainingBottomSize" [style.width.px]="rowDimensionWidthToPixels(dim)">
-            <div class="igx-grid-th"></div>
-        </div>
+        <ng-container *ngTemplateOutlet="emptyRowDimensionFill; context: { $implicit: this, widthPx: rowDimensionWidthToPixels(dim) }"></ng-container>
     </div>
-
 </ng-template>
 
 <ng-template #horizontalRowDimensionsTemplate>
@@ -175,20 +172,21 @@
                 <igx-pivot-row-dimension-mrl-row [rowIndex]="rowIndex" [rowGroup]="rowGroup" [groupedData]="groupedData" [style.height.px]="renderedRowHeight * rowGroup.length"></igx-pivot-row-dimension-mrl-row>
             </ng-template>
         </ng-container>
-        <div *ngIf="remainingBottomSize > 0" class="igx-grid-thead__wrapper" [style.height.px]="remainingBottomSize" [style.width.px]="pivotRowWidths">
-            <div class="igx-grid-th"></div>
-        </div>
+        <ng-container *ngTemplateOutlet="emptyRowDimensionFill; context: { $implicit: this, widthPx: pivotRowWidths }"></ng-container>
     </div>
 </ng-template>
 
 <ng-template #emptyRowDimensionsTemplate>
-    <div tabindex="0" *ngIf="columnDimensions.length > 0 || values.length > 0" #rowDimensionContainer role="rowgroup" class="igx-grid__tbody-pivot-dimension" (focus)="navigation.focusTbody($event)" (keydown)="navigation.handleNavigation($event)">
-        <igx-pivot-row-dimension-content role="row" class="igx-grid-thead" [grid]="this"
-            [dimension]="emptyRowDimension"
-            [rootDimension]="emptyRowDimension"
-            [rowIndex]="0" [rowData]="dataView[0]"
-            [width]="rowDimensionWidthToPixels(emptyRowDimension)">
-        </igx-pivot-row-dimension-content>
+    <div tabindex="0" #rowDimensionContainer role="rowgroup" class="igx-grid__tbody-pivot-dimension" (focus)="navigation.focusTbody($event)" (keydown)="navigation.handleNavigation($event)">
+        @if ((columnDimensions.length > 0 || values.length > 0) && data.length > 0) {
+            <igx-pivot-row-dimension-content role="row" class="igx-grid-thead" [grid]="this"
+                [dimension]="emptyRowDimension"
+                [rootDimension]="emptyRowDimension"
+                [rowIndex]="0" [rowData]="dataView[0]"
+                [width]="rowDimensionWidthToPixels(emptyRowDimension)">
+            </igx-pivot-row-dimension-content>
+        }
+        <ng-container *ngTemplateOutlet="emptyRowDimensionFill; context: { $implicit: this, widthPx: rowDimensionWidthToPixels(emptyRowDimension) }"></ng-container>
     </div>
 </ng-template>
 
@@ -198,6 +196,17 @@
     </span>
 </ng-template>
 
+<ng-template #emptyRowDimensionFill let-width="widthPx">
+    @if (emptyBottomSize > 0) {
+        <div class="igx-pivot-grid-row-filler__wrapper" [style.height.px]="emptyBottomSize" [style.width.px]="width">
+            <!-- Reuse header styles to keep visuals consistent -->
+            <div class="igx-grid-thead__wrapper">
+                <div class="igx-grid-th"></div>
+            </div>
+        </div>
+    }
+</ng-template>
+
 <div [hidden]="true">
     <igx-grid-excel-style-filtering [maxHeight]="excelStyleFilterMaxHeight" [minHeight]="excelStyleFilterMinHeight">
         <div igxExcelStyleColumnOperations [hidden]="true"></div>

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

@@ -1151,7 +1151,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         return false;
     }
 
-    protected get remainingBottomSize() {
+    protected get emptyBottomSize() {
         return this.totalHeight - (<any>this.verticalScroll).scrollComponent.size;
     }
 

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

@@ -227,8 +227,9 @@
                 </div>
             </ng-container>
 
-            <div class="igx-grid__tr igx-grid__tr-header-row" role="row" [style.width.px]="grid.pivotRowWidths - 1">
-                <ng-container *ngIf="grid.pivotUI.showRowHeaders && grid.visibleRowDimensions.length > 0">
+            <!-- Pivot Row Headers only area. If there are defined row dimension, but data is missing so no visibleRowDimensions are calculated, will show just empty area. -->
+            <ng-container *ngIf="grid.pivotUI.showRowHeaders && grid.rowDimensions.length > 0">
+                <div class="igx-grid__tr igx-grid__tr-header-row" role="row" [style.width.px]="grid.pivotRowWidths - 1">
                     <ng-container *ngFor="let dim of grid.visibleRowDimensions; index as colIndex;last as isLast">
                         <igx-pivot-row-header-group #rowDimensionHeaders *ngIf="getRowDimensionColumn(dim) as dimCol"
                             [ngClass]="dimCol.headerGroupClasses"
@@ -241,8 +242,8 @@
                             [rowIndex]="-1" >
                         </igx-pivot-row-header-group>
                     </ng-container>
-                </ng-container>
-            </div>
+                </div>
+            </ng-container>
 
             <!-- Pinned columns collection from the start -->
             <ng-container *ngIf="pinnedColumnCollection.length && grid.isPinningToStart">