fix(igxGrid): Pinning + RowSelectors integration and sample.

Author: MKirova

projects/igniteui-angular/src/lib/grids/columns/column.component.ts

@@ -1003,8 +1003,8 @@ export class IgxColumnComponent implements AfterContentInit {
     }
 
     get rightPinnedOffset(): string {
-        return this.pinned ?
-            - this.grid.pinnedWidth + 'px' :
+        return this.pinned && !this.grid.isPinningToStart ?
+            - this.grid.pinnedWidth - this.grid.headerFeaturesWidth + 'px' :
             null;
     }
 

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

@@ -180,6 +180,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     private overlayIDs = [];
     private _filteringStrategy: IFilteringStrategy;
     private _sortingStrategy: IGridSortingStrategy;
+    private _pinning: IPinningConfig = { columns: ColumnPinningPosition.Start };
 
     private _hostWidth;
     private _advancedFilteringOverlayId: string;
@@ -813,7 +814,16 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      * ```
      */
     @Input()
-    public pinning: IPinningConfig = { columns: ColumnPinningPosition.Start };
+    get pinning() {
+        return this._pinning;
+    }
+    set pinning(value) {
+        if (value !== this._pinning) {
+            this.resetCaches();
+        }
+        this._pinning = value;
+    }
+
 
     /**
      * Gets/Sets if the built-in column pinning UI should be shown in the toolbar.
@@ -4659,7 +4669,9 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
                 sum += parseInt(col.calcWidth, 10);
             }
         }
-        sum += this.featureColumnsWidth();
+        if (this.pinning.columns === ColumnPinningPosition.Start) {
+            sum += this.featureColumnsWidth();
+        }
 
         return sum;
     }
@@ -4676,6 +4688,10 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         if (this.hasVerticalSroll() && !this.isPercentWidth) {
             width -= this.scrollWidth;
         }
+        if (this.pinning.columns === ColumnPinningPosition.End) {
+            width -= this.featureColumnsWidth();
+        }
+
         return width - this.getPinnedWidth(takeHidden);
     }
 

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

@@ -188,7 +188,7 @@
 </div>
 
 <div class="igx-grid__scroll" [style.height]="'18px'" #scr [hidden]="isHorizontalScrollHidden">
-    <div class="igx-grid__scroll-start" [style.width.px]='pinnedWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>
+    <div class="igx-grid__scroll-start" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>
     <div class="igx-grid__scroll-main" [style.width.px]='unpinnedWidth'>
         <ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>
         </ng-template>

src/app/grid-column-pinning/grid-column-pinning.sample.html

@@ -4,7 +4,7 @@
     </app-page-header>
     <div class="sample-content">
         <div class="sample-column">
-        <igx-grid [pinning]="pinningConfig" #grid1 [data]="data" [width]="'800px'" [height]="'800px'" [rowSelectable]="true">
+        <igx-grid [pinning]="pinningConfig" #grid1 [data]="data" [width]="'800px'" [height]="'800px'" [rowSelectable]="false">
             <igx-column *ngFor="let c of columns" [sortable]="true" [field]="c.field" [header]="c.field" [width]="c.width" [pinned]='c.pinned'
                 [hidden]='c.hidden'>
             </igx-column>
@@ -23,6 +23,9 @@
         <div class="sample-switches">
             <igx-switch [(ngModel)]="grid1.showToolbar">Toolbar</igx-switch>
             <igx-switch [(ngModel)]="grid1.columnPinning" style="padding-left: 10px">Column Pinning</igx-switch>
+            <igx-switch [(ngModel)]="grid1.rowSelectable" style="padding-left: 10px">Row Selectors</igx-switch>
+            <igx-switch (change)='onChange()' style="padding-left: 10px">Left Pinning toggle</igx-switch>
+
         </div>
         </div>
     </div>

src/app/grid-column-pinning/grid-column-pinning.sample.ts

@@ -10,12 +10,19 @@ import { IPinningConfig } from 'projects/igniteui-angular/src/lib/grids/common/g
 })
 
 export class GridColumnPinningSampleComponent implements OnInit {
-
     public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End };
 
     @ViewChild('grid1', { static: true })
     grid1: IgxGridComponent;
 
+    onChange() {
+        if (this.pinningConfig.columns === ColumnPinningPosition.End) {
+            this.pinningConfig = { columns: ColumnPinningPosition.Start };
+        } else {
+            this.pinningConfig = { columns: ColumnPinningPosition.End };
+        }
+    }
+
     data: any[];
     columns: any[];