Skip to content

Commit e069075

Browse files
ddariboddaribo
authored
fix(grids): refactor cell width - 16.0.x (#13501)
1 parent b3dfc11 commit e069075

File tree

13 files changed

+89
-48
lines changed

13 files changed

+89
-48
lines changed

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -342,6 +342,11 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
342342

343343
public override set width(val) { }
344344

345+
/** @hidden @internal **/
346+
public override get resolvedWidth() {
347+
return this.width;
348+
}
349+
345350
/**
346351
* @hidden
347352
*/

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

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -973,6 +973,15 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
973973
return !this._defaultMinWidth ? this.defaultMinWidth : this._defaultMinWidth;
974974
}
975975

976+
/** @hidden @internal **/
977+
public get resolvedWidth(): string {
978+
if (this.columnLayoutChild) {
979+
return '';
980+
}
981+
const isAutoWidth = this._width && typeof this._width === 'string' && this._width === 'auto';
982+
return isAutoWidth ? this.width : this.calcPixelWidth + 'px';
983+
}
984+
976985
/**
977986
* Gets the column index.
978987
* ```typescript
@@ -2501,7 +2510,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
25012510
} else {
25022511
this._calcWidth = this.width;
25032512
}
2504-
this.calcPixelWidth = parseFloat(this._calcWidth);
2513+
this.calcPixelWidth = parseInt(this._calcWidth, 10);
25052514
}
25062515

25072516
/**

‎projects/igniteui-angular/src/lib/grids/common/grid.interface.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -153,13 +153,18 @@ export interface ColumnType extends FieldType {
153153
headerGroupClasses: any;
154154
headerGroupStyles: any;
155155

156+
/**
157+
* Custom CSS styling, appplied to every column
158+
* calcWidth, minWidthPx, maxWidthPx, minWidth, maxWidth, minWidthPercent, maxWidthPercent, resolvedWidth
159+
*/
156160
calcWidth: any;
157161
minWidthPx: number;
158162
maxWidthPx: number;
159163
minWidth: string;
160164
maxWidth: string;
161165
minWidthPercent: number;
162166
maxWidthPercent: number;
167+
resolvedWidth: string;
163168

