From 2736873b32dc27a75665eee0ac711508e1a48029 Mon Sep 17 00:00:00 2001
From: Diyan Dimitrov <43128948+DiyanDimitrov@users.noreply.github.com>
Date: Thu, 3 Jan 2019 11:35:21 +0200
Subject: [PATCH] Fix - Convert % column width to px when calculating default
 column width (#3319)

* test(grid): add test for a column width in % #1245

* fix(grid): convert % to px when calculating default width #1245

* test(grid): remove fit #1245
---
 .../src/lib/grids/grid-base.component.ts      |  9 ++++++-
 .../src/lib/grids/grid/grid.component.spec.ts | 25 +++++++++++++++++++
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts
index 15fa881891d..40e1bb6fad8 100644
--- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts
@@ -3687,7 +3687,14 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         const columnsToSize = visibleChildColumns.length - columnsWithSetWidths.length;
 
         const sumExistingWidths = columnsWithSetWidths
-            .reduce((prev, curr) => prev + parseInt(curr.width, 10), 0);
+            .reduce((prev, curr) => {
+                const colWidth = curr.width;
+                const widthValue = parseInt(colWidth, 10);
+                const currWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1 ?
+                    widthValue / 100 * computedWidth :
+                    widthValue;
+                return prev + currWidth;
+            }, 0);
 
         const columnWidth = !Number.isFinite(sumExistingWidths) ?
             Math.max(computedWidth / columnsToSize, MINIMUM_COLUMN_WIDTH) :
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts
index 607807c2a7b..db311095766 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts
@@ -305,6 +305,7 @@ describe('IgxGrid Component Tests', () => {
             TestBed.configureTestingModule({
                 declarations: [
                     IgxGridDefaultRenderingComponent,
+                    IgxGridColumnPercentageWidthComponent,
                     IgxGridWrappedInContComponent,
                     IgxGridFormattingComponent
                 ],
@@ -752,6 +753,16 @@ describe('IgxGrid Component Tests', () => {
                 }
             });
         });
+
+        it('Should calculate default column width when a column has width in %', () => {
+            const fix = TestBed.createComponent(IgxGridColumnPercentageWidthComponent);
+            fix.componentInstance.initColumnsRows(5, 3);
+            fix.detectChanges();
+
+            const grid = fix.componentInstance.grid;
+            expect(grid.columns[1].width).toEqual('150');
+            expect(grid.columns[1].width).toEqual('150');
+        });
     });
 
     describe('IgxGrid - API methods', () => {
@@ -3232,6 +3243,20 @@ export class IgxGridDefaultRenderingComponent {
     }
 }
 
+@Component({
+    template: `<igx-grid #grid [data]="data" [width]="'500px'" (onColumnInit)="initColumns($event)">
+        <igx-column *ngFor="let col of columns" [field]="col.key" [header]="col.key" [dataType]="col.dataType">
+        </igx-column>
+    </igx-grid>`
+})
+export class IgxGridColumnPercentageWidthComponent extends IgxGridDefaultRenderingComponent {
+    public initColumns(column) {
+        if (column.index === 0) {
+            column.width = '40%';
+        }
+    }
+}
+
 @Component({
     template:
         `<div [style.width.px]="outerWidth" [style.height.px]="outerHeight">