Skip to content

Commit 05e198b

Browse files
MayaKirovaMayaKirova
authored
fix(grid): Apply constraints in a single place when col calculates si... (#16634)
1 parent ae6bc0a commit 05e198b

File tree

4 files changed

+64
-49
lines changed

4 files changed

+64
-49
lines changed

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2672,13 +2672,15 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
26722672
* @hidden
26732673
* @internal
26742674
*/
2675-
public getConstrainedSizePx(newSize){
2676-
if (this.maxWidth && newSize > this.maxWidthPx) {
2675+
public getConstrainedSizePx(newSize) {
2676+
if (this.maxWidth && newSize >= this.maxWidthPx) {
26772677
this.widthConstrained = true;
26782678
return this.maxWidthPx;
2679-
} else if (this.minWidth && newSize < this.userSetMinWidthPx) {
2679+
} else if (this.minWidth && newSize <= this.userSetMinWidthPx) {
26802680
this.widthConstrained = true;
26812681
return this.userSetMinWidthPx;
2682+
} else if (!this.minWidth && (!this.widthSetByUser || this.width === 'fit-content') && !this.grid.columnWidthSetByUser && (!newSize || newSize <= this.grid.minColumnWidth)) {
2683+
return this.grid.minColumnWidth;
26822684
} else {
26832685
this.widthConstrained = false;
26842686
return newSize;
@@ -2701,11 +2703,11 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
27012703
} else if (!colWidth || isAutoWidth && !this.autoSize) {
27022704
// no width
27032705
const currentCalcWidth = this.defaultWidth || this.grid.getPossibleColumnWidth();
2704-
this._calcWidth = this.getConstrainedSizePx(currentCalcWidth);
2706+
this._calcWidth = this.getConstrainedSizePx(parseFloat(currentCalcWidth));
27052707
} else {
27062708
let possibleColumnWidth = '';
27072709
if (!this.widthSetByUser && this.userSetMinWidthPx && this.userSetMinWidthPx < this.grid.minColumnWidth) {
2708-
possibleColumnWidth = this.defaultWidth = this.grid.getPossibleColumnWidth(null, this.userSetMinWidthPx);
2710+
possibleColumnWidth = this.defaultWidth = this.grid.getPossibleColumnWidth();
27092711
} else {
27102712
possibleColumnWidth = this.width;
27112713
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -905,7 +905,7 @@ export interface GridType extends IGridDataBindable {
905905
refreshSearch(): void;
906906
getDefaultExpandState(record: any): boolean;
907907
trackColumnChanges(index: number, column: any): any;
908-
getPossibleColumnWidth(baseWidth?: number, minColumnWidth?: number): string;
908+
getPossibleColumnWidth(baseWidth?: number): string;
909909
resetHorizontalVirtualization(): void;
910910
hasVerticalScroll(): boolean;
911911
getVisibleContentHeight(): number;

‎projects/igniteui-angular/grids/grid/src/grid-base.directive.ts‎

Lines changed: 24 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -5573,7 +5573,7 @@ export abstract class IgxGridBaseDirective implements GridType,
55735573
/**
55745574
* @hidden @internal
55755575
*/
5576-
public getPossibleColumnWidth(baseWidth: number = null, minColumnWidth: number = null) {
5576+
public getPossibleColumnWidth(baseWidth: number = null) {
55775577
let computedWidth;
55785578
if (baseWidth !== null) {
55795579
computedWidth = baseWidth;
@@ -5620,13 +5620,12 @@ export abstract class IgxGridBaseDirective implements GridType,
56205620
if (!sumExistingWidths && !columnsToSize) {
56215621
return '0px';
56225622
}
5623-
computedWidth -= this.featureColumnsWidth();
56245623

5625-
const minColWidth = minColumnWidth || this.minColumnWidth;
5624+
computedWidth -= this.featureColumnsWidth();
56265625

56275626
const columnWidth = !Number.isFinite(sumExistingWidths) ?
5628-
Math.max(computedWidth / columnsToSize, minColWidth) :
5629-
Math.max((computedWidth - sumExistingWidths) / columnsToSize, minColWidth);
5627+
computedWidth / columnsToSize :
5628+
(computedWidth - sumExistingWidths) / columnsToSize;
56305629

56315630
return columnWidth + 'px';
56325631
}
@@ -6736,49 +6735,28 @@ export abstract class IgxGridBaseDirective implements GridType,
67366735
*/
67376736
protected _derivePossibleWidth() {
67386737
if (!this.columnWidthSetByUser) {
6739-
this._columnWidth = this.width !== null ? this.getPossibleColumnWidth() : this.minColumnWidth + 'px';
6738+
const possibleWidth = this.getPossibleColumnWidth();
6739+
if (possibleWidth === "0px") {
6740+
// all columns - hidden
6741+
this._columnWidth = possibleWidth;
6742+
} else if (this.width !== null) {
6743+
this._columnWidth = Math.max(parseFloat(possibleWidth), this.minColumnWidth) + 'px'
6744+
} else {
6745+
this._columnWidth = this.minColumnWidth + 'px';
6746+
}
67406747
}
67416748
this._columns.forEach((column: IgxColumnComponent) => {
67426749
if (this.hasColumnLayouts && parseFloat(this._columnWidth)) {
67436750
const columnWidthCombined = parseFloat(this._columnWidth) * (column.colEnd ? column.colEnd - column.colStart : 1);
67446751
column.defaultWidth = columnWidthCombined + 'px';
67456752
} else {
6746-
// D.K. March 29th, 2021 #9145 Consider min/max width when setting defaultWidth property
6747-
column.defaultWidth = this.getExtremumBasedColWidth(column);
6753+
column.defaultWidth = this._columnWidth;
67486754
column.resetCaches();
67496755
}
67506756
});
67516757
this.resetCachedWidths();
67526758
}
67536759

6754-
/**
6755-
* @hidden
6756-
* @internal
6757-
*/
6758-
protected getExtremumBasedColWidth(column: IgxColumnComponent): string {
6759-
let width = this._columnWidth;
6760-
if (width && typeof width !== 'string') {
6761-
width = String(width);
6762-
}
6763-
const minWidth = width.indexOf('%') === -1 ? column.userSetMinWidthPx : column.minWidthPercent;
6764-
const maxWidth = width.indexOf('%') === -1 ? column.maxWidthPx : column.maxWidthPercent;
6765-
if (column.hidden) {
6766-
return width;
6767-
}
6768-
6769-
if (minWidth > parseFloat(width)) {
6770-
width = String(column.minWidth);
6771-
} else if (maxWidth < parseFloat(width)) {
6772-
width = String(column.maxWidth);
6773-
}
6774-
6775-
// if no px or % are defined in maxWidth/minWidth consider it px
6776-
if (width.indexOf('%') === -1 && width.indexOf('px') === -1) {
6777-
width += 'px';
6778-
}
6779-
return width;
6780-
}
6781-
67826760
protected resetNotifyChanges() {
67836761
this._cdrRequestRepaint = false;
67846762
this._cdrRequests = false;
@@ -7072,13 +7050,6 @@ export abstract class IgxGridBaseDirective implements GridType,
70727050
this.cdr.detectChanges();
70737051
}
70747052

7075-
// in case horizontal scrollbar has appeared recalc to size correctly.
7076-
if (hasHScroll !== this.hasHorizontalScroll()) {
7077-
this.isHorizontalScrollHidden = !this.hasHorizontalScroll();
7078-
this.cdr.detectChanges();
7079-
this.calculateGridHeight();
7080-
this.cdr.detectChanges();
7081-
}
70827053
if (this.zone.isStable) {
70837054
this.zone.run(() => {
70847055
this._applyWidthHostBinding();
@@ -7098,6 +7069,16 @@ export abstract class IgxGridBaseDirective implements GridType,
70987069
this._autoSizeColumnsNotify.next();
70997070
});
71007071
}
7072+
7073+
// in case horizontal scrollbar has appeared recalc to size correctly.
7074+
if (hasHScroll !== this.hasHorizontalScroll()) {
7075+
this.isHorizontalScrollHidden = !this.hasHorizontalScroll();
7076+
this.cdr.detectChanges();
7077+
this.calculateGridHeight();
7078+
this.cdr.detectChanges();
7079+
} else {
7080+
this.resetCaches(recalcFeatureWidth);
7081+
}
71017082
}
71027083

71037084
/**

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2170,6 +2170,38 @@ describe('IgxGrid Component Tests #grid', () => {
21702170
// first column takes new min
21712171
expect(col1.calcPixelWidth).toBe(500);
21722172
});
2173+
2174+
it('in columns with no width and min-widths should recalculate and re-apply constraints to all cols.', () => {
2175+
const fix = TestBed.createComponent(IgxGridDefaultRenderingComponent);
2176+
// 3 cols
2177+
fix.componentInstance.initColumnsRows(5, 3);
2178+
fix.detectChanges();
2179+
2180+
const grid = fix.componentInstance.grid;
2181+
grid.columns[0].minWidth = "80px";
2182+
grid.columns[1].minWidth = "90px";
2183+
grid.columns[2].minWidth = "130px";
2184+
2185+
grid.width = "300px";
2186+
fix.detectChanges();
2187+
2188+
expect(grid.columns[0].calcWidth).toBe(80);
2189+
expect(grid.columns[1].calcWidth).toBe(90);
2190+
expect(grid.columns[2].calcWidth).toBe(130);
2191+
2192+
expect(grid.hasHorizontalScroll()).toBe(false);
2193+
expect(grid.isHorizontalScrollHidden).toBe(true);
2194+
2195+
grid.width = "290px";
2196+
fix.detectChanges();
2197+
2198+
expect(grid.columns[0].calcWidth).toBe(80);
2199+
expect(grid.columns[1].calcWidth).toBe(90);
2200+
expect(grid.columns[2].calcWidth).toBe(130);
2201+
2202+
expect(grid.hasHorizontalScroll()).toBe(true);
2203+
expect(grid.isHorizontalScrollHidden).toBe(false);
2204+
});
21732205
});
21742206

21752207

0 commit comments

Comments
 (0)