Merge pull request #13455 from IgniteUI/ddincheva/gridSizingFix--15.1

Fix: IgxGrid: Horizontal scrollbar is displayed when row selection is enabled --15.1.x

Author: zdrawku

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

@@ -5487,8 +5487,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
                 parseInt(this.document.defaultView.getComputedStyle(this.nativeElement).getPropertyValue('width'), 10);
         }
 
-        computedWidth -= this.featureColumnsWidth();
-
         const visibleChildColumns = this.visibleColumns.filter(c => !c.columnGroup);
 
 
@@ -5524,6 +5522,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         if (!sumExistingWidths && !columnsToSize) {
             return '0px';
         }
+        computedWidth -= this.featureColumnsWidth();
 
         const columnWidth = Math.floor(!Number.isFinite(sumExistingWidths) ?
             Math.max(computedWidth / columnsToSize, this.minColumnWidth) :
@@ -6348,7 +6347,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     }
 
     /**
-     * Finishes the row transactions on the current row and returns whether the grid editing was canceled. 
+     * Finishes the row transactions on the current row and returns whether the grid editing was canceled.
      *
      * @remarks
      * If `commit === true`, passes them from the pending state to the data (or transaction service)
@@ -6882,8 +6881,9 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
             sizing process which of course, uses values from the caches, thus resulting
             in a broken layout.
         */
-        this.resetCaches(recalcFeatureWidth);
         this.cdr.detectChanges();
+        this.resetCaches(recalcFeatureWidth);
+
         const hasScroll = this.hasVerticalScroll();
         this.calculateGridWidth();
         this.resetCaches(recalcFeatureWidth);

src/app/grid-selection/grid-selection.sample.html

@@ -1,5 +1,6 @@
 <div class="sample-container">
     <div class="sample-actions">
+        <button (click)="log('')">LOG</button>
         <igx-switch [(ngModel)]="grid1.hideRowSelectors">Hide row selectors</igx-switch>
 
         <button igxButton="raised" [igxToggleAction]="dropDownComfortable" [igxDropDownItemNavigation]="dropDownComfortable" displayDensity="comfortable">Cell Selection: {{grid1.cellSelection}}</button>
@@ -16,17 +17,41 @@
         </igx-drop-down>
     </div>
 
-    <igx-grid #grid1 [data]="remote | async" [allowFiltering]="true" [primaryKey]="'ProductID'" (selected)="handleRowSelection()"
-            [width]="'800px'" [height]="'600px'"  (rowSelectionChanging)="log($event)">
-        <igx-column [field]="'ProductID'" [editable]="true" [width]="'80%'"></igx-column>
-        <igx-column [field]="'ProductName'"></igx-column>
-        <igx-column [field]="'UnitsInStock'"></igx-column>
-
-        <!-- <ng-template igxRowSelector let-rowContext>
-            <span class="rowNumberChild">{{ rowContext.key }}</span>
-            <igx-checkbox (click)="handleRowSelectorClick(rowContext)" [checked]="rowContext.selected">
-            </igx-checkbox>
-        </ng-template> -->
+    <igx-grid #grid1 [data]="data" [allowFiltering]="true" [primaryKey]="'ProductID'" (selected)="handleRowSelection()" [rowSelection]="'single'"
+    [height]="'550px'" width="100%" (rowSelectionChanging)="log($event)">
+            <igx-column
+            [field]="'ProductName'"
+            dataType="string"
+            [sortable]="true"
+          ></igx-column>
+          <igx-column
+            [field]="'SupplierID'"
+            dataType="string"
+            [sortable]="true"
+          ></igx-column>
+          <igx-column
+            [field]="'OrderDate'"
+            dataType="date"
+            [sortable]="true"
+          ></igx-column>
+          <igx-column
+            [field]="'ProductID'"
+            dataType="number"
+            [sortable]="true"
+            width="15%"
+          ></igx-column>
+          <igx-column
+            [field]="'UnitsInStock'"
+            dataType="number"
+            [sortable]="true"
+            width="15%"
+          ></igx-column>
+          <igx-column
+            [field]="'Discontinued'"
+            dataType="boolean"
+            [sortable]="true"
+            width="15%"
+          ></igx-column>
     </igx-grid>
 
     <div class="sample-actions">

src/app/grid-selection/grid-selection.sample.ts

@@ -2,6 +2,7 @@ import { AfterViewInit, ChangeDetectorRef, Component, ViewChild } from '@angular
 import { Observable } from 'rxjs';
 import { IgxGridComponent } from 'igniteui-angular';
 import { RemoteService } from '../shared/remote.service';
+import { data } from '../shared/data';
 
 @Component({
     selector: 'app-grid-selection-sample',
@@ -15,14 +16,16 @@ export class GridSelectionComponent implements AfterViewInit {
     public remote: Observable<any[]>;
     public selection = true;
     public selectionModes = ['none', 'single', 'multiple'];
+    public data = [];
 
     constructor(private remoteService: RemoteService, private cdr: ChangeDetectorRef) {
         this.remoteService.urlBuilder = () => this.remoteService.url;
      }
 
      public ngAfterViewInit() {
-        this.remote = this.remoteService.remoteData;
-        this.remoteService.getData(this.grid1.data);
+/*         this.remote = this.remoteService.remoteData;
+        this.remoteService.getData(this.grid1.data); */
+        this.data = data;
         this.cdr.detectChanges();
     }
 
@@ -78,6 +81,9 @@ export class GridSelectionComponent implements AfterViewInit {
 
     public log(args) {
         console.log(args);
+        console.log('WIDTH ', this.grid1.calcWidth);
+        console.log((this.grid1 as any)._columns.map(c => c.calcWidth));
+        console.log('UnpinnedWidth: ', this.grid1.unpinnedWidth);
     }
 
     public callSelectAll() {