fix(pivot): Add container div for measuring in pivot vertical containers. (#17006)

Author: MayaKirova

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

@@ -149,14 +149,16 @@
                 [igxForSizePropName]="'height'"
                 #verticalRowDimScrollContainer
             >
-                <igx-pivot-row-dimension-content
-                    class="igx-grid-thead" [grid]="this"
-                    [dimension]="rowData.dimensions[dimIndex]"
-                    [rootDimension]="dim"
-                    [style.height.px]="renderedRowHeight * (rowData.rowSpan || 1)"
-                    [rowIndex]="rowIndex" [rowData]="rowData"
-                    [width]="rowDimensionWidthToPixels(dim)">
-                </igx-pivot-row-dimension-content>
+                <div [attr.data-index]="rowIndex">
+                    <igx-pivot-row-dimension-content
+                        class="igx-grid-thead" [grid]="this"
+                        [dimension]="rowData.dimensions[dimIndex]"
+                        [rootDimension]="dim"
+                        [style.height.px]="renderedRowHeight * (rowData.rowSpan || 1)"
+                        [rowIndex]="rowIndex" [rowData]="rowData"
+                        [width]="rowDimensionWidthToPixels(dim)">
+                    </igx-pivot-row-dimension-content>
+                </div>
             </ng-template>
             <ng-container *ngTemplateOutlet="emptyRowDimensionFill; context: { $implicit: this, widthPx: rowDimensionWidthToPixels(dim) }"></ng-container>
         </div>
@@ -175,7 +177,9 @@
                 [igxForItemSize]="renderedRowHeight"
                 [igxForSizePropName]="'height'"
             >
-                <igx-pivot-row-dimension-mrl-row [rowIndex]="rowIndex" [rowGroup]="rowGroup" [groupedData]="groupedData" [style.height.px]="renderedRowHeight * rowGroup.length"></igx-pivot-row-dimension-mrl-row>
+                <div [attr.data-index]="rowIndex">
+                    <igx-pivot-row-dimension-mrl-row [rowIndex]="rowIndex" [rowGroup]="rowGroup" [groupedData]="groupedData" [style.height.px]="renderedRowHeight * rowGroup.length"></igx-pivot-row-dimension-mrl-row>
+                </div>
             </ng-template>
         }
         <ng-container *ngTemplateOutlet="emptyRowDimensionFill; context: { $implicit: this, widthPx: pivotRowWidths }"></ng-container>