Merge branch 'master' into mkirova/pinned-chip-refactor

ChronosSF · web-flow · commit bdd0ee59bef0 · 2020-04-30T21:07:41.000+03:00
diff --git a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts
@@ -1,4 +1,4 @@
-import { FilterMode, ColumnPinningPosition, RowPinningPosition } from './enums';
+import { FilterMode } from './enums';
 import { DisplayDensity } from '../../core/displayDensity';
 import { EventEmitter } from '@angular/core';
 import { IFilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
@@ -67,8 +67,3 @@ export interface GridType extends IGridDataBindable {
     isDetailRecord(rec: any): boolean;
     isGroupByRecord(rec: any): boolean;
 }
-
-export interface IPinningConfig {
-    columns?: ColumnPinningPosition;
-    rows?: RowPinningPosition;
-}
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
@@ -51,7 +51,7 @@ import { GridBaseAPIService } from './api.service';
 import { IgxGridCellComponent } from './cell.component';
 import { IColumnVisibilityChangedEventArgs } from './hiding/column-hiding-item.directive';
 import { ISummaryExpression } from './summaries/grid-summary';
-import { RowEditPositionStrategy } from './grid.common';
+import { RowEditPositionStrategy, IPinningConfig } from './grid.common';
 import { IgxGridToolbarComponent } from './toolbar/grid-toolbar.component';
 import { IgxRowDirective } from './row.directive';
 import { IgxGridHeaderComponent } from './headers/grid-header.component';
@@ -138,7 +138,7 @@ import {
     IPinRowEventArgs
 } from './common/events';
 import { IgxAdvancedFilteringDialogComponent } from './filtering/advanced-filtering/advanced-filtering-dialog.component';
-import { GridType, IPinningConfig } from './common/grid.interface';
+import { GridType } from './common/grid.interface';
 import { IgxDecimalPipeComponent, IgxDatePipeComponent } from './common/pipes';
 import { DropPosition } from './moving/moving.service';
 import { IgxHeadSelectorDirective, IgxRowSelectorDirective } from './selection/row-selectors';
@@ -3054,7 +3054,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         this._zoneBegoneListeners();
 
         const vertScrDC = this.verticalScrollContainer.displayContainer;
-        vertScrDC.addEventListener('scroll', this.scrollHandler);
+        vertScrDC.addEventListener('scroll', this.preventContainerScroll);
 
         this._pinnedRowList.changes
         .pipe(takeUntil(this.destroy$))
@@ -3132,7 +3132,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
             this.verticalScrollContainer.getScroll().removeEventListener('scroll', this.verticalScrollHandler);
             this.headerContainer.getScroll().removeEventListener('scroll', this.horizontalScrollHandler);
             const vertScrDC = this.verticalScrollContainer.displayContainer;
-            vertScrDC.removeEventListener('scroll', this.scrollHandler);
+            vertScrDC.removeEventListener('scroll', this.preventContainerScroll);
         });
     }
 
@@ -5583,11 +5583,15 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     /**
      * @hidden @internal
      */
