Skip to content

Commit ec4206f

Browse files
MKirovaMKirova
MKirova
authored and
MKirova
committed
chore(*): Handle percent resize for mrl columns.
1 parent 41bd868 commit ec4206f

File tree

2 files changed

+33
-28
lines changed

2 files changed

+33
-28
lines changed

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

Lines changed: 25 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,9 @@ export class IgxColumnResizingService {
111111
const actualWidth = this.column.headerCell.elementRef.nativeElement.getBoundingClientRect().width;
112112
currentColWidth = Number.isNaN(currentColWidth) ? parseFloat(actualWidth) : currentColWidth;
113113

114-
if (isPercentageWidth) {
114+
if (this.column.grid.hasColumnLayouts) {
115+
this.resizeColumnLayoutFor(this.column, diff);
116+
} else if (isPercentageWidth) {
115117
this._handlePercentageResize(diff, this.column);
116118
} else {
117119
this._handlePixelResize(diff, this.column);
@@ -133,21 +135,17 @@ export class IgxColumnResizingService {
133135

134136
protected _handlePixelResize(diff: number, column: IgxColumnComponent) {
135137
let currentColWidth = parseFloat(column.width);
136-
const actualWidth = this.column.headerCell.elementRef.nativeElement.getBoundingClientRect().width;
138+
const actualWidth = column.headerCell.elementRef.nativeElement.getBoundingClientRect().width;
137139
currentColWidth = Number.isNaN(currentColWidth) || (currentColWidth < actualWidth) ? actualWidth : currentColWidth;
138140

139141
const colMinWidth = column.minWidthPx;
140142
const colMaxWidth = column.maxWidthPx;
141-
if (this.column.grid.hasColumnLayouts) {
142-
this.resizeColumnLayoutFor(this.column, diff);
143+
if (currentColWidth + diff < colMinWidth) {
144+
column.width = colMinWidth + 'px';
145+
} else if (colMaxWidth && (currentColWidth + diff > colMaxWidth)) {
146+
column.width = colMaxWidth + 'px';
143147
} else {
144-
if (currentColWidth + diff < colMinWidth) {
145-
this.column.width = colMinWidth + 'px';
146-
} else if (colMaxWidth && (currentColWidth + diff > colMaxWidth)) {
147-
this.column.width = colMaxWidth + 'px';
148-
} else {
149-
this.column.width = (currentColWidth + diff) + 'px';
150-
}
148+
column.width = (currentColWidth + diff) + 'px';
151149
}
152150
}
153151

@@ -160,11 +158,11 @@ export class IgxColumnResizingService {
160158
const colMaxWidth = column.maxWidthPercent;
161159

162160
if (currentPercentWidth + diffPercentage < colMinWidth) {
163-
this.column.width = colMinWidth + '%';
161+
column.width = colMinWidth + '%';
164162
} else if (colMaxWidth && (currentPercentWidth + diffPercentage > colMaxWidth)) {
165-
this.column.width = colMaxWidth + '%';
163+
column.width = colMaxWidth + '%';
166164
} else {
167-
this.column.width = (currentPercentWidth + diffPercentage) + '%';
165+
column.width = (currentPercentWidth + diffPercentage) + '%';
168166
}
169167
}
170168

@@ -196,16 +194,18 @@ export class IgxColumnResizingService {
196194
columnsToResize.forEach((col) => {
197195
const currentResizeWidth = parseFloat(col.target.calcWidth);
198196
const resizeScaled = (diff / updatedCombinedSpan) * col.target.gridColumnSpan;
197+
const colWidth = col.target.width;
198+
const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1;
199199

200-
const minWidth = this.getColMinWidth(col.target);
201-
const maxWidth = parseFloat(col.target.maxWidth);
200+
const minWidth = col.target.minWidthPx;
201+
const maxWidth = col.target.maxWidthPx;
202202
if (currentResizeWidth + resizeScaled < minWidth) {
203-
col.target.width = minWidth + 'px';
203+
col.target.width = isPercentageWidth ? col.target.minWidthPercent + '%' : minWidth + 'px';
204204
updatedDiff += (currentResizeWidth - minWidth);
205205
newCombinedSpan -= col.spanUsed;
206206
setMinMaxCols = true;
207207
} else if (maxWidth && (currentResizeWidth + resizeScaled > maxWidth)) {
208-
col.target.width = maxWidth + 'px';
208+
col.target.width = isPercentageWidth ? col.target.maxWidthPercent + '%' : col.target.maxWidthPx + 'px';
209209
updatedDiff -= (maxWidth - currentResizeWidth);
210210
newCombinedSpan -= col.spanUsed;
211211
setMinMaxCols = true;
@@ -221,9 +221,14 @@ export class IgxColumnResizingService {
221221

222222
// Those left that don't reach min/max size resize them normally.
223223
columnsToResize.forEach((col) => {
224-
const currentResizeWidth = parseFloat(col.target.calcWidth);
225224
const resizeScaled = (updatedDiff / updatedCombinedSpan) * col.target.gridColumnSpan;
226-
col.target.width = (currentResizeWidth + resizeScaled) + 'px';
225+
const colWidth = col.target.width;
226+
const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1;
227+
if (isPercentageWidth) {
228+
this._handlePercentageResize(resizeScaled, col.target);
229+
} else {
230+
this._handlePixelResize(resizeScaled, col.target);
231+
}
227232
});
228233
}
229234
}

‎src/app/grid-multi-row-layout/grid-mrl.sample.html

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,22 +7,22 @@
77
<igx-grid #grid [data]="data" [showToolbar]="true" [columnHiding] = "true" [columnPinning]='true' [rowEditable]="true" [rowSelection]="selectionMode"
88
primaryKey="PostalCode" [displayDensity]="density" [width]="'100%'" [height]="'500px'">
99
<igx-column-layout field='group1'>
10-
<igx-column [groupable]="true" [rowStart]="1" [colStart]="1" [rowEnd]="4" field="ID" [width]="'800px'"></igx-column>
10+
<igx-column [groupable]="true" [rowStart]="1" [colStart]="1" [rowEnd]="4" field="ID" [width]="'20%'" [resizable]='true' [minWidth]="'10%'" [maxWidth]="'30%'"></igx-column>
1111
</igx-column-layout>
1212
<igx-column-layout field='group2'>
13-
<igx-column editable="true" [rowStart]="1" [colStart]="1" [colEnd]="3" field="CompanyName" [width]="'300px'"></igx-column>
14-
<igx-column [rowStart]="2" [colStart]="1" field="ContactName" [width]="'100px'"></igx-column>
15-
<igx-column [rowStart]="2" [colStart]="2" field="ContactTitle" [width]="'200px'"></igx-column>
16-
<igx-column [rowStart]="3" [colStart]="1" [colEnd]="3" field="Address" [width]="'300px'"></igx-column>
13+
<igx-column editable="true" [rowStart]="1" [colStart]="1" [colEnd]="3" field="CompanyName" [width]="'300px'" [resizable]='true'></igx-column>
14+
<igx-column [rowStart]="2" [colStart]="1" field="ContactName" [width]="'100px'" [resizable]='true'></igx-column>
15+
<igx-column [rowStart]="2" [colStart]="2" field="ContactTitle" [width]="'200px'" [resizable]='true'></igx-column>
16+
<igx-column [rowStart]="3" [colStart]="1" [colEnd]="3" field="Address" [width]="'300px'" [resizable]='true'></igx-column>
1717
</igx-column-layout>
1818
<igx-column-layout>
1919
<igx-column [rowStart]="1" [colStart]="1" [colEnd]="3" [rowEnd]="3" field="City" [width]="'300px'"></igx-column>
2020
<igx-column [rowStart]="3" [colStart]="1" [colEnd]="3" [movable]="false" sortable="true" field="Region" [width]='"300px"'></igx-column>
2121
</igx-column-layout>
2222
<igx-column-layout>
23-
<igx-column [rowStart]="1" [colStart]="1" field="Country" [groupable]='true' [width]="'300px'"></igx-column>
24-
<igx-column [rowStart]="1" [colStart]="2" [movable]="false" sortable="true" field="Phone" [width]='"150px"'></igx-column>
25-
<igx-column [rowStart]="2" [colStart]="1" [colEnd]="3" [rowEnd]="4" [movable]="false" sortable="true" field="Fax" [width]='"150px"'></igx-column>
23+
<igx-column [rowStart]="1" [width]="'10%'" [resizable]='true' [colStart]="1" field="Country" [groupable]='true'></igx-column>
24+
<igx-column [rowStart]="1" [width]="'10%'" [resizable]='true' [colStart]="2" [movable]="false" sortable="true" field="Phone"></igx-column>
25+
<igx-column [rowStart]="2" [resizable]='true' [colStart]="1" [colEnd]="3" [rowEnd]="4" [movable]="false" sortable="true" field="Fax"></igx-column>
2626
</igx-column-layout>
2727
</igx-grid>
2828
<span igxButton (click)="hideGroup()">Hide/Show second group</span>

0 commit comments

Comments
 (0)