From 699c8aedd1a167ceffadd409ba67c9768379aa1d Mon Sep 17 00:00:00 2001 From: SAndreeva Date: Tue, 4 Dec 2018 17:25:15 +0200 Subject: [PATCH 1/3] fix(grid): set min width to header groups #3071 --- .../src/lib/grids/grid-base.component.ts | 30 ++++++++++++ .../lib/grids/grid-header-group.component.ts | 2 +- .../lib/grids/grid/column-resizing.spec.ts | 47 ++++++++++++++++++- .../src/lib/grids/grid/grid.component.html | 4 +- .../grids/tree-grid/tree-grid.component.html | 4 +- 5 files changed, 81 insertions(+), 6 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts index f653723438a..40364e7240d 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -2377,6 +2377,22 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements } } + /** + * Returns the `IgxGridHeaderGroupComponent`'s minimum allloed width. + * Used internally for restricting header group component width. + * The values below depend on the header cell default right/left padding values. + * @memberof IgxGridBaseComponent + */ + get defaultHeaderGroupMinWidth(): number { + if (this.isCosy()) { + return 32; + } else if (this.isCompact()) { + return 24; + } else { + return 48; + } + } + /** * Returns the maximum width of the container for the pinned `IgxColumnComponent`s. * ```typescript @@ -2461,6 +2477,20 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements return this._unpinnedColumns.filter((col) => !col.hidden); // .sort((col1, col2) => col1.index - col2.index); } + /** + * Returns the `width` to be set on `IgxGridHeaderGroupComponent`. + * @memberof IgxGridBaseComponent + */ + public getHeaderGroupWidth(column: IgxColumnComponent): string { + + const minWidth = this.defaultHeaderGroupMinWidth; + if (parseInt(column.width, 10) < this.defaultHeaderGroupMinWidth) { + return minWidth.toString(); + } + + return column.width + } + /** * Returns the `IgxColumnComponent` by field name. * ```typescript diff --git a/projects/igniteui-angular/src/lib/grids/grid-header-group.component.ts b/projects/igniteui-angular/src/lib/grids/grid-header-group.component.ts index bd9981d6058..77508828ce5 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-header-group.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-header-group.component.ts @@ -70,7 +70,7 @@ export class IgxGridHeaderGroupComponent implements DoCheck { @HostBinding('style.min-width') @HostBinding('style.flex-basis') get width() { - return this.column.width; + return this.grid.getHeaderGroupWidth(this.column); } /** diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts index 2d4d7020863..4d54b5eb41b 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts @@ -28,7 +28,8 @@ describe('IgxGrid - Deferred Column Resizing', () => { GridFeaturesComponent, LargePinnedColGridComponent, NullColumnsComponent, - MultiColumnHeadersComponent + MultiColumnHeadersComponent, + ColGridComponent ], imports: [ FormsModule, @@ -719,6 +720,29 @@ describe('IgxGrid - Deferred Column Resizing', () => { fixture.detectChanges(); expect(column.width).toEqual('111px'); })); + + it('should size headers correctly when column width is below the allowed minimum.', fakeAsync(() => { + const fixture = TestBed.createComponent(ColGridComponent); + fixture.detectChanges(); + + const headers = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS)); + const headerGroups = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_GROUP_CLASS)); + const filteringCells = fixture.debugElement.queryAll(By.css('igx-grid-filtering-cell')); + + expect(headers[0].nativeElement.getBoundingClientRect().width).toBe(49); + expect(headers[1].nativeElement.getBoundingClientRect().width).toBe(50); + expect(headers[2].nativeElement.getBoundingClientRect().width).toBe(49); + + expect(filteringCells[0].nativeElement.getBoundingClientRect().width).toBe(49); + expect(filteringCells[1].nativeElement.getBoundingClientRect().width).toBe(50); + expect(filteringCells[2].nativeElement.getBoundingClientRect().width).toBe(49); + + expect(headerGroups[0].nativeElement.getBoundingClientRect().width).toBe(48); + expect(headerGroups[1].nativeElement.getBoundingClientRect().width).toBe(50); + expect(headerGroups[2].nativeElement.getBoundingClientRect().width).toBe(48); + + + })); }); @Component({ @@ -827,3 +851,24 @@ export class NullColumnsComponent implements OnInit { this.data = SampleTestData.contactInfoData(); } } + + +@Component({ + template: GridTemplateStrings.declareGrid(`width="400px" height="600px" [allowFiltering]="true"`, ``, + ` + + + + + ` + ) +}) +export class ColGridComponent implements OnInit { + data = []; + + @ViewChild(IgxGridComponent) public grid: IgxGridComponent; + + ngOnInit() { + this.data = SampleTestData.generateProductData(10); + } +} diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html index 6a3ae954eaf..84fe25293bb 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html @@ -54,12 +54,12 @@ - + - + diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html index fc113af79b7..643102c070d 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html @@ -31,12 +31,12 @@ - + - + From 549d08a2327ad8d391f3c590972bb4fc7fff8118 Mon Sep 17 00:00:00 2001 From: SAndreeva Date: Wed, 5 Dec 2018 15:21:26 +0200 Subject: [PATCH 2/3] chore(*): fix lint errors #3071 --- projects/igniteui-angular/src/lib/grids/grid-base.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts index 40364e7240d..4fc77ed1dce 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -2488,7 +2488,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements return minWidth.toString(); } - return column.width + return column.width; } /** From 881388e767d04aeffbc2dd2e27a199441550d980 Mon Sep 17 00:00:00 2001 From: SAndreeva Date: Fri, 7 Dec 2018 10:02:46 +0200 Subject: [PATCH 3/3] fix(grid): address review comments #3071 --- .../igniteui-angular/src/lib/grids/grid-base.component.ts | 4 ++-- .../src/lib/grids/grid/column-resizing.spec.ts | 6 ++---- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts index 4fc77ed1dce..20c8454a61c 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -2378,7 +2378,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements } /** - * Returns the `IgxGridHeaderGroupComponent`'s minimum allloed width. + * Returns the `IgxGridHeaderGroupComponent`'s minimum allowed width. * Used internally for restricting header group component width. * The values below depend on the header cell default right/left padding values. * @memberof IgxGridBaseComponent @@ -2484,7 +2484,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements public getHeaderGroupWidth(column: IgxColumnComponent): string { const minWidth = this.defaultHeaderGroupMinWidth; - if (parseInt(column.width, 10) < this.defaultHeaderGroupMinWidth) { + if (parseInt(column.width, 10) < minWidth) { return minWidth.toString(); } diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts index 4d54b5eb41b..9177c263456 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts @@ -19,6 +19,7 @@ describe('IgxGrid - Deferred Column Resizing', () => { configureTestSuite(); const COLUMN_HEADER_CLASS = '.igx-grid__th'; const COLUMN_HEADER_GROUP_CLASS = '.igx-grid__thead-item'; + const COLUMN_FILTER_CELL_CLASS = 'igx-grid-filtering-cell'; beforeEach(async(() => { TestBed.configureTestingModule({ @@ -727,7 +728,7 @@ describe('IgxGrid - Deferred Column Resizing', () => { const headers = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS)); const headerGroups = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_GROUP_CLASS)); - const filteringCells = fixture.debugElement.queryAll(By.css('igx-grid-filtering-cell')); + const filteringCells = fixture.debugElement.queryAll(By.css(COLUMN_FILTER_CELL_CLASS )); expect(headers[0].nativeElement.getBoundingClientRect().width).toBe(49); expect(headers[1].nativeElement.getBoundingClientRect().width).toBe(50); @@ -740,8 +741,6 @@ describe('IgxGrid - Deferred Column Resizing', () => { expect(headerGroups[0].nativeElement.getBoundingClientRect().width).toBe(48); expect(headerGroups[1].nativeElement.getBoundingClientRect().width).toBe(50); expect(headerGroups[2].nativeElement.getBoundingClientRect().width).toBe(48); - - })); }); @@ -852,7 +851,6 @@ export class NullColumnsComponent implements OnInit { } } - @Component({ template: GridTemplateStrings.declareGrid(`width="400px" height="600px" [allowFiltering]="true"`, ``, `