chore(*): Remove empty containers.

Author: MKirova

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

@@ -21,7 +21,7 @@
 <div igxGridBody (keydown.control.c)="copyHandler($event)" (copy)="copyHandler($event)" class="igx-grid__tbody" role="rowgroup">
     <div *ngFor='let dim of rowDimensions' #rowDimensionContainer role="rowgroup" class='igx-grid__tbody-pivot-dimension'>
         <ng-template igxGridFor let-rowData [igxGridForOf]="dataView
-        | pivotGridCellMerging:pivotConfiguration:pivotKeys:pipeTrigger"
+        | pivotGridCellMerging:pivotConfiguration:dim:pivotKeys:pipeTrigger"
             let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll'
             [igxForContainerSize]='calcHeight'
             [igxForItemSize]="renderedRowHeight"

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

@@ -110,44 +110,46 @@ export class IgxPivotCellMergingPipe implements PipeTransform {
     public transform(
         collection: any[],
         config: IPivotConfiguration,
+        dim: IPivotDimension,
         pivotKeys: IPivotKeys,
         _pipeTrigger?: number
     ): any[] {
         if (collection.length === 0 || config.rows.length === 0) return collection;
         const data = collection ? cloneArray(collection, true) : [];
+        const res = [];
 
         const enabledRows = config.rows.filter(x => x.enabled);
-        let prev;
-        for (let dim of enabledRows) {
-            let groupData = [];
-            let prevValue;
-            let prevDim;
-            let prevDimRoot;
-            for (let rec of data) {
-                const dimData = PivotUtil.getDimensionLevel(dim, rec, pivotKeys);
-                const val = rec[dimData.dimension.memberName];
-                const sameSiblingDim = prev ? rec[prev.memberName] : true;
-                if (prevValue !== val && groupData.length > 0 && sameSiblingDim) {
-                    groupData.forEach((gr, ind) => {
-                        if (ind === 0) {
-                            gr[prevDim.dimension.memberName + pivotKeys.rowDimensionSeparator + 'first'] = true;
-                            gr[prevDimRoot.memberName + pivotKeys.rowDimensionSeparator + 'height'] = groupData.length * this.grid.renderedRowHeight;
-                        } else {
-                            gr[prevDimRoot.memberName + pivotKeys.rowDimensionSeparator + 'height'] = 1;
-                        }
-                        gr[prevDim.dimension.memberName + pivotKeys.rowDimensionSeparator + 'rowSpan'] = groupData.length;
-                    });
-                    groupData[groupData.length - 1][prevDim.dimension.memberName + pivotKeys.rowDimensionSeparator + 'last'] = true;
-                    groupData = [];
-                }
-                groupData.push(rec);
-                prevValue = val;
-                prevDim = dimData;
-                prevDimRoot = dim;
+
+        const prevDims = enabledRows.filter((d, ind) => ind < enabledRows.indexOf(dim));
+        let groupData = [];
+        let prevValue;
+        let prevDim;
+        let prevDimRoot;
+        let prevId;
+        for (let rec of data) {
+            const dimData = PivotUtil.getDimensionLevel(dim, rec, pivotKeys);
+            const val = rec[dimData.dimension.memberName];
+            const id = PivotUtil.getRecordKey(rec, dimData.dimension, prevDims, pivotKeys);
+            if (prevValue !== val && groupData.length > 0 && prevId !== id) {
+                const h = groupData.length > 1 ? groupData.length * this.grid.renderedRowHeight : undefined;
+                groupData[0][prevDimRoot.memberName + pivotKeys.rowDimensionSeparator + 'height'] = h;
+                groupData[0][prevDim.dimension.memberName + pivotKeys.rowDimensionSeparator + 'rowSpan'] = groupData.length;
+                res.push(groupData[0]);
+                groupData = [];
             }
-            prev = dim;
+            groupData.push(rec);
+            prevValue = val;
+            prevDim = dimData;
+            prevDimRoot = dim;
+            prevId = id;
+        }
+        if (groupData.length > 0) {
+            const h = groupData.length > 1 ? groupData.length * this.grid.rowHeight + (groupData.length - 1) + 1 : undefined;
+            groupData[0][prevDimRoot.memberName + pivotKeys.rowDimensionSeparator + 'height'] = h;
+            groupData[0][prevDim.dimension.memberName + pivotKeys.rowDimensionSeparator + 'rowSpan'] = groupData.length;
+            res.push(groupData[0]);
         }
-        return data;
+        return res;
     }
 }
 

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

@@ -1,12 +1,12 @@
 <div  role="rowgroup" class="igx-grid-thead__wrapper" [style.width.px]="width"
     [class.igx-grid__tr--mrl]="hasMRL">
     <div class="igx-grid__tr igx-grid__tr-header-row" role="row" [style.width.px]="width">
-            <igx-pivot-row-dimension-header-group *ngIf='isFirst' [ngClass]="rowDimensionColumn.headerGroupClasses"
+            <igx-pivot-row-dimension-header-group [ngClass]="rowDimensionColumn.headerGroupClasses"
                 [ngStyle]="rowDimensionColumn.headerGroupStyles |igxHeaderGroupStyle:rowDimensionColumn:grid.pipeTrigger" [column]="rowDimensionColumn"
                 [style.min-width]="rowDimensionColumn.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
                 [style.flex-basis]="rowDimensionColumn.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
                 [rowIndex]="rowIndex"
-                [style.min-height.px]='headerHeight'>
+                [style.min-height.px]='rowSpan > 1 ? headerHeight : undefined'>
             </igx-pivot-row-dimension-header-group>
     </div>
 </div>

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

@@ -118,7 +118,7 @@ export class IgxPivotRowDimensionContentComponent extends IgxGridHeaderRowCompon
     }
 
     get headerHeight() {
-        return this.rowSpan * this.grid.rowHeight;
+        return this.rowSpan * this.grid.rowHeight + (this.rowSpan - 1);
     }
 
     get isFirst() {