Skip to content

Commit

Permalink
fix(columns): Change how column width is parsed - 19.0.x (#14991)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mddragnev
mddragnev authored Jan 17, 2025
1 parent dcdbc3d commit 7f650c9
Show file tree
Hide file tree
Showing 8 changed files with 44 additions and 39 deletions.
2 changes: 1 addition & 1 deletion projects/igniteui-angular/src/lib/grids/columns/column-group.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -388,7 +388,7 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
if (val.hidden) {
return acc;
}
return acc + parseInt(val.calcWidth, 10);
return acc + parseFloat(val.calcWidth);
}, 0)}`;
return width + 'px';
}
Expand Down
4 changes: 2 additions & 2 deletions projects/igniteui-angular/src/lib/grids/columns/column-layout.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export class IgxColumnLayoutComponent extends IgxColumnGroupComponent implements
* @memberof IgxColumnGroupComponent
*/
public override get width(): any {
const width = this.getFilledChildColumnSizes(this.children).reduce((acc, val) => acc + parseInt(val, 10), 0);
const width = this.getFilledChildColumnSizes(this.children).reduce((acc, val) => acc + parseFloat(val), 0);
return width;
}

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

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

return super.getCalcWidth() + borderWidth;
Expand Down
12 changes: 6 additions & 6 deletions projects/igniteui-angular/src/lib/grids/columns/column.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1984,7 +1984,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
columnSizes[col.colStart - 1] = {
ref: col,
width: col.width === 'fit-content' ? col.autoSize :
col.widthSetByUser || this.grid.columnWidthSetByUser ? parseInt(col.calcWidth, 10) : null,
col.widthSetByUser || this.grid.columnWidthSetByUser ? parseFloat(col.calcWidth) : null,
colSpan: col.gridColumnSpan,
colEnd: col.colStart + col.gridColumnSpan,
widthSetByUser: col.widthSetByUser
Expand Down Expand Up @@ -2013,7 +2013,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
columnSizes[col.colStart - 1] = {
ref: col,
width: col.width === 'fit-content' ? col.autoSize :
col.widthSetByUser || this.grid.columnWidthSetByUser ? parseInt(col.calcWidth, 10) : null,
col.widthSetByUser || this.grid.columnWidthSetByUser ? parseFloat(col.calcWidth) : null,
colSpan: col.gridColumnSpan,
colEnd: col.colStart + col.gridColumnSpan,
widthSetByUser: col.widthSetByUser
Expand All @@ -2027,7 +2027,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
columnSizes[i] = {
ref: col,
width: col.width === 'fit-content' ? col.autoSize :
col.widthSetByUser || this.grid.columnWidthSetByUser ? parseInt(col.calcWidth, 10) : null,
col.widthSetByUser || this.grid.columnWidthSetByUser ? parseFloat(col.calcWidth) : null,
colSpan: col.gridColumnSpan,
colEnd: col.colStart + col.gridColumnSpan,
widthSetByUser: col.widthSetByUser
Expand Down Expand Up @@ -2091,7 +2091,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
if (size && !!size.width) {
result.push(size.width + 'px');
} else {
result.push(parseInt(this.grid.getPossibleColumnWidth(), 10) + 'px');
result.push(parseFloat(this.grid.getPossibleColumnWidth()) + 'px');
}
}
return result;
Expand Down Expand Up @@ -2561,14 +2561,14 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
if (isPercentageWidth && this.grid.isColumnWidthSum) {
this._calcWidth = this.grid.minColumnWidth;
} else if (isPercentageWidth ) {
this._calcWidth = Math.floor(parseFloat(colWidth) / 100 * this.grid.calcWidth);
this._calcWidth = parseFloat(colWidth) / 100 * this.grid.calcWidth;
} else if (!colWidth || isAutoWidth && !this.autoSize) {
// no width
this._calcWidth = this.defaultWidth || this.grid.getPossibleColumnWidth();
} else {
this._calcWidth = this.width;
}
this.calcPixelWidth = parseInt(this._calcWidth, 10);
this.calcPixelWidth = parseFloat(this._calcWidth);
}

/**
Expand Down
14 changes: 7 additions & 7 deletions projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4554,7 +4554,7 @@ export abstract class IgxGridBaseDirective implements GridType,
let totalWidth = 0;
let i = 0;
for (i; i < cols.length; i++) {
totalWidth += parseInt(cols[i].calcWidth, 10) || 0;
totalWidth += parseFloat(cols[i].calcWidth) || 0;
}
this._totalWidth = totalWidth;
return totalWidth;
Expand Down Expand Up @@ -5400,7 +5400,7 @@ export abstract class IgxGridBaseDirective implements GridType,
computedWidth = baseWidth;
} else {
computedWidth = this.calcWidth ||
parseInt(this.document.defaultView.getComputedStyle(this.nativeElement).getPropertyValue('width'), 10);
parseFloat(this.document.defaultView.getComputedStyle(this.nativeElement).getPropertyValue('width'));
}

const visibleChildColumns = this.visibleColumns.filter(c => !c.columnGroup);
Expand All @@ -5424,7 +5424,7 @@ export abstract class IgxGridBaseDirective implements GridType,
const sumExistingWidths = columnsWithSetWidths
.reduce((prev, curr) => {
const colWidth = curr.width;
let widthValue = parseInt(colWidth, 10);
let widthValue = parseFloat(colWidth);
if (isNaN(widthValue)) {
widthValue = MINIMUM_COLUMN_WIDTH;
}
Expand All @@ -5440,9 +5440,9 @@ export abstract class IgxGridBaseDirective implements GridType,
}
computedWidth -= this.featureColumnsWidth();

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

return columnWidth + 'px';
}
Expand Down Expand Up @@ -6526,8 +6526,8 @@ export abstract class IgxGridBaseDirective implements GridType,
this._columnWidth = this.width !== null ? this.getPossibleColumnWidth() : this.minColumnWidth + 'px';
}
this._columns.forEach((column: IgxColumnComponent) => {
if (this.hasColumnLayouts && parseInt(this._columnWidth, 10)) {
const columnWidthCombined = parseInt(this._columnWidth, 10) * (column.colEnd ? column.colEnd - column.colStart : 1);
if (this.hasColumnLayouts && parseFloat(this._columnWidth)) {
const columnWidthCombined = parseFloat(this._columnWidth) * (column.colEnd ? column.colEnd - column.colStart : 1);
column.defaultWidth = columnWidthCombined + 'px';
} else {
// D.K. March 29th, 2021 #9145 Consider min/max width when setting defaultWidth property
Expand Down
22 changes: 11 additions & 11 deletions projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -551,10 +551,10 @@ describe('IgxGrid - multi-column headers #grid', () => {
fixture.detectChanges();
const scrWitdh = grid.nativeElement.querySelector('.igx-grid__tbody-scrollbar').getBoundingClientRect().width;
const gridWidthInPx = parseInt(gridWidth, 10) - scrWitdh;
const colWidth = Math.floor(gridWidthInPx / 3);
const colWidth = gridWidthInPx / 3;
const colWidthPx = colWidth + 'px';
const locationColGroup = getColGroup(grid, 'Location');
expect(locationColGroup.width).toBe((Math.round(colWidth) * 3) + 'px');
expect(locationColGroup.width).toBe(colWidth * 3 + 'px');
const countryColumn = grid.getColumnByName('Country');
expect(countryColumn.width).toBe(colWidthPx);
const regionColumn = grid.getColumnByName('Region');
Expand All @@ -576,7 +576,7 @@ describe('IgxGrid - multi-column headers #grid', () => {

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

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

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

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

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

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

const gridWidthInPx = (parseInt(gridWidth, 10) / 100) *
parseInt(componentInstance.gridWrapperWidthPx, 10) - scrWitdh;
const colWidth = Math.floor(gridWidthInPx / 3);
const colWidth = gridWidthInPx / 3;
const colWidthPx = colWidth + 'px';
const locationColGroup = getColGroup(grid, 'Location');
expect(locationColGroup.width).toBe((Math.round(colWidth) * 3) + 'px');
expect(locationColGroup.width).toBe((colWidth * 3) + 'px');
const countryColumn = grid.getColumnByName('Country');
expect(countryColumn.width).toBe(colWidthPx);
const regionColumn = grid.getColumnByName('Region');
Expand Down Expand Up @@ -685,7 +685,7 @@ describe('IgxGrid - multi-column headers #grid', () => {
fixture.detectChanges();

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

const locationColGroup = getColGroup(grid, 'Location');
const expectedWidth = (Math.floor(grid.calcWidth * 0.2) * 3) + 'px';
const expectedWidth = (grid.calcWidth * 0.2 * 3) + 'px';
expect(locationColGroup.width).toBe(expectedWidth);
const countryColumn = grid.getColumnByName('Country');
expect(countryColumn.width).toBe(columnWidth);
Expand All @@ -739,11 +739,11 @@ describe('IgxGrid - multi-column headers #grid', () => {
.querySelector("igx-grid-header")
.getBoundingClientRect().width;
const expectedWidth = headersWidth * 3;
expect(headersWidth).toBe(Math.floor((parseFloat(columnWidth) / 100) * grid.calcWidth));
expect(parseFloat(headersWidth.toFixed(1))).toBe((parseFloat(columnWidth) / 100) * grid.calcWidth);
const locationColGroupHeaderWidth = grid.nativeElement
.querySelector("igx-grid-header-group")
.getBoundingClientRect().width;
expect(locationColGroupHeaderWidth).toBe(expectedWidth);
expect(parseFloat(locationColGroupHeaderWidth.toFixed(1))).toBe(parseFloat(expectedWidth.toFixed(1)));
});
});

Expand Down
25 changes: 15 additions & 10 deletions projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,10 +43,10 @@ describe('IgxGrid - multi-row-layout #grid', () => {

const firstRowCellsArr = gridFirstRow.cells.toArray();
// the last cell is spaned as much as the first 3 cells
const firstThreeCellsWidth = firstRowCellsArr[0].nativeElement.offsetWidth +
firstRowCellsArr[1].nativeElement.offsetWidth +
firstRowCellsArr[2].nativeElement.offsetWidth;
const lastCellWidth = firstRowCellsArr[3].nativeElement.offsetWidth;
const firstThreeCellsWidth = firstRowCellsArr[0].nativeElement.getBoundingClientRect().width +
firstRowCellsArr[1].nativeElement.getBoundingClientRect().width +
firstRowCellsArr[2].nativeElement.getBoundingClientRect().width;
const lastCellWidth = firstRowCellsArr[3].nativeElement.getBoundingClientRect().width;
expect(2 * firstRowCellsArr[0].nativeElement.offsetHeight).toEqual(firstRowCellsArr[3].nativeElement.offsetHeight);
expect(firstThreeCellsWidth).toEqual(lastCellWidth);
}));
Expand Down Expand Up @@ -97,7 +97,10 @@ describe('IgxGrid - multi-row-layout #grid', () => {
GridFunctions.verifyLayoutHeadersAreAligned(grid, gridFirstRow);

// verify block style
expect(grid.columnList.first.getGridTemplate(false)).toBe('200px 200px 200px');
let sizes = grid.columnList.first.getGridTemplate(false).split(' ').map(width => parseFloat(width).toFixed(2) + "px").join(' ');


expect(sizes).toBe('200.33px 200.33px 200.33px');
expect(grid.columnList.first.getGridTemplate(true)).toBe('repeat(3,1fr)');

// creating an incomplete layout 2
Expand All @@ -112,8 +115,8 @@ describe('IgxGrid - multi-row-layout #grid', () => {
}];
fixture.componentInstance.grid.width = '617px';
fixture.detectChanges();

expect(grid.columnList.first.getGridTemplate(false)).toBe('200px 200px 200px');
sizes = grid.columnList.first.getGridTemplate(false).split(' ').map(width => parseFloat(width).toFixed(2) + "px").join(' ');
expect(sizes).toBe('200.33px 200.33px 200.33px');
expect(grid.columnList.first.getGridTemplate(true)).toBe('repeat(3,1fr)');

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

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

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

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

it('should disregard hideGroupedColumns option and not hide columns when grouping when having column layouts.', fakeAsync(() => {
Expand Down
2 changes: 1 addition & 1 deletion projects/igniteui-angular/src/lib/grids/headers/pipes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export class IgxHeaderGroupWidthPipe implements PipeTransform {

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

Expand Down
2 changes: 1 addition & 1 deletion projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2054,7 +2054,7 @@ export class GridFunctions {
}
}
const expectedWidth = Math.max(parseFloat(cell.column.calcWidth) * cell.column.gridColumnSpan, sum);
expect(cellElem.clientWidth - expectedWidth).toBeLessThan(1);
expect(cellElem.getBoundingClientRect().width - expectedWidth).toBeLessThan(1);
// check height
const expectedHeight = cell.grid.rowHeight * cell.gridRowSpan;
expect(cellElem.offsetHeight).toBe(expectedHeight);
Expand Down

0 comments on commit 7f650c9

Please sign in to comment.