Merge pull request #13407 from IgniteUI/bpachilova/fix-13392-15.1.x

fix(grid): round column width when set in percentages - 15.1.x

Author: ChronosSF

projects/igniteui-angular/src/lib/grids/columns/column.component.ts

@@ -2490,7 +2490,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
         const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1;
         const isAutoWidth = colWidth && typeof colWidth === 'string' && colWidth === 'fit-content';
         if (isPercentageWidth) {
-            this._calcWidth = parseFloat(colWidth) / 100 * this.grid.calcWidth;
+            this._calcWidth = Math.floor(parseFloat(colWidth) / 100 * this.grid.calcWidth);
         } else if (!colWidth || isAutoWidth && !this.autoSize) {
             // no width
             this._calcWidth = this.defaultWidth || this.grid.getPossibleColumnWidth();

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

@@ -701,6 +701,25 @@ describe('IgxGrid - multi-column headers #grid', () => {
             const cityColumn = grid.getColumnByName('City');
             expect(cityColumn.width).toBe(columnWidth);
         });
+
+        it("Columns with percent width headers should sum to exactly the parent column group's header width", () => {
+            const gridWidth = "700px";
+            grid.width = gridWidth;
+            fixture.detectChanges();
+            const columnWidth = "30%";
+            componentInstance.columnWidth = columnWidth;
+            fixture.detectChanges();
+
+            const headersWidth = grid.nativeElement
+                .querySelector("igx-grid-header")
+                .getBoundingClientRect().width;
+            const expectedWidth = headersWidth * 3;
+            expect(headersWidth).toBe(Math.round((parseFloat(columnWidth) / 100) * grid.calcWidth));
+            const locationColGroupHeaderWidth = grid.nativeElement
+                .querySelector("igx-grid-header-group")
+                .getBoundingClientRect().width;
+            expect(locationColGroupHeaderWidth).toBe(expectedWidth);
+        });
     });
 
     describe('Column hiding: ', () => {