Merge pull request #8560 from IgniteUI/mkirova/fix-8555-10.1.x

fix(igxGrid): Do not set calcWidth to the original width propety. Use…

Author: kdinev

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

@@ -4949,11 +4949,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         const cols = this.hasColumnLayouts ?
             this.visibleColumns.filter(x => x.columnLayout) : this.visibleColumns.filter(x => !x.columnGroup);
         cols.forEach((item) => {
-            const isWidthInPercent = item.width && typeof item.width === 'string' && item.width.indexOf('%') !== -1;
-            if (isWidthInPercent) {
-                item.width = item.calcWidth || MINIMUM_COLUMN_WIDTH + 'px';
-            }
-            colSum += parseInt((item.width || item.defaultWidth), 10) || MINIMUM_COLUMN_WIDTH;
+            colSum += parseInt((item.calcWidth || item.defaultWidth), 10) || MINIMUM_COLUMN_WIDTH;
         });
         if (!colSum) {
             return null;

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

@@ -1659,6 +1659,30 @@ describe('IgxGrid Component Tests #grid', () => {
             expect(cells.length).toBe(30);
             expect(parseInt(grid.hostWidth, 10)).toBe(30 * 136);
         });
+
+        it('should retain column with in % after hiding/showing grid with 100% width', () => {
+            const fix = TestBed.createComponent(IgxGridColumnPercentageWidthComponent);
+            fix.componentInstance.initColumnsRows(5, 3);
+            const grid = fix.componentInstance.grid;
+            fix.detectChanges();
+            grid.width = '100%';
+            fix.detectChanges();
+            grid.columns[0].width = '50%';
+            fix.detectChanges();
+
+            // hide
+            grid.nativeElement.style.display = 'none';
+            // simulate resize observer reflow
+            grid.reflow();
+
+            expect(grid.columns[0].width).toBe('50%');
+
+            grid.nativeElement.style.display = '';
+            // simulate resize observer reflow
+            grid.reflow();
+
+            expect(grid.columns[0].width).toBe('50%');
+        });
     });
 
     describe('IgxGrid - API methods', () => {

src/app/grid-auto-size/grid-auto-size.sample.html

@@ -21,6 +21,7 @@
                 <button igxButton="raised" (click)=" setData(5)">Set small data - 5</button>
                 <button igxButton="raised" (click)=" setData(3)">Set small data - 3</button>
                 <button igxButton="raised" (click)="setData(0)">Set no data</button>
+                <button igxButton="raised" (click)="checkCols()">Check cols</button>
             </div>
             <div [hidden]='gridContainerHidden' [style.height]='containerHeight'>
             <igx-grid
@@ -32,7 +33,7 @@
                 [rowSelection]="selectionMode"
                 [filterMode]="'excelStyleFilter'"
                 [paging]="false"
-                [width]="'800px'"
+                [width]="'100%'"
                 [height]="height">
                 <igx-column *ngFor="let c of columns" [field]="c.field"
                                                     [header]="c.field"

src/app/grid-auto-size/grid-auto-size.sample.ts

@@ -33,10 +33,10 @@ export class GridAutoSizeSampleComponent implements OnInit {
 
         // tslint:disable: max-line-length
         this.columns = [
-            { field: 'ID', width: 150, resizable: true, movable: true, sortable: false, filterable: true, groupable: true, summary: true, type: 'string' },
-            { field: 'CompanyName', width: 150, resizable: true, movable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'string'},
-            { field: 'ContactName', width: 150, resizable: true, movable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'string' },
-            { field: 'ContactTitle', width: 150, resizable: true, movable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'string' },
+            { field: 'ID', width: '25%', resizable: true, movable: true, sortable: false, filterable: true, groupable: true, summary: true, type: 'string' },
+            { field: 'CompanyName', width: '25%', resizable: true, movable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'string'},
+            { field: 'ContactName', width: '25%', resizable: true, movable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'string' },
+            { field: 'ContactTitle', width: '25%', resizable: true, movable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'string' },
             { field: 'Address', width: 150, resizable: true, movable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'string' },
             { field: 'City', width: 150, resizable: true, movable: true, sortable: false, filterable: false, groupable: true, summary: true, type: 'string' },
             { field: 'Region', width: 150, resizable: true, movable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'string' },
@@ -55,6 +55,11 @@ export class GridAutoSizeSampleComponent implements OnInit {
         this.density = this.displayDensities[event.index].label;
     }
 
+    checkCols(): void {
+        const columns = this.grid1.columns;
+        columns.forEach(c => console.log(c.width));
+      }
+
 
     setData(count?) {
         this.data = SAMPLE_DATA.slice(0, count);