-    public scrollHandler = (event) => {
-        this.headerContainer.scrollPosition += event.target.scrollLeft;
-        this.verticalScrollContainer.scrollPosition += event.target.scrollTop;
-        event.target.scrollLeft = 0;
-        event.target.scrollTop = 0;
+    public preventContainerScroll = (evt) => {
+        if (evt.target.scrollTop !== 0) {
+            this.verticalScrollContainer.addScrollTop(evt.target.scrollTop);
+            evt.target.scrollTop = 0;
+        }
+        if (evt.target.scrollLeft !== 0) {
+            this.headerContainer.scrollPosition += evt.target.scrollLeft;
+            evt.target.scrollLeft = 0;
+        }
     }
 
     /**
@@ -6121,7 +6125,8 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     private configureRowEditingOverlay(rowID: any, useOuter = false) {
         this.rowEditSettings.outlet = useOuter ? this.parentRowOutletDirective : this.rowOutletDirective;
         this.rowEditPositioningStrategy.settings.container = this.tbody.nativeElement;
-        const targetRow = this.gridAPI.get_row_by_key(rowID);
+        const pinned =  this._pinnedRecordIDs.indexOf(rowID) !== -1;
+        const targetRow = !pinned ? this.gridAPI.get_row_by_key(rowID) : this.pinnedRows.find(x => x.rowID === rowID);
         if (!targetRow) {
             return;
         }
diff --git a/projects/igniteui-angular/src/lib/grids/grid.common.ts b/projects/igniteui-angular/src/lib/grids/grid.common.ts
@@ -3,6 +3,7 @@ import { ConnectedPositioningStrategy } from '../services';
 import { VerticalAlignment, PositionSettings } from '../services/overlay/utilities';
 import { scaleInVerBottom, scaleInVerTop } from '../animations/main';
 import { IgxForOfSyncService } from '../directives/for-of/for_of.sync.service';
+import { ColumnPinningPosition, RowPinningPosition } from './common/enums';
 
 
 @Directive({
@@ -19,6 +20,14 @@ export interface RowEditPositionSettings extends PositionSettings {
     container?: HTMLElement;
 }
 
+/**
+ * An interface describing settings for row/column pinning position.
+ */
+export interface IPinningConfig {
+    columns?: ColumnPinningPosition;
+    rows?: RowPinningPosition;
+}
+
 /**
  * @hidden
  */
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts
@@ -6,7 +6,7 @@ import { IgxGridComponent } from './grid.component';
 import { IgxGridModule } from './index';
 import { configureTestSuite } from '../../test-utils/configure-suite';
 import { ColumnPinningPosition, RowPinningPosition } from '../common/enums';
-import { IPinningConfig } from '../common/grid.interface';
+import { IPinningConfig } from '../grid.common';
 import { SampleTestData } from '../../test-utils/sample-test-data.spec';
 import { GridFunctions } from '../../test-utils/grid-functions.spec';
 import { SortingDirection } from '../../data-operations/sorting-expression.interface';
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts
@@ -477,16 +477,6 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
         };
     }
 
-    /**
-     * @hidden @internal
-     */
-    public preventContainerScroll(evt) {
-        if (evt.target.scrollTop !== 0) {
-            this.verticalScrollContainer.addScrollTop(evt.target.scrollTop);
-            evt.target.scrollTop = 0;
-        }
-    }
-
     /**
      * @hidden @internal
      */
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.pinning.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.pinning.spec.ts
@@ -6,7 +6,7 @@ import { IgxGridModule } from './index';
 import { IgxStringFilteringOperand } from '../../data-operations/filtering-condition';
 import { configureTestSuite } from '../../test-utils/configure-suite';
 import { ColumnPinningPosition, GridSelectionMode } from '../common/enums';
