Fix - Convert % column width to px when calculating default column wi…

…dth (#3191) * 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
IgniteUI · Jan 3, 2019 · 1b794e9 · 1b794e9
1 parent 1aee766
commit 1b794e9
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 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
@@ -3538,7 +3538,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
@@ -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', () => {
@@ -3231,6 +3242,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">