Merge pull request #10429 from IgniteUI/mkirova/fix-scrollbar-syncs

Make pivot row dimension content in rows simpler. Use ngFor instead o…

Author: dkamburov

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

@@ -5,6 +5,7 @@ import { IgxPivotRowComponent } from './pivot-row.component';
 import { IgxPivotRowPipe, IgxPivotColumnPipe, IgxPivotGridFilterPipe, IgxPivotRowExpansionPipe } from './pivot-grid.pipes';
 import { IgxGridComponent } from '../grid/grid.component';
 import { IgxPivotHeaderRowComponent } from './pivot-header-row.component';
+import { IgxPivotRowDimensionContentComponent } from './pivot-row-dimension-content.component';
 
 /**
  * @hidden
@@ -14,6 +15,7 @@ import { IgxPivotHeaderRowComponent } from './pivot-header-row.component';
     IgxPivotGridComponent,
     IgxPivotRowComponent,
     IgxPivotHeaderRowComponent,
+    IgxPivotRowDimensionContentComponent,
     IgxPivotRowPipe,
     IgxPivotRowExpansionPipe,
     IgxPivotColumnPipe,
@@ -24,6 +26,7 @@ import { IgxPivotHeaderRowComponent } from './pivot-header-row.component';
     IgxPivotGridComponent,
     IgxPivotRowComponent,
     IgxPivotHeaderRowComponent,
+    IgxPivotRowDimensionContentComponent,
     IgxPivotRowExpansionPipe,
     IgxPivotRowPipe,
     IgxPivotColumnPipe,

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

@@ -1,4 +1,4 @@
-<div class="igx-grid-thead__wrapper" role="row" [style.width.px]="width" *ngIf="!row">
+<div class="igx-grid-thead__wrapper" role="row" [style.width.px]="width">
     <div class="igx-grid__tr" role="row" [style.width.px]="width">
         <div #pivotFilterContainer class="igx-grid__tr-action" [style.min-width.px]="grid.pivotRowWidths"
             (igxDragEnter)="onAreaDragEnter($event, filterArea, 2)" (igxDragLeave)="onAreaDragLeave($event, filterArea)"
@@ -68,7 +68,7 @@
     <!-- Column headers area -->
     <div class="igx-grid__tr" role="row" [style.width.px]="width">
 
-        <ng-container *ngIf="!row">
+        <ng-container>
             <div #pivotContainer class="igx-grid__tr-action" [style.min-width.px]="grid.pivotRowWidths"
                 (igxDragEnter)="onAreaDragEnter($event, rowArea, 0)" (igxDragLeave)="onAreaDragLeave($event, rowArea)"
                 igxDrop (dropped)="onDimDrop($event, rowArea, 0)" (pointerdown)="$event.preventDefault()"
@@ -106,7 +106,7 @@
         <!-- Unpinned columns collection -->
         <ng-template igxGridFor #headerVirtualContainer let-column
             [igxGridForOf]="unpinnedColumnCollection | igxTopLevel" [igxForScrollContainer]="grid.parentVirtDir"
-            [igxForContainerSize]=" row ? grid.pivotRowWidths : grid.unpinnedWidth"
+            [igxForContainerSize]="grid.unpinnedWidth"
             [igxForTrackBy]="grid.trackColumnChanges" [igxForSizePropName]="'calcPixelWidth'"
             [igxForScrollOrientation]="'horizontal'">
             <igx-grid-header-group [ngClass]="column.headerGroupClasses"
@@ -130,5 +130,5 @@
     </div>
 </div>
 <!-- Header thumb area -->
-<div *ngIf="!row" class="igx-grid-thead__thumb" [hidden]="!grid.hasVerticalScroll()" [style.width.px]="grid.scrollSize">
+<div class="igx-grid-thead__thumb" [hidden]="!grid.hasVerticalScroll()" [style.width.px]="grid.scrollSize">
 </div>

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

@@ -35,8 +35,6 @@ export interface IgxGridRowSelectorsTemplateContext {
     templateUrl: './pivot-header-row.component.html'
 })
 export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
-    @Input()
-    public row: IgxPivotRowComponent;
 
     private _dropPos = DropPosition.AfterDropTarget;
     private _dropLeftIndicatorClass = 'igx-pivot-grid__drop-indicator--left';

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

@@ -0,0 +1,15 @@
+<div role="rowgroup" class="igx-grid-thead__wrapper" [style.width.px]="width"
+    [attr.aria-activedescendant]="activeDescendant" [class.igx-grid__tr--mrl]="hasMRL">
+    <!-- Column headers area -->
+    <div class="igx-grid__tr" role="row" [style.width.px]="width">
+        <!-- Unpinned columns collection -->
+        <ng-template ngFor #headerVirtualContainer let-column
+            [ngForOf]="unpinnedColumnCollection | igxTopLevel">
+            <igx-grid-header-group [ngClass]="column.headerGroupClasses"
+                [ngStyle]="column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger" [column]="column"
+                [style.min-width]="column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
+                [style.flex-basis]="column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL">
+            </igx-grid-header-group>
+        </ng-template>
+    </div>
+</div>

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

@@ -0,0 +1,40 @@
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    ElementRef,
+    Input,
+    Renderer2
+} from '@angular/core';
+import { IBaseChipEventArgs } from '../../chips/chip.component';
+import { IgxGridHeaderRowComponent } from '../headers/grid-header-row.component';
+import { DropPosition } from '../moving/moving.service';
+import { PivotDimensionType } from './pivot-grid.interface';
+import { IgxPivotRowComponent } from './pivot-row.component';
+
+export interface IgxGridRowSelectorsTemplateContext {
+    $implicit: {
+        selectedCount: number;
+        totalCount: number;
+        selectAll?: () => void;
+        deselectAll?: () => void;
+    };
+}
+
+/**
+ *
+ * For all intents & purposes treat this component as what a <thead> usually is in the default <table> element.
+ *
+ * This container holds the pivot grid header elements and their behavior/interactions.
+ *
+ * @hidden @internal
+ */
+@Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'igx-pivot-row-dimension-content',
+    templateUrl: './pivot-row-dimension-content.component.html'
+})
+export class IgxPivotRowDimensionContentComponent extends IgxGridHeaderRowComponent {
+    @Input()
+    public row: IgxPivotRowComponent;
+}

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

@@ -1,6 +1,6 @@
     <!-- Row Dimension -->
     <div #rowDimensionContainer>
-            <igx-pivot-header-row class="igx-grid-thead" tabindex="0"
+            <igx-pivot-row-dimension-content class="igx-grid-thead" tabindex="0"
             [grid]="grid"
             [hasMRL]="grid.hasColumnLayouts"
             [density]="grid.displayDensity"
@@ -10,7 +10,7 @@
             (scroll)="grid.preventHeaderScroll($event)"
             [row]="this"
         >
-        </igx-pivot-header-row>
+        </igx-pivot-row-dimension-content>
     </div>