Skip to content

Commit c120308

Browse files
MKirovaMKirova
MKirova
authored and
MKirova
committed
feat(igxGrid): Autosizing with percentage column widths. Refactor to re-use width caculations.
1 parent b282612 commit c120308

File tree

4 files changed

+58
-39
lines changed

4 files changed

+58
-39
lines changed

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

Lines changed: 44 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -439,6 +439,32 @@ export class IgxColumnComponent implements AfterContentInit {
439439
@WatchColumnChanges()
440440
@Input()
441441
public maxWidth: string;
442+
443+
get maxWidthPx() {
444+
const gridAvailableSize = this.grid.calcWidth;
445+
const isPercentageWidth = this.maxWidth && typeof this.maxWidth === 'string' && this.maxWidth.indexOf('%') !== -1;
446+
return isPercentageWidth ? parseFloat(this.maxWidth) / 100 * gridAvailableSize : parseFloat(this.maxWidth);
447+
}
448+
449+
get maxWidthPercent() {
450+
const gridAvailableSize = this.grid.calcWidth;
451+
const isPercentageWidth = this.maxWidth && typeof this.maxWidth === 'string' && this.maxWidth.indexOf('%') !== -1;
452+
return isPercentageWidth ? parseFloat(this.maxWidth) : parseFloat(this.maxWidth) / gridAvailableSize * 100;
453+
}
454+
455+
get minWidthPx() {
456+
const gridAvailableSize = this.grid.calcWidth;
457+
const isPercentageWidth = this.minWidth && typeof this.minWidth === 'string' && this.minWidth.indexOf('%') !== -1;
458+
return isPercentageWidth ? parseFloat(this.minWidth) / 100 * gridAvailableSize : parseFloat(this.minWidth);
459+
}
460+
461+
get minWidthPercent() {
462+
const gridAvailableSize = this.grid.calcWidth;
463+
const isPercentageWidth = this.minWidth && typeof this.minWidth === 'string' && this.minWidth.indexOf('%') !== -1;
464+
return isPercentageWidth ? parseFloat(this.minWidth) : parseFloat(this.minWidth) / gridAvailableSize * 100;
465+
}
466+
467+
442468
/**
443469
* Sets/gets the minimum `width` of the column.
444470
* Default value is `88`;
@@ -1753,7 +1779,23 @@ export class IgxColumnComponent implements AfterContentInit {
17531779
*/
17541780
public autosize() {
17551781
if (!this.columnGroup) {
1756-
this.width = this.getLargestCellWidth();
1782+
const size = this.getLargestCellWidth();
1783+
const gridAvailableSize = this.grid.calcWidth;
1784+
let newWidth;
1785+
const isPercentageWidth = this.width && typeof this.width === 'string' && this.width.indexOf('%') !== -1;
1786+
if (isPercentageWidth) {
1787+
const percentageSize = parseFloat(size) / gridAvailableSize * 100;
1788+
newWidth = percentageSize + '%';
1789+
} else {
1790+
newWidth = size;
1791+
}
1792+
if (this.maxWidth && (parseFloat(size) > this.maxWidthPx)) {
1793+
newWidth = isPercentageWidth ? this.maxWidthPercent + '%' : this.maxWidthPx + 'px';
1794+
} else if (parseFloat(size) < this.minWidthPx) {
1795+
newWidth = isPercentageWidth ? this.minWidthPercent + '%' : this.minWidthPx + 'px';
1796+
}
1797+
1798+
this.width = newWidth;
17571799
this.grid.reflow();
17581800
}
17591801
}
@@ -1863,7 +1905,7 @@ export class IgxColumnComponent implements AfterContentInit {
18631905
const colWidth = this.width;
18641906
const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1;
18651907
if (isPercentageWidth) {
1866-
this._calcWidth = parseInt(colWidth, 10) / 100 * (grid.calcWidth - grid.featureColumnsWidth());
1908+
this._calcWidth = parseInt(colWidth, 10) / 100 * grid.calcWidth;
18671909
} else if (!colWidth) {
18681910
// no width
18691911
this._calcWidth = this.defaultWidth || grid.getPossibleColumnWidth();

‎projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts

Lines changed: 10 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -54,13 +54,8 @@ export class IgxColumnResizingService {
5454
* Returns the minimal possible width to which the column can be resized.
5555
*/
5656
get restrictResizeMin(): number {
57-
const actualMinWidth = parseFloat(this.column.minWidth);
5857
const actualWidth = this.column.headerCell.elementRef.nativeElement.getBoundingClientRect().width;
59-
const gridAvailableSize = this.column.grid.calcWidth - this.column.grid.featureColumnsWidth();
60-
const isMinPercentageWidth = this.column.minWidth && typeof this.column.minWidth === 'string' &&
61-
this.column.minWidth.indexOf('%') !== -1;
62-
const calcMinWidth = isMinPercentageWidth ? actualMinWidth / 100 * gridAvailableSize : actualMinWidth;
63-
const minWidth = calcMinWidth < actualWidth ? calcMinWidth : actualWidth;
58+
const minWidth = this.column.minWidthPx < actualWidth ? this.column.minWidthPx : actualWidth;
6459

6560
return actualWidth - minWidth;
6661
}
@@ -70,14 +65,9 @@ export class IgxColumnResizingService {
7065
*/
7166
get restrictResizeMax(): number {
7267
const actualWidth = this.column.headerCell.elementRef.nativeElement.getBoundingClientRect().width;
73-
const gridAvailableSize = this.column.grid.calcWidth - this.column.grid.featureColumnsWidth();
74-
const isMaxPercentageWidth = this.column.maxWidth && typeof this.column.maxWidth === 'string' &&
75-
this.column.maxWidth.indexOf('%') !== -1;
76-
const calcMaxWidth = isMaxPercentageWidth ?
77-
parseFloat(this.column.maxWidth) / 100 * gridAvailableSize :
78-
parseFloat(this.column.maxWidth);
68+
const maxWidth = this.column.maxWidthPx;
7969
if (this.column.maxWidth) {
80-
return calcMaxWidth - actualWidth;
70+
return maxWidth - actualWidth;
8171
} else {
8272
return Number.MAX_SAFE_INTEGER;
8373
}
@@ -93,14 +83,8 @@ export class IgxColumnResizingService {
9383
public autosizeColumnOnDblClick() {
9484
const currentColWidth = this.column.headerCell.elementRef.nativeElement.getBoundingClientRect().width;
9585

96-
const size = this.column.getLargestCellWidth();
97-
if (this.column.maxWidth && (parseFloat(size) > parseFloat(this.column.maxWidth))) {
98-
this.column.width = parseFloat(this.column.maxWidth) + 'px';
99-
} else if (parseFloat(size) < parseFloat(this.column.minWidth)) {
100-
this.column.width = parseFloat(this.column.minWidth) + 'px';
101-
} else {
102-
this.column.width = size;
103-
}
86+
87+
this.column.autosize();
10488

10589
this.zone.run(() => {});
10690

@@ -146,16 +130,11 @@ export class IgxColumnResizingService {
146130

147131
protected _handlePixelResize(diff: number, column: IgxColumnComponent) {
148132
let currentColWidth = parseFloat(column.width);
149-
const gridAvailableSize = column.grid.calcWidth - column.grid.featureColumnsWidth();
150133
const actualWidth = this.column.headerCell.elementRef.nativeElement.getBoundingClientRect().width;
151134
currentColWidth = Number.isNaN(currentColWidth) || (currentColWidth < actualWidth) ? actualWidth : currentColWidth;
152135

153-
const isMinPercentageWidth = column.minWidth && typeof column.minWidth === 'string' && column.minWidth.indexOf('%') !== -1;
154-
const isMaxPercentageWidth = column.maxWidth && typeof column.maxWidth === 'string' && column.maxWidth.indexOf('%') !== -1;
155-
const colMinWidth = !isMinPercentageWidth ? this.getColMinWidth(this.column) :
156-
parseFloat(this.column.minWidth) / 100 * gridAvailableSize;
157-
const colMaxWidth = !isMaxPercentageWidth ? parseFloat(column.maxWidth) :
158-
parseFloat(this.column.maxWidth) / 100 * gridAvailableSize;
136+
const colMinWidth = column.minWidthPx;
137+
const colMaxWidth = column.maxWidthPx;
159138
if (this.column.grid.hasColumnLayouts) {
160139
this.resizeColumnLayoutFor(this.column, diff);
161140
} else {
@@ -171,13 +150,11 @@ export class IgxColumnResizingService {
171150

172151
protected _handlePercentageResize(diff: number, column: IgxColumnComponent) {
173152
const currentPercentWidth = parseFloat(column.width);
174-
const gridAvailableSize = column.grid.calcWidth - column.grid.featureColumnsWidth();
153+
const gridAvailableSize = column.grid.calcWidth;
175154

176155
const diffPercentage = (diff / gridAvailableSize) * 100;
177-
const isMinPercentageWidth = column.minWidth && typeof column.minWidth === 'string' && column.minWidth.indexOf('%') !== -1;
178-
const isMaxPercentageWidth = column.maxWidth && typeof column.maxWidth === 'string' && column.maxWidth.indexOf('%') !== -1;
179-
const colMinWidth = isMinPercentageWidth ? parseFloat(column.minWidth) : parseFloat(column.minWidth) / gridAvailableSize * 100;
180-
const colMaxWidth = isMaxPercentageWidth ? parseFloat(column.maxWidth) : parseFloat(column.maxWidth) / gridAvailableSize * 100;
156+
const colMinWidth = column.minWidthPercent;
157+
const colMaxWidth = column.maxWidthPercent;
181158

182159
if (currentPercentWidth + diffPercentage < colMinWidth) {
183160
this.column.width = colMinWidth + '%';

‎src/app/grid-column-resizing/grid-column-resizing.sample.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="wrapper">
2-
<igx-grid #grid1 [data]="data" [width]="'100%'" [height]="'800px'" displayDensity="compact">
2+
<igx-grid #grid1 [data]="data" [width]="'100%'" [height]="'800px'" displayDensity="compact" [rowSelection]="'multiple'" >
33
<igx-column *ngFor="let c of columns" [field]="c.field"
44
[header]="c.field"
55
[resizable]="c.resizable"

‎src/app/grid-column-resizing/grid-column-resizing.sample.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,14 @@ export class GridColumnResizingSampleComponent implements OnInit {
1818
ngOnInit(): void {
1919
this.columns = [
2020
// % width, px min/max width.
21-
{ field: 'ID', width: '10%', resizable: true, maxWidth: 200, minWidth: 70 },
21+
{ field: 'ID', width: '10%', resizable: true, maxWidth: 200, minWidth: 120 },
2222
{ field: 'CompanyName', width: '300px', resizable: true },
2323
// % width, no min/max width.
2424
{ field: 'ContactName', width: '20%', resizable: true },
2525
// % width, % min/max width.
26-
{ field: 'ContactTitle', width: '15%', resizable: true, maxWidth: '30%', minWidth: '5%' },
26+
{ field: 'ContactTitle', width: '30%', resizable: true, maxWidth: '5%'},
2727
// px width, % min/max width.
28-
{ field: 'Address', width: 300, resizable: true, maxWidth: '20%', minWidth: '10%' },
28+
{ field: 'Address', width: 300, resizable: true, maxWidth: '20%', minWidth: '15%' },
2929
{ field: 'City', width: 100, resizable: true },
3030
{ field: 'Region', width: 100, resizable: true },
3131
{ field: 'PostalCode', width: 100, resizable: true },

0 commit comments

Comments
 (0)