From b6193147cb8883a2b3e8be14fc9e9730172986cc Mon Sep 17 00:00:00 2001
From: Diyan Dimitrov <ddimitrov@infragistics.com>
Date: Wed, 14 Nov 2018 11:45:08 +0200
Subject: [PATCH 1/3] test(grid): add test for a column width in % #1245

---
 .../src/lib/grids/grid/grid.component.spec.ts | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)

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 8b9fb8df079..43b5bbc3bc9 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
@@ -304,6 +304,7 @@ describe('IgxGrid Component Tests', () => {
             TestBed.configureTestingModule({
                 declarations: [
                     IgxGridDefaultRenderingComponent,
+                    IgxGridColumnPercentageWidthComponent,
                     IgxGridWrappedInContComponent,
                     IgxGridFormattingComponent
                 ],
@@ -751,6 +752,16 @@ describe('IgxGrid Component Tests', () => {
                 }
             });
         });
+
+        fit('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 - keyboard navigation tests', () => {
@@ -3168,6 +3179,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">

From dff95626da6de0f8435ef35eab0d444a2f61af6d Mon Sep 17 00:00:00 2001
From: Diyan Dimitrov <ddimitrov@infragistics.com>
Date: Wed, 14 Nov 2018 11:49:23 +0200
Subject: [PATCH 2/3] fix(grid): convert % to px when calculating default width
 #1245

---
 .../src/lib/grids/grid-base.component.ts                 | 9 ++++++++-
 1 file changed, 8 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 a37eb5ede07..c444050865e 100644
--- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts
@@ -3539,7 +3539,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) :

From 667e777950a3c89b16230ec240cd0e44b98dbcf8 Mon Sep 17 00:00:00 2001
From: Diyan Dimitrov <ddimitrov@infragistics.com>
Date: Wed, 14 Nov 2018 11:51:07 +0200
Subject: [PATCH 3/3] test(grid): remove fit #1245

---
 .../igniteui-angular/src/lib/grids/grid/grid.component.spec.ts  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 43b5bbc3bc9..2d69d1ab099 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
@@ -753,7 +753,7 @@ describe('IgxGrid Component Tests', () => {
             });
         });
 
-        fit('Should calculate default column width when a column has width in %', () => {
+        it('Should calculate default column width when a column has width in %', () => {
             const fix = TestBed.createComponent(IgxGridColumnPercentageWidthComponent);
             fix.componentInstance.initColumnsRows(5, 3);
             fix.detectChanges();