Skip to content

Commit 056fb9d

Browse files
MayaKirovaMayaKirova
authored
fix(grid): Apply constraints in a single place when col calculates si… (#16636)
1 parent 8ab82a3 commit 056fb9d

File tree

4 files changed

+64
-49
lines changed

4 files changed

+64
-49
lines changed

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2709,13 +2709,15 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
27092709
* @hidden
27102710
* @internal
27112711
*/
2712-
public getConstrainedSizePx(newSize){
2713-
if (this.maxWidth && newSize > this.maxWidthPx) {
2712+
public getConstrainedSizePx(newSize) {
2713+
if (this.maxWidth && newSize >= this.maxWidthPx) {
27142714
this.widthConstrained = true;
27152715
return this.maxWidthPx;
2716-
} else if (this.minWidth && newSize < this.userSetMinWidthPx) {
2716+
} else if (this.minWidth && newSize <= this.userSetMinWidthPx) {
27172717
this.widthConstrained = true;
27182718
return this.userSetMinWidthPx;
2719+
} else if (!this.minWidth && (!this.widthSetByUser || this.width === 'fit-content') && !this.grid.columnWidthSetByUser && (!newSize || newSize <= this.grid.minColumnWidth)) {
2720+
return this.grid.minColumnWidth;
27192721
} else {
27202722
this.widthConstrained = false;
27212723
return newSize;
@@ -2738,11 +2740,11 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
27382740
} else if (!colWidth || isAutoWidth && !this.autoSize) {
27392741
// no width
27402742
const currentCalcWidth = this.defaultWidth || this.grid.getPossibleColumnWidth();
2741-
this._calcWidth = this.getConstrainedSizePx(currentCalcWidth);
2743+
this._calcWidth = this.getConstrainedSizePx(parseFloat(currentCalcWidth));
27422744
} else {
27432745
let possibleColumnWidth = '';
27442746
if (!this.widthSetByUser && this.userSetMinWidthPx && this.userSetMinWidthPx < this.grid.minColumnWidth) {
2745-
possibleColumnWidth = this.defaultWidth = this.grid.getPossibleColumnWidth(null, this.userSetMinWidthPx);
2747+
possibleColumnWidth = this.defaultWidth = this.grid.getPossibleColumnWidth();
27462748
} else {
27472749
possibleColumnWidth = this.width;
27482750
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1211,7 +1211,7 @@ export interface GridType extends IGridDataBindable {
12111211
refreshSearch(): void;
12121212
getDefaultExpandState(record: any): boolean;
12131213
trackColumnChanges(index: number, column: any): any;
1214-
getPossibleColumnWidth(baseWidth?: number, minColumnWidth?: number): string;
1214+
getPossibleColumnWidth(baseWidth?: number): string;
12151215
resetHorizontalVirtualization(): void;
12161216
hasVerticalScroll(): boolean;
12171217
getVisibleContentHeight(): number;

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

Lines changed: 24 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -5667,7 +5667,7 @@ export abstract class IgxGridBaseDirective implements GridType,
56675667
/**
56685668
* @hidden @internal
56695669
*/
5670-
public getPossibleColumnWidth(baseWidth: number = null, minColumnWidth: number = null) {
5670+
public getPossibleColumnWidth(baseWidth: number = null) {
56715671
let computedWidth;
56725672
if (baseWidth !== null) {
56735673
computedWidth = baseWidth;
@@ -5714,13 +5714,12 @@ export abstract class IgxGridBaseDirective implements GridType,
57145714
if (!sumExistingWidths && !columnsToSize) {
57155715
return '0px';
57165716
}
5717-
computedWidth -= this.featureColumnsWidth();
57185717

5719-
const minColWidth = minColumnWidth || this.minColumnWidth;
5718+
computedWidth -= this.featureColumnsWidth();
57205719

57215720
const columnWidth = !Number.isFinite(sumExistingWidths) ?
5722-
Math.max(computedWidth / columnsToSize, minColWidth) :
5723-
Math.max((computedWidth - sumExistingWidths) / columnsToSize, minColWidth);
5721+
computedWidth / columnsToSize :
5722+
(computedWidth - sumExistingWidths) / columnsToSize;
57245723

57255724
return columnWidth + 'px';
57265725
}
@@ -6830,49 +6829,28 @@ export abstract class IgxGridBaseDirective implements GridType,
68306829
*/
68316830
protected _derivePossibleWidth() {
68326831
if (!this.columnWidthSetByUser) {
6833-
this._columnWidth = this.width !== null ? this.getPossibleColumnWidth() : this.minColumnWidth + 'px';
6832+
const possibleWidth = this.getPossibleColumnWidth();
6833+
if (possibleWidth === "0px") {
6834+
// all columns - hidden
6835+
this._columnWidth = possibleWidth;
6836+
} else if (this.width !== null) {
6837+
this._columnWidth = Math.max(parseFloat(possibleWidth), this.minColumnWidth) + 'px'
6838+
} else {
6839+
this._columnWidth = this.minColumnWidth + 'px';
6840+
}
68346841
}
68356842
this._columns.forEach((column: IgxColumnComponent) => {
68366843
if (this.hasColumnLayouts && parseFloat(this._columnWidth)) {
68376844
const columnWidthCombined = parseFloat(this._columnWidth) * (column.colEnd ? column.colEnd - column.colStart : 1);
68386845
column.defaultWidth = columnWidthCombined + 'px';
68396846
} else {
6840-
// D.K. March 29th, 2021 #9145 Consider min/max width when setting defaultWidth property
6841-
column.defaultWidth = this.getExtremumBasedColWidth(column);
6847+
column.defaultWidth = this._columnWidth;
68426848
column.resetCaches();
68436849
}
68446850
});
68456851
this.resetCachedWidths();
68466852
}
68476853

6848-
/**
6849-
* @hidden
6850-
* @internal
6851-
*/
6852-
protected getExtremumBasedColWidth(column: IgxColumnComponent): string {
6853-
let width = this._columnWidth;
6854-
if (width && typeof width !== 'string') {
6855-
width = String(width);
6856-
}
6857-
const minWidth = width.indexOf('%') === -1 ? column.userSetMinWidthPx : column.minWidthPercent;
6858-
const maxWidth = width.indexOf('%') === -1 ? column.maxWidthPx : column.maxWidthPercent;
6859-
if (column.hidden) {
6860-
return width;
6861-
}
6862-
6863-
if (minWidth > parseFloat(width)) {
6864-
width = String(column.minWidth);
6865-
} else if (maxWidth < parseFloat(width)) {
6866-
width = String(column.maxWidth);
6867-
}
6868-
6869-
// if no px or % are defined in maxWidth/minWidth consider it px
6870-
if (width.indexOf('%') === -1 && width.indexOf('px') === -1) {
6871-
width += 'px';
6872-
}
6873-
return width;
6874-
}
6875-
68766854
protected resetNotifyChanges() {
68776855
this._cdrRequestRepaint = false;
68786856
this._cdrRequests = false;
@@ -7166,13 +7144,6 @@ export abstract class IgxGridBaseDirective implements GridType,
71667144
this.cdr.detectChanges();
71677145
}
71687146

7169-
// in case horizontal scrollbar has appeared recalc to size correctly.
7170-
if (hasHScroll !== this.hasHorizontalScroll()) {
7171-
this.isHorizontalScrollHidden = !this.hasHorizontalScroll();
7172-
this.cdr.detectChanges();
7173-
this.calculateGridHeight();
7174-
this.cdr.detectChanges();
7175-
}
71767147
if (this.zone.isStable) {
71777148
this.zone.run(() => {
71787149
this._applyWidthHostBinding();
@@ -7192,6 +7163,16 @@ export abstract class IgxGridBaseDirective implements GridType,
71927163
this._autoSizeColumnsNotify.next();
71937164
});
71947165
}
7166+
7167+
// in case horizontal scrollbar has appeared recalc to size correctly.
7168+
if (hasHScroll !== this.hasHorizontalScroll()) {
7169+
this.isHorizontalScrollHidden = !this.hasHorizontalScroll();
7170+
this.cdr.detectChanges();
7171+
this.calculateGridHeight();
7172+
this.cdr.detectChanges();
7173+
} else {
7174+
this.resetCaches(recalcFeatureWidth);
7175+
}
71957176
}
71967177

71977178
/**

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2180,6 +2180,38 @@ describe('IgxGrid Component Tests #grid', () => {
21802180
// first column takes new min
21812181
expect(col1.calcPixelWidth).toBe(500);
21822182
});
2183+
2184+
it('in columns with no width and min-widths should recalculate and re-apply constraints to all cols.', () => {
2185+
const fix = TestBed.createComponent(IgxGridDefaultRenderingComponent);
2186+
// 3 cols
2187+
fix.componentInstance.initColumnsRows(5, 3);
2188+
fix.detectChanges();
2189+
2190+
const grid = fix.componentInstance.grid;
2191+
grid.columns[0].minWidth = "80px";
2192+
grid.columns[1].minWidth = "90px";
2193+
grid.columns[2].minWidth = "130px";
2194+
2195+
grid.width = "300px";
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(false);
2203+
expect(grid.isHorizontalScrollHidden).toBe(true);
2204+
2205+
grid.width = "290px";
2206+
fix.detectChanges();
2207+
2208+
expect(grid.columns[0].calcWidth).toBe(80);
2209+
expect(grid.columns[1].calcWidth).toBe(90);
2210+
expect(grid.columns[2].calcWidth).toBe(130);
2211+
2212+
expect(grid.hasHorizontalScroll()).toBe(true);
2213+
expect(grid.isHorizontalScrollHidden).toBe(false);
2214+
});
21832215
});
21842216

21852217

0 commit comments

Comments
 (0)