Skip to content

Commit a1d5fe6

Browse files
ddariboddaribo
authored
fix(grids): refactor cell width - 15.1.x (#13500)
1 parent 2607fbd commit a1d5fe6

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
@@ -348,6 +348,11 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
348348

349349
public override set width(val) { }
350350

351+
/** @hidden @internal **/
352+
public override get resolvedWidth() {
353+
return this.width;
354+
}
355+
351356
/**
352357
* @hidden
353358
*/

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

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

973+
/** @hidden @internal **/
974+
public get resolvedWidth(): string {
975+
if (this.columnLayoutChild) {
976+
return '';
977+
}
978+
const isAutoWidth = this._width && typeof this._width === 'string' && this._width === 'auto';
979+
return isAutoWidth ? this.width : this.calcPixelWidth + 'px';
980+
}
981+
973982
/**
974983
* Gets the column index.
975984
* ```typescript
@@ -2497,7 +2506,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
24972506
} else {
24982507
this._calcWidth = this.width;
24992508
}
2500-
this.calcPixelWidth = parseFloat(this._calcWidth);
2509+
this.calcPixelWidth = parseInt(this._calcWidth, 10);
25012510
}
25022511

25032512
/**

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

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

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

165170
header?: string;
166171
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
@@ -714,7 +714,7 @@ describe('IgxGrid - multi-column headers #grid', () => {
714714
.querySelector("igx-grid-header")
715715
.getBoundingClientRect().width;
716716
const expectedWidth = headersWidth * 3;
717-
expect(headersWidth).toBe(Math.round((parseFloat(columnWidth) / 100) * grid.calcWidth));
717+
expect(headersWidth).toBe(Math.floor((parseFloat(columnWidth) / 100) * grid.calcWidth));
718718
const locationColGroupHeaderWidth = grid.nativeElement
719719
.querySelector("igx-grid-header-group")
720720
.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
@@ -1803,6 +1803,29 @@ describe('IgxGrid Component Tests #grid', () => {
18031803

18041804
});
18051805

1806+
it('cells and columns widths should be equal. column widths in percentages', () => {
1807+
const fix = TestBed.createComponent(IgxGridColumnPercentageWidthComponent);
1808+
fix.componentInstance.initColumnsRows(5, 6);
1809+
const grid = fix.componentInstance.grid;
1810+
fix.componentInstance.grid.height = "250px";
1811+
fix.detectChanges();
1812+
const hScroll = fix.debugElement.query(By.css(GRID_SCROLL_CLASS));
1813+
fix.detectChanges();
1814+
const percentageWidths = ['5%', '12%', '10%', '12%', '5%', '11%'];
1815+
for (let i = 0; i < grid.columnList.length; i++) {
1816+
grid.columnList.get(i).width = percentageWidths[i];
1817+
}
1818+
fix.detectChanges();
1819+
expect(hScroll.nativeElement.hidden).toBe(true);
1820+
1821+
for (let i = 0; i < grid.columnList.length; i++) {
1822+
const header = fix.debugElement.queryAll(By.css('igx-grid-header-group'))[i];
1823+
const cell = fix.debugElement.queryAll(By.css('igx-grid-cell'))[i];
1824+
expect(header.nativeElement.offsetWidth).toEqual(cell.nativeElement.offsetWidth);
1825+
expect(Number.isInteger(header.nativeElement.offsetWidth)).toBe(true);
1826+
}
1827+
});
1828+
18061829
it('should render all columns if grid width is set to null.', async () => {
18071830
const fix = TestBed.createComponent(IgxGridDefaultRenderingComponent);
18081831
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
@@ -16,8 +16,7 @@ export class IgxHeaderGroupWidthPipe implements PipeTransform {
1616

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

‎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)