Skip to content

Commit 7f650c9

Browse files
mddragnevmddragnev
authored
fix(columns): Change how column width is parsed - 19.0.x (#14991)
1 parent dcdbc3d commit 7f650c9

File tree

8 files changed

+44
-39
lines changed

8 files changed

+44
-39
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -388,7 +388,7 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
388388
if (val.hidden) {
389389
return acc;
390390
}
391-
return acc + parseInt(val.calcWidth, 10);
391+
return acc + parseFloat(val.calcWidth);
392392
}, 0)}`;
393393
return width + 'px';
394394
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export class IgxColumnLayoutComponent extends IgxColumnGroupComponent implements
4343
* @memberof IgxColumnGroupComponent
4444
*/
4545
public override get width(): any {
46-
const width = this.getFilledChildColumnSizes(this.children).reduce((acc, val) => acc + parseInt(val, 10), 0);
46+
const width = this.getFilledChildColumnSizes(this.children).reduce((acc, val) => acc + parseFloat(val), 0);
4747
return width;
4848
}
4949

@@ -62,7 +62,7 @@ export class IgxColumnLayoutComponent extends IgxColumnGroupComponent implements
6262

6363
if (this.headerGroup && this.headerGroup.hasLastPinnedChildColumn) {
6464
const headerStyles = this.grid.document.defaultView.getComputedStyle(this.headerGroup.nativeElement.children[0]);
65-
borderWidth = parseInt(headerStyles.borderRightWidth, 10);
65+
borderWidth = parseFloat(headerStyles.borderRightWidth);
6666
}
6767

6868
return super.getCalcWidth() + borderWidth;

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1984,7 +1984,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
19841984
columnSizes[col.colStart - 1] = {
19851985
ref: col,
19861986
width: col.width === 'fit-content' ? col.autoSize :
1987-
col.widthSetByUser || this.grid.columnWidthSetByUser ? parseInt(col.calcWidth, 10) : null,
1987+
col.widthSetByUser || this.grid.columnWidthSetByUser ? parseFloat(col.calcWidth) : null,
19881988
colSpan: col.gridColumnSpan,
19891989
colEnd: col.colStart + col.gridColumnSpan,
19901990
widthSetByUser: col.widthSetByUser
@@ -2013,7 +2013,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
20132013
columnSizes[col.colStart - 1] = {
20142014
ref: col,
20152015
width: col.width === 'fit-content' ? col.autoSize :
2016-
col.widthSetByUser || this.grid.columnWidthSetByUser ? parseInt(col.calcWidth, 10) : null,
2016+
col.widthSetByUser || this.grid.columnWidthSetByUser ? parseFloat(col.calcWidth) : null,
20172017
colSpan: col.gridColumnSpan,
20182018
colEnd: col.colStart + col.gridColumnSpan,
20192019
widthSetByUser: col.widthSetByUser
@@ -2027,7 +2027,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
20272027
columnSizes[i] = {
20282028
ref: col,
20292029
width: col.width === 'fit-content' ? col.autoSize :
2030-
col.widthSetByUser || this.grid.columnWidthSetByUser ? parseInt(col.calcWidth, 10) : null,
2030+
col.widthSetByUser || this.grid.columnWidthSetByUser ? parseFloat(col.calcWidth) : null,
20312031
colSpan: col.gridColumnSpan,
20322032
colEnd: col.colStart + col.gridColumnSpan,
20332033
widthSetByUser: col.widthSetByUser
@@ -2091,7 +2091,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
20912091
if (size && !!size.width) {
20922092
result.push(size.width + 'px');
20932093
} else {
2094-
result.push(parseInt(this.grid.getPossibleColumnWidth(), 10) + 'px');
2094+
result.push(parseFloat(this.grid.getPossibleColumnWidth()) + 'px');
20952095
}
20962096
}
20972097
return result;
@@ -2561,14 +2561,14 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
25612561
if (isPercentageWidth && this.grid.isColumnWidthSum) {
25622562
this._calcWidth = this.grid.minColumnWidth;
25632563
} else if (isPercentageWidth ) {
2564-
this._calcWidth = Math.floor(parseFloat(colWidth) / 100 * this.grid.calcWidth);
2564+
this._calcWidth = parseFloat(colWidth) / 100 * this.grid.calcWidth;
25652565
} else if (!colWidth || isAutoWidth && !this.autoSize) {
25662566
// no width
25672567
this._calcWidth = this.defaultWidth || this.grid.getPossibleColumnWidth();
25682568
} else {
25692569
this._calcWidth = this.width;
25702570
}
2571-
this.calcPixelWidth = parseInt(this._calcWidth, 10);
2571+
this.calcPixelWidth = parseFloat(this._calcWidth);
25722572
}
25732573

25742574
/**

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4554,7 +4554,7 @@ export abstract class IgxGridBaseDirective implements GridType,
45544554
let totalWidth = 0;
45554555
let i = 0;
45564556
for (i; i < cols.length; i++) {
4557-
totalWidth += parseInt(cols[i].calcWidth, 10) || 0;
4557+
totalWidth += parseFloat(cols[i].calcWidth) || 0;
45584558
}
45594559
this._totalWidth = totalWidth;
45604560
return totalWidth;
@@ -5400,7 +5400,7 @@ export abstract class IgxGridBaseDirective implements GridType,
54005400
computedWidth = baseWidth;
54015401
} else {
54025402
computedWidth = this.calcWidth ||
5403-
parseInt(this.document.defaultView.getComputedStyle(this.nativeElement).getPropertyValue('width'), 10);
5403+
parseFloat(this.document.defaultView.getComputedStyle(this.nativeElement).getPropertyValue('width'));
54045404
}
54055405

54065406
const visibleChildColumns = this.visibleColumns.filter(c => !c.columnGroup);
@@ -5424,7 +5424,7 @@ export abstract class IgxGridBaseDirective implements GridType,
54245424
const sumExistingWidths = columnsWithSetWidths
54255425
.reduce((prev, curr) => {
54265426
const colWidth = curr.width;
5427-
let widthValue = parseInt(colWidth, 10);
5427+
let widthValue = parseFloat(colWidth);
54285428
if (isNaN(widthValue)) {
54295429
widthValue = MINIMUM_COLUMN_WIDTH;
54305430
}
@@ -5440,9 +5440,9 @@ export abstract class IgxGridBaseDirective implements GridType,
54405440
}
54415441
computedWidth -= this.featureColumnsWidth();
54425442

5443-
const columnWidth = Math.floor(!Number.isFinite(sumExistingWidths) ?
5443+
const columnWidth = !Number.isFinite(sumExistingWidths) ?
54445444
Math.max(computedWidth / columnsToSize, this.minColumnWidth) :
5445-
Math.max((computedWidth - sumExistingWidths) / columnsToSize, this.minColumnWidth));
5445+
Math.max((computedWidth - sumExistingWidths) / columnsToSize, this.minColumnWidth);
54465446

54475447
return columnWidth + 'px';
54485448
}
@@ -6526,8 +6526,8 @@ export abstract class IgxGridBaseDirective implements GridType,
65266526
this._columnWidth = this.width !== null ? this.getPossibleColumnWidth() : this.minColumnWidth + 'px';
65276527
}
65286528
this._columns.forEach((column: IgxColumnComponent) => {
6529-
if (this.hasColumnLayouts && parseInt(this._columnWidth, 10)) {
6530-
const columnWidthCombined = parseInt(this._columnWidth, 10) * (column.colEnd ? column.colEnd - column.colStart : 1);
6529+
if (this.hasColumnLayouts && parseFloat(this._columnWidth)) {
6530+
const columnWidthCombined = parseFloat(this._columnWidth) * (column.colEnd ? column.colEnd - column.colStart : 1);
65316531
column.defaultWidth = columnWidthCombined + 'px';
65326532
} else {
65336533
// D.K. March 29th, 2021 #9145 Consider min/max width when setting defaultWidth property

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

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -551,10 +551,10 @@ describe('IgxGrid - multi-column headers #grid', () => {
551551
fixture.detectChanges();
552552
const scrWitdh = grid.nativeElement.querySelector('.igx-grid__tbody-scrollbar').getBoundingClientRect().width;
553553
const gridWidthInPx = parseInt(gridWidth, 10) - scrWitdh;
554-
const colWidth = Math.floor(gridWidthInPx / 3);
554+
const colWidth = gridWidthInPx / 3;
555555
const colWidthPx = colWidth + 'px';
556556
const locationColGroup = getColGroup(grid, 'Location');
557-
expect(locationColGroup.width).toBe((Math.round(colWidth) * 3) + 'px');
557+
expect(locationColGroup.width).toBe(colWidth * 3 + 'px');
558558
const countryColumn = grid.getColumnByName('Country');
559559
expect(countryColumn.width).toBe(colWidthPx);
560560
const regionColumn = grid.getColumnByName('Region');
@@ -576,7 +576,7 @@ describe('IgxGrid - multi-column headers #grid', () => {
576576

577577
// check group has correct size.
578578
let locationColGroup = getColGroup(grid, 'Location');
579-
let expectedWidth = (200 + Math.floor(grid.calcWidth * 0.7)) + 'px';
579+
let expectedWidth = (200 + grid.calcWidth * 0.7) + 'px';
580580
expect(locationColGroup.width).toBe(expectedWidth);
581581

582582
// check header and content have same size.
@@ -600,7 +600,7 @@ describe('IgxGrid - multi-column headers #grid', () => {
600600
fixture.detectChanges();
601601

602602
locationColGroup = getColGroup(grid, 'Location');
603-
expectedWidth = (200 + Math.floor(grid.calcWidth * 0.7)) + 'px';
603+
expectedWidth = (200 + grid.calcWidth * 0.7) + 'px';
604604
expect(locationColGroup.width).toBe(expectedWidth);
605605

606606
col2Header = grid.getColumnByName('Region').headerCell.nativeElement;
@@ -625,7 +625,7 @@ describe('IgxGrid - multi-column headers #grid', () => {
625625

626626
// check group has correct size. Should fill available space in grid since one column has no width.
627627
const locationColGroup = getColGroup(grid, 'Location');
628-
const expectedWidth = grid.calcWidth - 1 + 'px';
628+
const expectedWidth = grid.calcWidth + 'px';
629629
expect(locationColGroup.width).toBe(expectedWidth);
630630

631631
// check header and content have same size.
@@ -651,10 +651,10 @@ describe('IgxGrid - multi-column headers #grid', () => {
651651

652652
const gridWidthInPx = (parseInt(gridWidth, 10) / 100) *
653653
parseInt(componentInstance.gridWrapperWidthPx, 10) - scrWitdh;
654-
const colWidth = Math.floor(gridWidthInPx / 3);
654+
const colWidth = gridWidthInPx / 3;
655655
const colWidthPx = colWidth + 'px';
656656
const locationColGroup = getColGroup(grid, 'Location');
657-
expect(locationColGroup.width).toBe((Math.round(colWidth) * 3) + 'px');
657+
expect(locationColGroup.width).toBe((colWidth * 3) + 'px');
658658
const countryColumn = grid.getColumnByName('Country');
659659
expect(countryColumn.width).toBe(colWidthPx);
660660
const regionColumn = grid.getColumnByName('Region');
@@ -685,7 +685,7 @@ describe('IgxGrid - multi-column headers #grid', () => {
685685
fixture.detectChanges();
686686

687687
const locationColGroup = getColGroup(grid, 'Location');
688-
const expectedWidth = (Math.floor(grid.calcWidth * 0.2) * 3) + 'px';
688+
const expectedWidth = (grid.calcWidth * 0.2 * 3) + 'px';
689689
expect(locationColGroup.width).toBe(expectedWidth);
690690
const countryColumn = grid.getColumnByName('Country');
691691
expect(countryColumn.width).toBe(gridColWidth);
@@ -717,7 +717,7 @@ describe('IgxGrid - multi-column headers #grid', () => {
717717
fixture.detectChanges();
718718

719719
const locationColGroup = getColGroup(grid, 'Location');
720-
const expectedWidth = (Math.floor(grid.calcWidth * 0.2) * 3) + 'px';
720+
const expectedWidth = (grid.calcWidth * 0.2 * 3) + 'px';
721721
expect(locationColGroup.width).toBe(expectedWidth);
722722
const countryColumn = grid.getColumnByName('Country');
723723
expect(countryColumn.width).toBe(columnWidth);
@@ -739,11 +739,11 @@ describe('IgxGrid - multi-column headers #grid', () => {
739739
.querySelector("igx-grid-header")
740740
.getBoundingClientRect().width;
741741
const expectedWidth = headersWidth * 3;
742-
expect(headersWidth).toBe(Math.floor((parseFloat(columnWidth) / 100) * grid.calcWidth));
742+
expect(parseFloat(headersWidth.toFixed(1))).toBe((parseFloat(columnWidth) / 100) * grid.calcWidth);
743743
const locationColGroupHeaderWidth = grid.nativeElement
744744
.querySelector("igx-grid-header-group")
745745
.getBoundingClientRect().width;
746-
expect(locationColGroupHeaderWidth).toBe(expectedWidth);
746+
expect(parseFloat(locationColGroupHeaderWidth.toFixed(1))).toBe(parseFloat(expectedWidth.toFixed(1)));
747747
});
748748
});
749749

‎projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.spec.ts‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,10 @@ describe('IgxGrid - multi-row-layout #grid', () => {
4343

4444
const firstRowCellsArr = gridFirstRow.cells.toArray();
4545
// the last cell is spaned as much as the first 3 cells
46-
const firstThreeCellsWidth = firstRowCellsArr[0].nativeElement.offsetWidth +
47-
firstRowCellsArr[1].nativeElement.offsetWidth +
48-
firstRowCellsArr[2].nativeElement.offsetWidth;
49-
const lastCellWidth = firstRowCellsArr[3].nativeElement.offsetWidth;
46+
const firstThreeCellsWidth = firstRowCellsArr[0].nativeElement.getBoundingClientRect().width +
47+
firstRowCellsArr[1].nativeElement.getBoundingClientRect().width +
48+
firstRowCellsArr[2].nativeElement.getBoundingClientRect().width;
49+
const lastCellWidth = firstRowCellsArr[3].nativeElement.getBoundingClientRect().width;
5050
expect(2 * firstRowCellsArr[0].nativeElement.offsetHeight).toEqual(firstRowCellsArr[3].nativeElement.offsetHeight);
5151
expect(firstThreeCellsWidth).toEqual(lastCellWidth);
5252
}));
@@ -97,7 +97,10 @@ describe('IgxGrid - multi-row-layout #grid', () => {
9797
GridFunctions.verifyLayoutHeadersAreAligned(grid, gridFirstRow);
9898

9999
// verify block style
100-
expect(grid.columnList.first.getGridTemplate(false)).toBe('200px 200px 200px');
100+
let sizes = grid.columnList.first.getGridTemplate(false).split(' ').map(width => parseFloat(width).toFixed(2) + "px").join(' ');
101+
102+
103+
expect(sizes).toBe('200.33px 200.33px 200.33px');
101104
expect(grid.columnList.first.getGridTemplate(true)).toBe('repeat(3,1fr)');
102105

103106
// creating an incomplete layout 2
@@ -112,8 +115,8 @@ describe('IgxGrid - multi-row-layout #grid', () => {
112115
}];
113116
fixture.componentInstance.grid.width = '617px';
114117
fixture.detectChanges();
115-
116-
expect(grid.columnList.first.getGridTemplate(false)).toBe('200px 200px 200px');
118+
sizes = grid.columnList.first.getGridTemplate(false).split(' ').map(width => parseFloat(width).toFixed(2) + "px").join(' ');
119+
expect(sizes).toBe('200.33px 200.33px 200.33px');
117120
expect(grid.columnList.first.getGridTemplate(true)).toBe('repeat(3,1fr)');
118121

119122
}));
@@ -129,11 +132,13 @@ describe('IgxGrid - multi-row-layout #grid', () => {
129132
expect(grid.gridAPI.get_cell_by_index(0, 'ID').nativeElement.offsetWidth).toBe(200);
130133
expect(grid.gridAPI.get_cell_by_index(0, 'CompanyName').nativeElement.offsetWidth).toBe(200);
131134
expect(grid.gridAPI.get_cell_by_index(0, 'ContactName').nativeElement.offsetWidth).toBe(200);
132-
expect(grid.gridAPI.get_cell_by_index(0, 'ContactTitle').nativeElement.offsetWidth).toBe(200 * 3);
135+
expect(+grid.gridAPI.get_cell_by_index(0, 'ContactTitle').nativeElement.getBoundingClientRect().width.toFixed(3))
136+
.toBe(+(grid.gridAPI.get_cell_by_index(0, 'ID').nativeElement.getBoundingClientRect().width * 3).toFixed(3));
133137

134138
// check group blocks
135139
let groupHeaderBlocks = fixture.debugElement.query(By.css('.igx-grid-thead')).queryAll(By.css(GRID_MRL_BLOCK_CLASS));
136-
expect(groupHeaderBlocks[0].nativeElement.clientWidth).toBe(200 * 3);
140+
expect(+groupHeaderBlocks[0].nativeElement.getBoundingClientRect().width.toFixed(3))
141+
.toBe(+(grid.gridAPI.get_cell_by_index(0, 'ID').nativeElement.getBoundingClientRect().width * 3).toFixed(3));
137142
expect(groupHeaderBlocks[0].nativeElement.clientHeight).toBe(51 * 3);
138143

139144
let gridFirstRow = grid.rowList.first;
@@ -1051,7 +1056,7 @@ describe('IgxGrid - multi-row-layout #grid', () => {
10511056
GridFunctions.verifyLayoutHeadersAreAligned(grid, gridFirstRow);
10521057

10531058
const groupRowBlocks = fixture.debugElement.query(By.css('.igx-grid__tbody')).queryAll(By.css(GRID_MRL_BLOCK_CLASS));
1054-
expect(groupRowBlocks[0].nativeElement.style.gridTemplateColumns).toEqual('118px 118px 118px 118px 118px 118px');
1059+
expect(groupRowBlocks[0].nativeElement.style.gridTemplateColumns).toEqual('118.4px 118.4px 118.4px 118.4px 118.4px 118.4px');
10551060
}));
10561061

10571062
it('should disregard hideGroupedColumns option and not hide columns when grouping when having column layouts.', fakeAsync(() => {

‎projects/igniteui-angular/src/lib/grids/headers/pipes.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export class IgxHeaderGroupWidthPipe implements PipeTransform {
2222

2323
public transform(width: any, minWidth: any, hasLayout: boolean) {
2424
const isFitContent = width === 'fit-content';
25-
return hasLayout ? '' : isFitContent ? width : `${Math.max(parseInt(width), minWidth)}px`;
25+
return hasLayout ? '' : isFitContent ? width : `${Math.max(parseFloat(width), minWidth)}px`;
2626
}
2727
}
2828

‎projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2054,7 +2054,7 @@ export class GridFunctions {
20542054
}
20552055
}
20562056
const expectedWidth = Math.max(parseFloat(cell.column.calcWidth) * cell.column.gridColumnSpan, sum);
2057-
expect(cellElem.clientWidth - expectedWidth).toBeLessThan(1);
2057+
expect(cellElem.getBoundingClientRect().width - expectedWidth).toBeLessThan(1);
20582058
// check height
20592059
const expectedHeight = cell.grid.rowHeight * cell.gridRowSpan;
20602060
expect(cellElem.offsetHeight).toBe(expectedHeight);

0 commit comments

Comments
 (0)