Skip to content

Commit b282612

Browse files
MKirovaMKirova
MKirova
authored and
MKirova
committed
feat(igxGrid): Add handling for resizing when columns have % widths.
1 parent 283d4fa commit b282612

File tree

3 files changed

+75
-27
lines changed

3 files changed

+75
-27
lines changed

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

Lines changed: 66 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,6 @@ import { IgxColumnComponent } from '../columns/column.component';
88
@Injectable()
99
export class IgxColumnResizingService {
1010

11-
private pinnedMaxWidth: string;
12-
1311
/**
1412
* @hidden
1513
*/
@@ -57,18 +55,29 @@ export class IgxColumnResizingService {
5755
*/
5856
get restrictResizeMin(): number {
5957
const actualMinWidth = parseFloat(this.column.minWidth);
60-
const minWidth = actualMinWidth < parseFloat(this.column.width) ? actualMinWidth : parseFloat(this.column.width);
58+
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;
6164

62-
return this.column.headerCell.elementRef.nativeElement.getBoundingClientRect().width - minWidth;
65+
return actualWidth - minWidth;
6366
}
6467

6568
/**
6669
* Returns the maximal possible width to which the column can be resized.
6770
*/
6871
get restrictResizeMax(): number {
6972
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);
7079
if (this.column.maxWidth) {
71-
return parseFloat(this.column.maxWidth) - actualWidth;
80+
return calcMaxWidth - actualWidth;
7281
} else {
7382
return Number.MAX_SAFE_INTEGER;
7483
}
@@ -109,12 +118,44 @@ export class IgxColumnResizingService {
109118
this.showResizer = false;
110119
const diff = event.clientX - this.startResizePos;
111120

112-
let currentColWidth = parseFloat(this.column.width);
121+
const colWidth = this.column.width;
122+
const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1;
123+
let currentColWidth = parseFloat(colWidth);
124+
const actualWidth = this.column.headerCell.elementRef.nativeElement.getBoundingClientRect().width;
125+
currentColWidth = Number.isNaN(currentColWidth) ? actualWidth : currentColWidth + 'px';
126+
127+
if (isPercentageWidth) {
128+
this._handlePercentageResize(diff, this.column);
129+
} else {
130+
this._handlePixelResize(diff, this.column);
131+
}
132+
133+
134+
this.zone.run(() => {});
135+
136+
if (currentColWidth !== parseFloat(this.column.width)) {
137+
this.column.grid.onColumnResized.emit({
138+
column: this.column,
139+
prevWidth: isPercentageWidth ? currentColWidth + '%' : currentColWidth + 'px',
140+
newWidth: this.column.width
141+
});
142+
}
143+
144+
this.isColumnResizing = false;
145+
}
146+
147+
protected _handlePixelResize(diff: number, column: IgxColumnComponent) {
148+
let currentColWidth = parseFloat(column.width);
149+
const gridAvailableSize = column.grid.calcWidth - column.grid.featureColumnsWidth();
113150
const actualWidth = this.column.headerCell.elementRef.nativeElement.getBoundingClientRect().width;
114151
currentColWidth = Number.isNaN(currentColWidth) || (currentColWidth < actualWidth) ? actualWidth : currentColWidth;
115152

116-
const colMinWidth = this.getColMinWidth(this.column);
117-
const colMaxWidth = this.getColMaxWidth(this.column);
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;
118159
if (this.column.grid.hasColumnLayouts) {
119160
this.resizeColumnLayoutFor(this.column, diff);
120161
} else {
@@ -126,18 +167,25 @@ export class IgxColumnResizingService {
126167
this.column.width = (currentColWidth + diff) + 'px';
127168
}
128169
}
170+
}
129171

130-
this.zone.run(() => {});
172+
protected _handlePercentageResize(diff: number, column: IgxColumnComponent) {
173+
const currentPercentWidth = parseFloat(column.width);
174+
const gridAvailableSize = column.grid.calcWidth - column.grid.featureColumnsWidth();
131175

132-
if (currentColWidth !== parseFloat(this.column.width)) {
133-
this.column.grid.onColumnResized.emit({
134-
column: this.column,
135-
prevWidth: currentColWidth.toString(),
136-
newWidth: this.column.width
137-
});
138-
}
176+
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;
139181

140-
this.isColumnResizing = false;
182+
if (currentPercentWidth + diffPercentage < colMinWidth) {
183+
this.column.width = colMinWidth + '%';
184+
} else if (colMaxWidth && (currentPercentWidth + diffPercentage > colMaxWidth)) {
185+
this.column.width = colMaxWidth + '%';
186+
} else {
187+
this.column.width = (currentPercentWidth + diffPercentage) + '%';
188+
}
141189
}
142190

143191
protected getColMinWidth(column: IgxColumnComponent) {
@@ -149,10 +197,6 @@ export class IgxColumnResizingService {
149197
return actualMinWidth < currentColWidth ? actualMinWidth : currentColWidth;
150198
}
151199

152-
protected getColMaxWidth(column: IgxColumnComponent) {
153-
return column.pinned ? parseFloat(this.pinnedMaxWidth) : parseFloat(column.maxWidth);
154-
}
155-
156200
protected resizeColumnLayoutFor(column: IgxColumnComponent, diff: number) {
157201
const relativeColumns = column.getResizableColUnderEnd();
158202
const combinedSpan = relativeColumns.reduce((acc, col) => acc + col.spanUsed, 0);
@@ -174,7 +218,7 @@ export class IgxColumnResizingService {
174218
const resizeScaled = (diff / updatedCombinedSpan) * col.target.gridColumnSpan;
175219

176220
const minWidth = this.getColMinWidth(col.target);
177-
const maxWidth = this.getColMaxWidth(col.target);
221+
const maxWidth = parseFloat(col.target.maxWidth);
178222
if (currentResizeWidth + resizeScaled < minWidth) {
179223
col.target.width = minWidth + 'px';
180224
updatedDiff += (currentResizeWidth - minWidth);

‎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]="'900px'" [height]="'800px'" displayDensity="compact">
2+
<igx-grid #grid1 [data]="data" [width]="'100%'" [height]="'800px'" displayDensity="compact">
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: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,15 @@ export class GridColumnResizingSampleComponent implements OnInit {
1717

1818
ngOnInit(): void {
1919
this.columns = [
20-
{ field: 'ID', width: 100, resizable: true, maxWidth: 200, minWidth: 70 },
20+
// % width, px min/max width.
21+
{ field: 'ID', width: '10%', resizable: true, maxWidth: 200, minWidth: 70 },
2122
{ field: 'CompanyName', width: '300px', resizable: true },
22-
{ field: 'ContactName', width: 200, resizable: true },
23-
{ field: 'ContactTitle', width: 200, resizable: true },
24-
{ field: 'Address', width: 300, resizable: true },
23+
// % width, no min/max width.
24+
{ field: 'ContactName', width: '20%', resizable: true },
25+
// % width, % min/max width.
26+
{ field: 'ContactTitle', width: '15%', resizable: true, maxWidth: '30%', minWidth: '5%' },
27+
// px width, % min/max width.
28+
{ field: 'Address', width: 300, resizable: true, maxWidth: '20%', minWidth: '10%' },
2529
{ field: 'City', width: 100, resizable: true },
2630
{ field: 'Region', width: 100, resizable: true },
2731
{ field: 'PostalCode', width: 100, resizable: true },

0 commit comments

Comments
 (0)