-import { IPinningConfig } from '../common/grid.interface';
+import { IPinningConfig } from '../grid.common';
 import { wait, UIInteractions } from '../../test-utils/ui-interactions.spec';
 import { GridSummaryFunctions,
          GridSelectionFunctions,
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html
@@ -86,7 +86,7 @@
     <div class="igx-grid__tbody-content"  tabindex="0" (focus)="navigation.focusTbody($event)" [attr.aria-activedescendant]="activeDescendant"
      (keydown)="navigation.dispatchEvent($event)" (onDragStop)="selectionService.dragMode = $event"
         (onDragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode" role="rowgroup"
-        [style.height.px]='totalHeight' [style.width.px]='calcWidth' #tbody (scroll)='scrollHandler($event)'>
+        [style.height.px]='totalHeight' [style.width.px]='calcWidth' #tbody (scroll)='preventContainerScroll($event)'>
         <span *ngIf="hasMovableColumns && draggedColumn && pinnedColumns.length <= 0"
             [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
             class="igx-grid__scroll-on-drag-left"></span>
diff --git a/projects/igniteui-angular/src/lib/grids/state.directive.ts b/projects/igniteui-angular/src/lib/grids/state.directive.ts
@@ -12,7 +12,7 @@ import { GridSelectionRange } from './selection/selection.service';
 import { IGroupByExpandState } from '../data-operations/groupby-expand-state.interface';
 import { IGroupingState } from '../data-operations/groupby-state.interface';
 import { IgxGridComponent } from './grid/grid.component';
-import { IPinningConfig } from './common/grid.interface';
+import { IPinningConfig } from './grid.common';
 
 export interface IGridState {
     columns?: IColumnState[];
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html
@@ -67,7 +67,7 @@
 <div igxGridBody (keydown.control.c)="copyHandlerIE()" (copy)="copyHandler($event)" class="igx-grid__tbody">
     <div class="igx-grid__tbody-content"  tabindex="0" (focus)="navigation.focusTbody($event)" [attr.aria-activedescendant]="activeDescendant" (keydown)="navigation.dispatchEvent($event)" role="rowgroup" (onDragStop)="selectionService.dragMode = $event"
         (onDragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode"
-        [style.height.px]='totalHeight' [style.width.px]='calcWidth' #tbody (scroll)='scrollHandler($event)'>
+        [style.height.px]='totalHeight' [style.width.px]='calcWidth' #tbody (scroll)='preventContainerScroll($event)'>
         <span *ngIf="hasMovableColumns && draggedColumn && pinnedColumns.length <= 0"
             [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
             class="igx-grid__scroll-on-drag-left"></span>
diff --git a/projects/igniteui-angular/src/lib/test-utils/hierarchical-grid-components.spec.ts b/projects/igniteui-angular/src/lib/test-utils/hierarchical-grid-components.spec.ts
@@ -4,7 +4,7 @@ import { IgxColumnComponent } from '../grids';
 import { IgxHierarchicalTransactionServiceFactory } from '../grids/hierarchical-grid/hierarchical-grid-base.directive';
 import { IgxHierarchicalGridComponent } from '../grids/hierarchical-grid/hierarchical-grid.component';
 import { IgxRowIslandComponent } from '../grids/hierarchical-grid/row-island.component';
-import { IPinningConfig } from '../grids/common/grid.interface';
+import { IPinningConfig } from '../grids/grid.common';
 import { ColumnPinningPosition, RowPinningPosition } from '../grids/common/enums';
 
 @Component({
diff --git a/src/app/grid-column-pinning/grid-column-pinning.sample.ts b/src/app/grid-column-pinning/grid-column-pinning.sample.ts
@@ -1,6 +1,5 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { IgxGridComponent, ColumnPinningPosition, RowPinningPosition, GridSelectionMode, IgxGridRowComponent } from 'igniteui-angular';
-import { IPinningConfig } from 'projects/igniteui-angular/src/lib/grids/common/grid.interface';
+import { IgxGridComponent, ColumnPinningPosition, RowPinningPosition, GridSelectionMode, IgxGridRowComponent, IPinningConfig } from 'igniteui-angular';
 
 @Component({
     providers: [],
diff --git a/src/app/grid-row-pinning/grid-row-pinning.sample.html b/src/app/grid-row-pinning/grid-row-pinning.sample.html
@@ -18,7 +18,7 @@
                 <igx-switch (change)='onRowChange()' style="padding-left: 10px"> Bottom Row Pinning toggle</igx-switch>
                 <igx-switch (change)='onChange()' style="padding-left: 10px"> Right Column Pinning toggle</igx-switch>
             </div>
-            <igx-grid [igxGridState]="options" [allowFiltering]='true' [primaryKey]='"ID"' [pinning]="pinningConfig" [paging]="true"
+            <igx-grid [rowEditable]="true" [igxGridState]="options" [allowFiltering]='true' [primaryKey]='"ID"' [pinning]="pinningConfig" [paging]="true"
                 [columnHiding]='true' [showToolbar]='true' [columnPinning]='true' #grid1 [data]="data" [width]="'800px'"
                 [height]="'600px'" [rowSelection]="true">
 
diff --git a/src/app/grid-row-pinning/grid-row-pinning.sample.ts b/src/app/grid-row-pinning/grid-row-pinning.sample.ts
@@ -12,9 +12,9 @@ import {
     DisplayDensity,
     IgxHierarchicalGridComponent,
     IDisplayDensityOptions,
-    GridSelectionMode
+    GridSelectionMode,
+    IPinningConfig
 } from 'igniteui-angular';
-import { IPinningConfig } from 'projects/igniteui-angular/src/lib/grids/common/grid.interface';
 import { IgxIconService } from 'projects/igniteui-angular/src/lib/icon/icon.service';
 import icons from 'projects/igniteui-angular/src/lib/grids/filtering/svgIcons';
 
diff --git a/src/app/grid-summaries/grid-summaries.sample.ts b/src/app/grid-summaries/grid-summaries.sample.ts
@@ -4,10 +4,9 @@ import {
     IgxGridComponent,
     IgxNumberSummaryOperand,
     IgxSummaryResult,
-    ColumnPinningPosition
+    ColumnPinningPosition,
+    IPinningConfig
 } from 'igniteui-angular';
-import { IPinningConfig } from 'projects/igniteui-angular/src/lib/grids/common/grid.interface';
-
 
 class MySummary extends IgxNumberSummaryOperand {
 
