Skip to content

Commit 2eb6a21

Browse files
RivaIvanovaRivaIvanova
authored
Merge branch '19.2.x' into rivanova/fix-16145-19.2.x
2 parents defb576 + c8ea400 commit 2eb6a21

File tree

5 files changed

+55
-14
lines changed

5 files changed

+55
-14
lines changed

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

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -967,8 +967,9 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
967967
*/
968968
public get minWidthPx() {
969969
const gridAvailableSize = this.grid.calcWidth;
970-
const isPercentageWidth = this.minWidth && typeof this.minWidth === 'string' && this.minWidth.indexOf('%') !== -1;
971-
return isPercentageWidth ? parseFloat(this.minWidth) / 100 * gridAvailableSize : parseFloat(this.minWidth);
970+
const minWidth = this.minWidth || this.defaultMinWidth;
971+
const isPercentageWidth = minWidth && typeof minWidth === 'string' && minWidth.indexOf('%') !== -1;
972+
return isPercentageWidth ? parseFloat(minWidth) / 100 * gridAvailableSize : parseFloat(minWidth);
972973
}
973974

974975
/**
@@ -985,8 +986,9 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
985986
*/
986987
public get minWidthPercent() {
987988
const gridAvailableSize = this.grid.calcWidth;
988-
const isPercentageWidth = this.minWidth && typeof this.minWidth === 'string' && this.minWidth.indexOf('%') !== -1;
989-
return isPercentageWidth ? parseFloat(this.minWidth) : parseFloat(this.minWidth) / gridAvailableSize * 100;
989+
const minWidth = this.minWidth || this.defaultMinWidth;
990+
const isPercentageWidth = minWidth && typeof minWidth === 'string' && minWidth.indexOf('%') !== -1;
991+
return isPercentageWidth ? parseFloat(minWidth) : parseFloat(minWidth) / gridAvailableSize * 100;
990992
}
991993

992994

@@ -1014,7 +1016,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
10141016
this.grid.notifyChanges(true);
10151017
}
10161018
public get minWidth(): string {
1017-
return !this._defaultMinWidth ? this.defaultMinWidth : this._defaultMinWidth;
1019+
return this._defaultMinWidth;
10181020
}
10191021

10201022
/** @hidden @internal **/
@@ -2646,8 +2648,15 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
26462648
const currentCalcWidth = this.defaultWidth || this.grid.getPossibleColumnWidth();
26472649
this._calcWidth = this.getConstrainedSizePx(currentCalcWidth);
26482650
} else {
2649-
const currentCalcWidth = parseFloat(this.width);
2650-
this._calcWidth =this.getConstrainedSizePx(currentCalcWidth);
2651+
let possibleColumnWidth = '';
2652+
if (!this.widthSetByUser && this.userSetMinWidthPx && this.userSetMinWidthPx < this.grid.minColumnWidth) {
2653+
possibleColumnWidth = this.defaultWidth = this.grid.getPossibleColumnWidth(null, this.userSetMinWidthPx);
2654+
} else {
2655+
possibleColumnWidth = this.width;
2656+
}
2657+
2658+
const currentCalcWidth = parseFloat(possibleColumnWidth);
2659+
this._calcWidth = this.getConstrainedSizePx(currentCalcWidth);
26512660
}
26522661
this.calcPixelWidth = parseFloat(this._calcWidth);
26532662
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1200,7 +1200,7 @@ export interface GridType extends IGridDataBindable {
12001200
refreshSearch(): void;
12011201
getDefaultExpandState(record: any): boolean;
12021202
trackColumnChanges(index: number, column: any): any;
1203-
getPossibleColumnWidth(): string;
1203+
getPossibleColumnWidth(baseWidth?: number, minColumnWidth?: number): string;
12041204
resetHorizontalVirtualization(): void;
12051205
hasVerticalScroll(): boolean;
12061206
getVisibleContentHeight(): number;

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5451,7 +5451,7 @@ export abstract class IgxGridBaseDirective implements GridType,
54515451
/**
54525452
* @hidden @internal
54535453
*/
5454-
public getPossibleColumnWidth(baseWidth: number = null) {
5454+
public getPossibleColumnWidth(baseWidth: number = null, minColumnWidth: number = null) {
54555455
let computedWidth;
54565456
if (baseWidth !== null) {
54575457
computedWidth = baseWidth;
@@ -5500,9 +5500,11 @@ export abstract class IgxGridBaseDirective implements GridType,
55005500
}
55015501
computedWidth -= this.featureColumnsWidth();
55025502

5503+
const minColWidth = minColumnWidth || this.minColumnWidth;
5504+
55035505
const columnWidth = !Number.isFinite(sumExistingWidths) ?
5504-
Math.max(computedWidth / columnsToSize, this.minColumnWidth) :
5505-
Math.max((computedWidth - sumExistingWidths) / columnsToSize, this.minColumnWidth);
5506+
Math.max(computedWidth / columnsToSize, minColWidth) :
5507+
Math.max((computedWidth - sumExistingWidths) / columnsToSize, minColWidth);
55065508

55075509
return columnWidth + 'px';
55085510
}

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => {
2929
GridFeaturesComponent,
3030
LargePinnedColGridComponent,
3131
NullColumnsComponent,
32+
MinWidthColumnsComponent,
3233
ColGridComponent,
3334
ColPercentageGridComponent
3435
]
@@ -898,6 +899,18 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => {
898899
expect(headers[headers.length - 1].nativeElement.innerText).toEqual("ReleaseDate");
899900
expect(firstRowCells.length).toEqual(11);
900901
}));
902+
903+
it('should use user-provided `minWidth` as default min column width to size columns - #16057.', fakeAsync(() => {
904+
const fixture = TestBed.createComponent(MinWidthColumnsComponent);
905+
fixture.detectChanges();
906+
907+
const grid = fixture.componentInstance.grid;
908+
909+
expect(grid.columnList.get(0).width).toEqual('130px');
910+
expect(grid.columnList.get(1).width).toEqual('90px');
911+
expect(grid.columnList.get(2).width).toEqual('90px');
912+
expect(grid.columnList.get(3).width).toEqual('90px');
913+
}));
901914
});
902915