164169
header?: string;
165170
index: number;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -710,7 +710,7 @@ describe('IgxGrid - multi-column headers #grid', () => {
710710
.querySelector("igx-grid-header")
711711
.getBoundingClientRect().width;
712712
const expectedWidth = headersWidth * 3;
713-
expect(headersWidth).toBe(Math.round((parseFloat(columnWidth) / 100) * grid.calcWidth));
713+
expect(headersWidth).toBe(Math.floor((parseFloat(columnWidth) / 100) * grid.calcWidth));
714714
const locationColGroupHeaderWidth = grid.nativeElement
715715
.querySelector("igx-grid-header-group")
716716
.getBoundingClientRect().width;

‎projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -109,9 +109,9 @@
109109
[firstPinned]="col.columnLayoutChild ? null : col.isFirstPinned"
110110
[style.min-height.px]="cellHeight"
111111
[rowData]="data"
112-
[style.min-width]="col.width"
113-
[style.max-width]="col.width"
114-
[style.flex-basis]="col.width"
112+
[style.min-width]="col.resolvedWidth"
113+
[style.max-width]="col.resolvedWidth"
114+
[style.flex-basis]="col.resolvedWidth"
115115
[style.left]="col.rightPinnedOffset"
116116
[width]="col.getCellWidth()"
117117
[visibleColumnIndex]="col.visibleIndex"
@@ -142,9 +142,9 @@
142142
[lastPinned]="col.columnLayoutChild ? null : col.isLastPinned"
143143
[style.min-height.px]="cellHeight"
144144
[rowData]="data"
145-
[style.min-width]="col.width"
146-
[style.max-width]="col.width"
147-
[style.flex-basis]="col.width"
145+
[style.min-width]="col.resolvedWidth"
146+
[style.max-width]="col.resolvedWidth"
147+
[style.flex-basis]="col.resolvedWidth"
148148
[width]="col.getCellWidth()"
149149
[visibleColumnIndex]="col.visibleIndex"
150150
[value]="data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath"

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1800,6 +1800,29 @@ describe('IgxGrid Component Tests #grid', () => {
18001800

18011801
});
18021802

1803+
it('cells and columns widths should be equal. column widths in percentages', () => {
1804+
const fix = TestBed.createComponent(IgxGridColumnPercentageWidthComponent);
1805+
fix.componentInstance.initColumnsRows(5, 6);
1806+
const grid = fix.componentInstance.grid;
1807+
fix.componentInstance.grid.height = "250px";
1808+
fix.detectChanges();
1809+
const hScroll = fix.debugElement.query(By.css(GRID_SCROLL_CLASS));
1810+
fix.detectChanges();
1811+
const percentageWidths = ['5%', '12%', '10%', '12%', '5%', '11%'];
1812+
for (let i = 0; i < grid.columnList.length; i++) {
1813+
grid.columnList.get(i).width = percentageWidths[i];
1814+
}
1815+
fix.detectChanges();
1816+
expect(hScroll.nativeElement.hidden).toBe(true);
1817+
1818+
for (let i = 0; i < grid.columnList.length; i++) {
1819+
const header = fix.debugElement.queryAll(By.css('igx-grid-header-group'))[i];
1820+
const cell = fix.debugElement.queryAll(By.css('igx-grid-cell'))[i];
1821+
expect(header.nativeElement.offsetWidth).toEqual(cell.nativeElement.offsetWidth);
1822+
expect(Number.isInteger(header.nativeElement.offsetWidth)).toBe(true);
1823+
}
1824+
});
1825+
18031826
it('should render all columns if grid width is set to null.', async () => {
18041827
const fix = TestBed.createComponent(IgxGridDefaultRenderingComponent);
18051828
fix.componentInstance.initColumnsRows(5, 30);

‎projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -67,8 +67,8 @@
6767
[ngClass]="column.headerGroupClasses"
6868
[ngStyle]="column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger"
6969
[column]="column"
70-
[style.min-width]="column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
71-
[style.flex-basis]="column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL">
70+
[style.min-width]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
71+
[style.flex-basis]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL">
7272
</igx-grid-header-group>
7373
</ng-container>
7474
</ng-container>
@@ -86,8 +86,8 @@
8686
[ngClass]="column.headerGroupClasses"
8787
[ngStyle]="column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger"
8888
[column]="column"
89-
[style.min-width]="column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
90-
[style.flex-basis]="column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL">
89+
[style.min-width]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
90+
[style.flex-basis]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL">
9191
</igx-grid-header-group>
9292
</ng-template>
9393

@@ -98,8 +98,8 @@
9898
[ngClass]="column.headerGroupClasses"
9999
[ngStyle]="column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger"
100100
[column]="column"
101-
[style.min-width]="column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
102-
[style.flex-basis]="column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
101+
[style.min-width]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
102+
[style.flex-basis]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
103103
[style.left]="column.rightPinnedOffset">
104104
</igx-grid-header-group>
105105
</ng-container>

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

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

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

‎projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -66,9 +66,9 @@
6666
[active]="isCellActive(col.visibleIndex)"
6767
[style.min-height.px]="cellHeight"
6868
[rowData]="data"
69-
[style.min-width]="col.width"
70-
[style.max-width]="col.width"
71-
[style.flex-basis]="col.width"
69+
[style.min-width]="col.resolvedWidth"
70+
[style.max-width]="col.resolvedWidth"
71+
[style.flex-basis]="col.resolvedWidth"
7272
[width]="col.getCellWidth()"
7373
[visibleColumnIndex]="col.visibleIndex"
7474
[value]="data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath"
@@ -115,9 +115,9 @@
115115
[lastPinned]="col.isLastPinned"
116116
[style.min-height.px]="cellHeight"
117117
[rowData]="data"
118-
[style.min-width]="col.width"
119-
[style.max-width]="col.width"
120-
[style.flex-basis]="col.width"
118+
[style.min-width]="col.resolvedWidth"
119+
[style.max-width]="col.resolvedWidth"
120+
[style.flex-basis]="col.resolvedWidth"
121121
[style.left]="col.rightPinnedOffset"
122122
[width]="col.getCellWidth()"
123123
[visibleColumnIndex]="col.visibleIndex"

‎projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -160,8 +160,8 @@
160160
<ng-container *ngFor="let column of pinnedColumnCollection | igxTopLevel">
161161
<igx-grid-header-group [ngClass]="column.headerGroupClasses"
162162
[ngStyle]="column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger" [column]="column"
163-
[style.min-width]="column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
164-
[style.flex-basis]="column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
163+
[style.min-width]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
164+
[style.flex-basis]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
165165
(pointerdown)="grid.navigation.focusOutRowHeader($event)">
166166
</igx-grid-header-group>
167167
</ng-container>
@@ -175,8 +175,8 @@
175175
<igx-grid-header-group [ngClass]="column.headerGroupClasses"
176176
[style.height.px]='totalDepth > 1 ? calcHeight(column, i) : undefined'
177177
[ngStyle]="column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger" [column]="column"
178-
[style.min-width]="column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
179-
[style.flex-basis]="column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
178+
[style.min-width]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
179+
[style.flex-basis]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
180180
[class.igx-grid__tr-pivot--columnDimensionLeaf] = 'isDuplicateOfExistingParent(column, i)'
181181
[class.igx-grid__tr-pivot--columnMultiRowSpan] = 'isMultiRow(column, i)'
182182
>
@@ -190,8 +190,8 @@
190190
<ng-container *ngFor="let column of pinnedColumnCollection | igxTopLevel">
191191
<igx-grid-header-group [ngClass]="column.headerGroupClasses"
192192
[ngStyle]="column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger" [column]="column"
193-
[style.min-width]="column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
194-
[style.flex-basis]="column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
193+
[style.min-width]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
194+
[style.flex-basis]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
195195
[style.left]="column.rightPinnedOffset" (pointerdown)="grid.navigation.focusOutRowHeader($event)">
196196
</igx-grid-header-group>
197197
</ng-container>

0 commit comments

Comments
 (0)