Skip to content

Commit 9fa1ee2

Browse files
mddragnevmddragnev
authored
fix(columns): Change how column width is parsed - 18.2.x (#15008)
1 parent 14c93bf commit 9fa1ee2

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
@@ -1953,7 +1953,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
19531953
columnSizes[col.colStart - 1] = {
19541954
ref: col,
19551955
width: col.width === 'fit-content' ? col.autoSize :
1956-
col.widthSetByUser || this.grid.columnWidthSetByUser ? parseInt(col.calcWidth, 10) : null,
1956+
col.widthSetByUser || this.grid.columnWidthSetByUser ? parseFloat(col.calcWidth) : null,
19571957
colSpan: col.gridColumnSpan,
19581958
colEnd: col.colStart + col.gridColumnSpan,
19591959
widthSetByUser: col.widthSetByUser
@@ -1982,7 +1982,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
19821982
columnSizes[col.colStart - 1] = {
19831983
ref: col,
19841984
width: col.width === 'fit-content' ? col.autoSize :
1985-
col.widthSetByUser || this.grid.columnWidthSetByUser ? parseInt(col.calcWidth, 10) : null,
1985+
col.widthSetByUser || this.grid.columnWidthSetByUser ? parseFloat(col.calcWidth) : null,
19861986
colSpan: col.gridColumnSpan,
19871987
colEnd: col.colStart + col.gridColumnSpan,
19881988
widthSetByUser: col.widthSetByUser
@@ -1996,7 +1996,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
19961996
columnSizes[i] = {
19971997
ref: col,
19981998
width: col.width === 'fit-content' ? col.autoSize :
1999-
col.widthSetByUser || this.grid.columnWidthSetByUser ? parseInt(col.calcWidth, 10) : null,
1999+
col.widthSetByUser || this.grid.columnWidthSetByUser ? parseFloat(col.calcWidth) : null,
20002000
colSpan: col.gridColumnSpan,
20012001
colEnd: col.colStart + col.gridColumnSpan,
20022002
widthSetByUser: col.widthSetByUser
@@ -2060,7 +2060,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
20602060
if (size && !!size.width) {
20612061
result.push(size.width + 'px');
20622062
} else {
2063-
result.push(parseInt(this.grid.getPossibleColumnWidth(), 10) + 'px');
2063+
result.push(parseFloat(this.grid.getPossibleColumnWidth()) + 'px');
20642064
}
20652065
}
20662066
return result;
@@ -2530,14 +2530,14 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
25302530
if (isPercentageWidth && this.grid.isColumnWidthSum) {
25312531
this._calcWidth = this.grid.minColumnWidth;
25322532
} else if (isPercentageWidth ) {
2533-
this._calcWidth = Math.floor(parseFloat(colWidth) / 100 * this.grid.calcWidth);
2533+
this._calcWidth = parseFloat(colWidth) / 100 * this.grid.calcWidth;
25342534
} else if (!colWidth || isAutoWidth && !this.autoSize) {
25352535
// no width
25362536
this._calcWidth = this.defaultWidth || this.grid.getPossibleColumnWidth();
25372537
} else {
25382538
this._calcWidth = this.width;
25392539
}
2540-
this.calcPixelWidth = parseInt(this._calcWidth, 10);
2540+
this.calcPixelWidth = parseFloat(this._calcWidth);
25412541
}
25422542

25432543
/**

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4547,7 +4547,7 @@ export abstract class IgxGridBaseDirective implements GridType,
45474547
let totalWidth = 0;
45484548
let i = 0;
45494549
for (i; i < cols.length; i++) {
4550-
totalWidth += parseInt(cols[i].calcWidth, 10) || 0;
4550+
totalWidth += parseFloat(cols[i].calcWidth) || 0;
45514551
}
45524552
this._totalWidth = totalWidth;
45534553
return totalWidth;
@@ -5392,7 +5392,7 @@ export abstract class IgxGridBaseDirective implements GridType,
53925392
computedWidth = baseWidth;
53935393
} else {
53945394
computedWidth = this.calcWidth ||
5395-
parseInt(this.document.defaultView.getComputedStyle(this.nativeElement).getPropertyValue('width'), 10);
5395+
parseFloat(this.document.defaultView.getComputedStyle(this.nativeElement).getPropertyValue('width'));
53965396
}
53975397

53985398
const visibleChildColumns = this.visibleColumns.filter(c => !c.columnGroup);
@@ -5416,7 +5416,7 @@ export abstract class IgxGridBaseDirective implements GridType,
54165416
const sumExistingWidths = columnsWithSetWidths
54175417
.reduce((prev, curr) => {
54185418
const colWidth = curr.width;
5419-
let widthValue = parseInt(colWidth, 10);
5419+
let widthValue = parseFloat(colWidth);
54205420
if (isNaN(widthValue)) {
54215421
widthValue = MINIMUM_COLUMN_WIDTH;
54225422
}
@@ -5432,9 +5432,9 @@ export abstract class IgxGridBaseDirective implements GridType,
54325432
}
54335433
computedWidth -= this.featureColumnsWidth();
54345434

5435-
const columnWidth = Math.floor(!Number.isFinite(sumExistingWidths) ?
5435+
const columnWidth = !Number.isFinite(sumExistingWidths) ?
54365436
Math.max(computedWidth / columnsToSize, this.minColumnWidth) :
5437-
Math.max((computedWidth - sumExistingWidths) / columnsToSize, this.minColumnWidth));
5437+
Math.max((computedWidth - sumExistingWidths) / columnsToSize, this.minColumnWidth);
54385438

54395439
return columnWidth + 'px';
54405440
}
@@ -6518,8 +6518,8 @@ export abstract class IgxGridBaseDirective implements GridType,
65186518
this._columnWidth = this.width !== null ? this.getPossibleColumnWidth() : this.minColumnWidth + 'px';
65196519
}
65206520
this._columns.forEach((column: IgxColumnComponent) => {
6521-
if (this.hasColumnLayouts && parseInt(this._columnWidth, 10)) {
6522-
const columnWidthCombined = parseInt(this._columnWidth, 10) * (column.colEnd ? column.colEnd - column.colStart : 1);
6521+
if (this.hasColumnLayouts && parseFloat(this._columnWidth)) {
6522+
const columnWidthCombined = parseFloat(this._columnWidth) * (column.colEnd ? column.colEnd - column.colStart : 1);
65236523
column.defaultWidth = columnWidthCombined + 'px';
65246524
} else {
65256525
// 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
@@ -2055,7 +2055,7 @@ export class GridFunctions {
20552055
}
20562056
}
20572057
const expectedWidth = Math.max(parseFloat(cell.column.calcWidth) * cell.column.gridColumnSpan, sum);
2058-
expect(cellElem.clientWidth - expectedWidth).toBeLessThan(1);
2058+
expect(cellElem.getBoundingClientRect().width - expectedWidth).toBeLessThan(1);
20592059
// check height
20602060
const expectedHeight = cell.grid.rowHeight * cell.gridRowSpan;
20612061
expect(cellElem.offsetHeight).toBe(expectedHeight);

0 commit comments

Comments
 (0)