903916
describe('Resizer tests: ', () => {
@@ -1056,6 +1069,23 @@ export class NullColumnsComponent implements OnInit {
10561069
}
10571070
}
10581071

1072+
@Component({
1073+
template: GridTemplateStrings.declareGrid(`width="400px" height="200px"`, ``, `<igx-column [field]="'ID'" [width]="'130px'" [resizable]="true"></igx-column>
1074+
<igx-column [field]="'CompanyName'" [minWidth]="'50px'" [resizable]="true"></igx-column>
1075+
<igx-column [field]="'ContactName'" [minWidth]="'50px'" [resizable]="true"></igx-column>
1076+
<igx-column [field]="'ContactTitle'" [minWidth]="'50px'" [resizable]="true"></igx-column>`),
1077+
imports: [IgxGridComponent, IgxColumnComponent]
1078+
})
1079+
export class MinWidthColumnsComponent implements OnInit {
1080+
@ViewChild(IgxGridComponent, { static: true }) public grid: IgxGridComponent;
1081+
1082+
public data = [];
1083+
1084+
public ngOnInit(): void {
1085+
this.data = SampleTestData.contactInfoData();
1086+
}
1087+
}
1088+
10591089
@Component({
10601090
template: GridTemplateStrings.declareGrid(`width="400px" height="600px" [allowFiltering]="true"`, ``, `<igx-column [field]="'Items'" [width]="'40px'" dataType="string" [filterable]="true"></igx-column>
10611091
<igx-column [field]="'ID'" [width]="'50px'" [header]="'ID'" [filterable]="true"></igx-column>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -531,7 +531,7 @@ describe('IgxPivotGrid #pivotGrid', () => {
531531
expect(pivotGrid.gridSize).toBe(Size.Small);
532532
const dimensionContents = fixture.debugElement.queryAll(By.css('.igx-grid__tbody-pivot-dimension'));
533533
let rowHeaders = dimensionContents[0].queryAll(By.directive(IgxPivotRowDimensionHeaderGroupComponent));
534-
expect(rowHeaders[0].componentInstance.column.minWidth).toBe(minWidthSupercompact);
534+
expect(rowHeaders[0].componentInstance.column.defaultMinWidth).toBe(minWidthSupercompact);
535535
expect(pivotGrid.rowList.first.cells.first.nativeElement.offsetHeight).toBe(cellHeightSuperCompact);
536536

537537
pivotGrid.superCompactMode = false;
@@ -543,7 +543,7 @@ describe('IgxPivotGrid #pivotGrid', () => {
543543

544544
expect(pivotGrid.gridSize).toBe(Size.Large);
545545
rowHeaders = dimensionContents[0].queryAll(By.directive(IgxPivotRowDimensionHeaderGroupComponent));
546-
expect(rowHeaders[0].componentInstance.column.minWidth).toBe(minWidthComf);
546+
expect(rowHeaders[0].componentInstance.column.defaultMinWidth).toBe(minWidthComf);
547547
expect(pivotGrid.rowList.first.cells.first.nativeElement.offsetHeight).toBe(cellHeightComf);
548548
}));
549549

@@ -2411,7 +2411,7 @@ describe('IgxPivotGrid #pivotGrid', () => {
24112411
fixture.detectChanges();
24122412

24132413
rowHeaders = dimensionContents[0].queryAll(By.directive(IgxPivotRowDimensionHeaderGroupComponent));
2414-
const minWdith = parseFloat(rowHeaders[0].componentInstance.column.minWidth);
2414+
const minWdith = parseFloat(rowHeaders[0].componentInstance.column.defaultMinWidth);
24152415
expect(parseFloat(rowHeaders[0].componentInstance.column.width)).toEqual(minWdith);
24162416
expect(parseFloat(rowHeaders[3].componentInstance.column.width)).toEqual(minWdith);
24172417

0 commit comments

Comments
 (0)