Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(grids): refactor cell width #13460

Merged
merged 10 commits into from
Oct 9, 2023
Original file line number Diff line number Diff line change
Expand Up @@ -342,6 +342,11 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After

public override set width(val) { }

/** @hidden @internal **/
public override get resolvedWidth() {
return this.width;
}

/**
* @hidden
*/
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -973,6 +973,15 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
return !this._defaultMinWidth ? this.defaultMinWidth : this._defaultMinWidth;
}

/** @hidden @internal **/
public get resolvedWidth(): string {
if (this.columnLayoutChild) {
return '';
}
const isAutoWidth = this._width && typeof this._width === 'string' && this._width === 'auto';
return isAutoWidth ? this.width : this.calcPixelWidth + 'px';
}

/**
* Gets the column index.
* ```typescript
Expand Down Expand Up @@ -2501,7 +2510,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
} else {
this._calcWidth = this.width;
}
this.calcPixelWidth = parseFloat(this._calcWidth);
this.calcPixelWidth = parseInt(this._calcWidth, 10);
}

/**
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -332,9 +332,9 @@ export interface ColumnType extends FieldType {
/** Represents custom CSS styles applied to the header group. When added, they take different styling */
headerGroupStyles: any;

/**
* Custom CSS styling, appplied to every column
* calcWidth, minWidthPx, maxWidthPx, minWidth, maxWidth, minWidthPercent, maxWidthPercent
/**
* Custom CSS styling, appplied to every column
* calcWidth, minWidthPx, maxWidthPx, minWidth, maxWidth, minWidthPercent, maxWidthPercent, resolvedWidth
*/
calcWidth: any;
minWidthPx: number;
Expand All @@ -343,6 +343,7 @@ export interface ColumnType extends FieldType {
maxWidth: string;
minWidthPercent: number;
maxWidthPercent: number;
resolvedWidth: string;

/**
* Optional
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -710,7 +710,7 @@ describe('IgxGrid - multi-column headers #grid', () => {
.querySelector("igx-grid-header")
.getBoundingClientRect().width;
const expectedWidth = headersWidth * 3;
expect(headersWidth).toBe(Math.round((parseFloat(columnWidth) / 100) * grid.calcWidth));
expect(headersWidth).toBe(Math.floor((parseFloat(columnWidth) / 100) * grid.calcWidth));
const locationColGroupHeaderWidth = grid.nativeElement
.querySelector("igx-grid-header-group")
.getBoundingClientRect().width;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -109,9 +109,9 @@
[firstPinned]="col.columnLayoutChild ? null : col.isFirstPinned"
[style.min-height.px]="cellHeight"
[rowData]="data"
[style.min-width]="col.width"
[style.max-width]="col.width"
[style.flex-basis]="col.width"
[style.min-width]="col.resolvedWidth"
[style.max-width]="col.resolvedWidth"
[style.flex-basis]="col.resolvedWidth"
[style.left]="col.rightPinnedOffset"
[width]="col.getCellWidth()"
[visibleColumnIndex]="col.visibleIndex"
Expand Down Expand Up @@ -142,9 +142,9 @@
[lastPinned]="col.columnLayoutChild ? null : col.isLastPinned"
[style.min-height.px]="cellHeight"
[rowData]="data"
[style.min-width]="col.width"
[style.max-width]="col.width"
[style.flex-basis]="col.width"
[style.min-width]="col.resolvedWidth"
[style.max-width]="col.resolvedWidth"
[style.flex-basis]="col.resolvedWidth"
[width]="col.getCellWidth()"
[visibleColumnIndex]="col.visibleIndex"
[value]="data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -1802,6 +1802,29 @@ describe('IgxGrid Component Tests #grid', () => {

});

it('cells and columns widths should be equal. column widths in percentages', () => {
const fix = TestBed.createComponent(IgxGridColumnPercentageWidthComponent);
fix.componentInstance.initColumnsRows(5, 6);
const grid = fix.componentInstance.grid;
fix.componentInstance.grid.height = "250px";
fix.detectChanges();
const hScroll = fix.debugElement.query(By.css(GRID_SCROLL_CLASS));
fix.detectChanges();
const percentageWidths = ['5%', '12%', '10%', '12%', '5%', '11%'];
for (let i = 0; i < grid.columnList.length; i++) {
grid.columnList.get(i).width = percentageWidths[i];
}
fix.detectChanges();
expect(hScroll.nativeElement.hidden).toBe(true);

for (let i = 0; i < grid.columnList.length; i++) {
const header = fix.debugElement.queryAll(By.css('igx-grid-header-group'))[i];
const cell = fix.debugElement.queryAll(By.css('igx-grid-cell'))[i];
expect(header.nativeElement.offsetWidth).toEqual(cell.nativeElement.offsetWidth);
expect(Number.isInteger(header.nativeElement.offsetWidth)).toBe(true);
}
});

it('should render all columns if grid width is set to null.', async () => {
const fix = TestBed.createComponent(IgxGridDefaultRenderingComponent);
fix.componentInstance.initColumnsRows(5, 30);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -67,8 +67,8 @@
[ngClass]="column.headerGroupClasses"
[ngStyle]="column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger"
[column]="column"
[style.min-width]="column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
[style.flex-basis]="column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL">
[style.min-width]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
[style.flex-basis]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL">
</igx-grid-header-group>
</ng-container>
</ng-container>
Expand All @@ -86,8 +86,8 @@
[ngClass]="column.headerGroupClasses"
[ngStyle]="column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger"
[column]="column"
[style.min-width]="column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
[style.flex-basis]="column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL">
[style.min-width]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
[style.flex-basis]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL">
</igx-grid-header-group>
</ng-template>

Expand All @@ -98,8 +98,8 @@
[ngClass]="column.headerGroupClasses"
[ngStyle]="column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger"
[column]="column"
[style.min-width]="column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
[style.flex-basis]="column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
[style.min-width]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
[style.flex-basis]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
[style.left]="column.rightPinnedOffset">
</igx-grid-header-group>
</ng-container>
Expand Down
3 changes: 1 addition & 2 deletions projects/igniteui-angular/src/lib/grids/headers/pipes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,7 @@ export class IgxHeaderGroupWidthPipe implements PipeTransform {

public transform(width: any, minWidth: any, hasLayout: boolean) {
const isFitContent = width === 'fit-content';
const isPercentage = typeof width === 'string' && width.indexOf('%') !== -1;
return hasLayout ? '' : isFitContent || isPercentage ? width : `${Math.max(parseFloat(width), minWidth)}px`;
return hasLayout ? '' : isFitContent ? width : `${Math.max(parseInt(width), minWidth)}px`;
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -66,9 +66,9 @@
[active]="isCellActive(col.visibleIndex)"
[style.min-height.px]="cellHeight"
[rowData]="data"
[style.min-width]="col.width"
[style.max-width]="col.width"
[style.flex-basis]="col.width"
[style.min-width]="col.resolvedWidth"
[style.max-width]="col.resolvedWidth"
[style.flex-basis]="col.resolvedWidth"
[width]="col.getCellWidth()"
[visibleColumnIndex]="col.visibleIndex"
[value]="data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath"
Expand Down Expand Up @@ -115,9 +115,9 @@
[lastPinned]="col.isLastPinned"
[style.min-height.px]="cellHeight"
[rowData]="data"
[style.min-width]="col.width"
[style.max-width]="col.width"
[style.flex-basis]="col.width"
[style.min-width]="col.resolvedWidth"
[style.max-width]="col.resolvedWidth"
[style.flex-basis]="col.resolvedWidth"
[style.left]="col.rightPinnedOffset"
[width]="col.getCellWidth()"
[visibleColumnIndex]="col.visibleIndex"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -160,8 +160,8 @@
<ng-container *ngFor="let column of pinnedColumnCollection | igxTopLevel">
<igx-grid-header-group [ngClass]="column.headerGroupClasses"
[ngStyle]="column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger" [column]="column"
[style.min-width]="column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
[style.flex-basis]="column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
[style.min-width]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
[style.flex-basis]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
(pointerdown)="grid.navigation.focusOutRowHeader($event)">
</igx-grid-header-group>
</ng-container>
Expand All @@ -175,8 +175,8 @@
<igx-grid-header-group [ngClass]="column.headerGroupClasses"
[style.height.px]='totalDepth > 1 ? calcHeight(column, i) : undefined'
[ngStyle]="column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger" [column]="column"
[style.min-width]="column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
[style.flex-basis]="column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
[style.min-width]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
[style.flex-basis]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
[class.igx-grid__tr-pivot--columnDimensionLeaf] = 'isDuplicateOfExistingParent(column, i)'
[class.igx-grid__tr-pivot--columnMultiRowSpan] = 'isMultiRow(column, i)'
>
Expand All @@ -190,8 +190,8 @@
<ng-container *ngFor="let column of pinnedColumnCollection | igxTopLevel">
<igx-grid-header-group [ngClass]="column.headerGroupClasses"
[ngStyle]="column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger" [column]="column"
[style.min-width]="column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
[style.flex-basis]="column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
[style.min-width]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
[style.flex-basis]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
[style.left]="column.rightPinnedOffset" (pointerdown)="grid.navigation.focusOutRowHeader($event)">
</igx-grid-header-group>
</ng-container>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@
[editMode]="col.editable && this.grid.crudService.targetInEdit(index, col.index)" [column]="col"
[formatter]="col.formatter" [intRow]="this" [active]="isCellActive(col.visibleIndex)"
[style.min-height.px]="cellHeight" [rowData]="data" [columnData]='getColumnData(col)'
[style.min-width]="col.width" [style.max-width]="col.width"
[style.flex-basis]="col.width" [width]="col.getCellWidth()" [visibleColumnIndex]="col.visibleIndex"
[style.min-width]="col.resolvedWidth" [style.max-width]="col.resolvedWidth"
[style.flex-basis]="col.resolvedWidth" [width]="col.getCellWidth()" [visibleColumnIndex]="col.visibleIndex"
[value]="pivotAggregationData[col.field] | dataMapper:col.field:grid.pipeTrigger:pivotAggregationData[col.field]:col.hasNestedPath"
[cellTemplate]="col.bodyTemplate" [lastSearchInfo]="grid.lastSearchInfo"
[cellSelectionMode]="grid.cellSelection" [displayPinnedChip]="shouldDisplayPinnedChip(col.visibleIndex)"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,9 @@
[active]="isCellActive(col.visibleIndex)"
[style.max-height.px]="minHeight"
[style.min-height.px]="minHeight"
[style.min-width]="col.getCellWidth()"
[style.max-width]="col.getCellWidth()"
[style.flex-basis]="col.getCellWidth()">
[style.min-width]="col.resolvedWidth"
[style.max-width]="col.resolvedWidth"
[style.flex-basis]="col.resolvedWidth">
</igx-grid-summary-cell>
</ng-template>
<ng-container *ngIf="pinnedColumns.length > 0 && !grid.isPinningToStart">
Expand All @@ -58,9 +58,9 @@
[active]="isCellActive(col.visibleIndex)"
[style.max-height.px]="minHeight"
[style.min-height.px]="minHeight"
[style.min-width]="col.getCellWidth()"
[style.max-width]="col.getCellWidth()"
[style.flex-basis]="col.getCellWidth()"
[style.min-width]="col.resolvedWidth"
[style.max-width]="col.resolvedWidth"
[style.flex-basis]="col.resolvedWidth"
[style.left]="col.rightPinnedOffset">
</igx-grid-summary-cell>
</ng-template>
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,9 @@
[intRow]="this"
[style.min-height.px]="cellHeight"
[rowData]="data"
[style.min-width]="col.width"
[style.max-width]="col.width"
[style.flex-basis]="col.width"
[style.min-width]="col.resolvedWidth"
[style.max-width]="col.resolvedWidth"
[style.flex-basis]="col.resolvedWidth"
[width]="col.getCellWidth()"
[visibleColumnIndex]="col.visibleIndex"
[value]="data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath"
Expand Down Expand Up @@ -68,9 +68,9 @@
[intRow]="this"
[style.min-height.px]="cellHeight"
[rowData]="data"
[style.min-width]="col.width"
[style.max-width]="col.width"
[style.flex-basis]="col.width"
[style.min-width]="col.resolvedWidth"
[style.max-width]="col.resolvedWidth"
[style.flex-basis]="col.resolvedWidth"
[width]="col.getCellWidth()"
[visibleColumnIndex]="col.visibleIndex"
[value]="data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath"
Expand Down Expand Up @@ -121,9 +121,9 @@
[lastPinned]="col.isLastPinned"
[style.min-height.px]="cellHeight"
[rowData]="data"
[style.min-width]="col.width"
[style.max-width]="col.width"
[style.flex-basis]="col.width"
[style.min-width]="col.resolvedWidth"
[style.max-width]="col.resolvedWidth"
[style.flex-basis]="col.resolvedWidth"
[style.left]="col.rightPinnedOffset"
[width]="col.getCellWidth()"
[visibleColumnIndex]="col.visibleIndex"
Expand Down Expand Up @@ -154,9 +154,9 @@
[lastPinned]="col.isLastPinned"
[style.min-height.px]="cellHeight"
[rowData]="data"
[style.min-width]="col.width"
[style.max-width]="col.width"
[style.flex-basis]="col.width"
[style.min-width]="col.resolvedWidth"
[style.max-width]="col.resolvedWidth"
[style.flex-basis]="col.resolvedWidth"
[style.left]="col.rightPinnedOffset"
[width]="col.getCellWidth()"
[visibleColumnIndex]="col.visibleIndex"
Expand Down
Loading