chore(*): Minor fixes to sync scrollbars.

Author: MKirova

projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts

@@ -1436,10 +1436,14 @@ export class IgxGridForOfDirective<T> extends IgxForOfDirective<T> implements On
      * @internal
      */
     public get sizesCache(): number[] {
-        if (this.syncService.isMaster(this)) {
+        if (this.igxForScrollOrientation === 'horizontal') {
+            if (this.syncService.isMaster(this)) {
+                return this._sizesCache;
+            }
+            return this.syncService.sizesCache(this.igxForScrollOrientation);
+        } else {
             return this._sizesCache;
         }
-        return this.syncService.sizesCache(this.igxForScrollOrientation);
     }
     /**
      * @hidden
@@ -1744,10 +1748,15 @@ export class IgxGridForOfDirective<T> extends IgxForOfDirective<T> implements On
      * @hidden
      */
     protected _calcMaxChunkSize(): number {
-        if (this.syncService.isMaster(this)) {
+        if (this.igxForScrollOrientation === 'horizontal') {
+            if (this.syncService.isMaster(this)) {
+                return super._calcMaxChunkSize();
+            }
+            return this.syncService.chunkSize(this.igxForScrollOrientation);
+        } else {
             return super._calcMaxChunkSize();
         }
-        return this.syncService.chunkSize(this.igxForScrollOrientation);
+
     }
 }
 

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -2931,7 +2931,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         @Inject(IGX_GRID_SERVICE_BASE) public gridAPI: GridServiceType,
         protected transactionFactory: IgxFlatTransactionFactory,
         private elementRef: ElementRef<HTMLElement>,
-        private zone: NgZone,
+        protected zone: NgZone,
         @Inject(DOCUMENT) public document: any,
         public cdr: ChangeDetectorRef,
         protected resolver: ComponentFactoryResolver,
@@ -6945,7 +6945,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         this.cdr.markForCheck();
     }
 
-    private verticalScrollHandler(event) {
+    protected verticalScrollHandler(event) {
         this.verticalScrollContainer.onScroll(event);
         this.disableTransitions = true;
 

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

@@ -26,9 +26,9 @@
             [igxForContainerSize]='calcHeight'
             [igxForItemSize]="hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight"
             #verticalRowDimScrollContainer>
-        <igx-pivot-row-dimension-content  role='row' class="igx-grid-thead" [grid]="this" [hasMRL]="hasColumnLayouts"
+        <igx-pivot-row-dimension-content  role='row' class="igx-grid-thead" [grid]="this"
             [rowIndex]='rowIndex' [rowData]='rowData'
-            [density]="displayDensity" [activeDescendant]="activeDescendant" [width]="pivotRowWidths">
+            [density]="displayDensity" [width]="pivotRowWidths">
         </igx-pivot-row-dimension-content>
         </ng-template>
     </div>

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

@@ -62,6 +62,7 @@ import { IFilteringExpressionsTree } from '../../data-operations/filtering-expre
 import { IgxGridTransaction } from '../common/types';
 import { SortingDirection } from '../../data-operations/sorting-strategy';
 import { GridBaseAPIService } from '../api.service';
+import { IgxGridForOfDirective } from '../../directives/for-of/for_of.directive';
 
 let NEXT_ID = 0;
 const MINIMUM_COLUMN_WIDTH = 200;
@@ -1030,6 +1031,18 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         return this.values.length > 1;
     }
 
+    /**
+ * @hidden @internal
+ */
+    @ViewChild('verticalRowDimScrollContainer', { read: IgxGridForOfDirective, static: true })
+    public verticalRowDimScrollContainer: IgxGridForOfDirective<any>;
+
+    protected verticalScrollHandler(event) {
+        this.verticalRowDimScrollContainer.onScroll(event);
+        super.verticalScrollHandler(event);
+
+    }
+
     /**
      * @hidden
      */

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

@@ -1,5 +1,5 @@
 <div role="rowgroup" class="igx-grid-thead__wrapper" [style.width.px]="width"
-    [attr.aria-activedescendant]="activeDescendant" [class.igx-grid__tr--mrl]="hasMRL">
+    [class.igx-grid__tr--mrl]="hasMRL">
     <div class="igx-grid__tr" role="row" [style.width.px]="width">
         <ng-template ngFor #headerVirtualContainer let-column
             [ngForOf]="rowDimension">
@@ -15,8 +15,8 @@
 
 <ng-template #headerTemplate let-column>
     <div class='igx-grid__tr--header igx-grid__row-indentation--level-{{getLevel(column)}}'
-        (click)="this.selectPivotRow(column, $event)">
-        <igx-icon [attr.draggable]=" false" (click)="grid.toggleRow(getRowDimensionKey(column))">
+        (pointerdown)="selectPivotRow(column, $event)">
+        <igx-icon [attr.draggable]=" false" (pointerdown)="grid.toggleRow(getRowDimensionKey(column))">
             {{ getExpandState(column) ? 'expand_more' : 'chevron_right'}}</igx-icon>
         {{column.header}}
     </div>
@@ -25,7 +25,7 @@
 <ng-template #headerDefaultTemplate let-column>
 
     <div class='igx-grid__tr--header igx-grid__row-indentation--level-{{getLevel(column)}}'
-        (click)="this.selectPivotRow(column, $event)">
+        (pointerdown)="selectPivotRow(column, $event)">
         <igx-icon style='flex-shrink: 0;' [attr.draggable]=" false">
         </igx-icon>
         {{column.header}}