From aaeec0de0fd62ca3cd44c1608da8933a4d647f97 Mon Sep 17 00:00:00 2001 From: SAndreeva Date: Fri, 7 Dec 2018 16:10:28 +0200 Subject: [PATCH 1/3] fix(grid): add additional check that column width is not % #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 f8197e8a6d9..e5b27015060 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -2499,7 +2499,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements public getHeaderGroupWidth(column: IgxColumnComponent): string { const minWidth = this.defaultHeaderGroupMinWidth; - if (parseInt(column.width, 10) < minWidth) { + if (column.width && column.width.indexOf('%') === -1 && parseInt(column.width, 10) < minWidth) { return minWidth.toString(); } From 09413782eca6638e249573d6e185b3e1ed405c3a Mon Sep 17 00:00:00 2001 From: SAndreeva Date: Fri, 7 Dec 2018 16:38:23 +0200 Subject: [PATCH 2/3] fix(grid): extend percentage check #3071 --- .../igniteui-angular/src/lib/grids/grid-base.component.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 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 e5b27015060..9ffdbb1798a 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -2497,9 +2497,11 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements * @memberof IgxGridBaseComponent */ public getHeaderGroupWidth(column: IgxColumnComponent): string { - + const colWidth = column.width; const minWidth = this.defaultHeaderGroupMinWidth; - if (column.width && column.width.indexOf('%') === -1 && parseInt(column.width, 10) < minWidth) { + const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1; + + if (!isPercentageWidth && parseInt(column.width, 10) < minWidth) { return minWidth.toString(); } From 647ddff242b3f1a7d51a89a923f215d97e74ea22 Mon Sep 17 00:00:00 2001 From: SAndreeva Date: Mon, 10 Dec 2018 15:00:06 +0200 Subject: [PATCH 3/3] fix(grid): add a test to cover % column widths #3071 --- .../lib/grids/grid/column-resizing.spec.ts | 49 +++++++++++++++++-- 1 file changed, 45 insertions(+), 4 deletions(-) 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 1c03795dcde..b89f2eccd67 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 @@ -1,5 +1,5 @@ import { Component, DebugElement, OnInit, ViewChild } from '@angular/core'; -import { async, fakeAsync, TestBed, tick, flush } from '@angular/core/testing'; +import { async, fakeAsync, TestBed, tick } from '@angular/core/testing'; import { FormsModule } from '@angular/forms'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; @@ -30,7 +30,8 @@ describe('IgxGrid - Deferred Column Resizing', () => { LargePinnedColGridComponent, NullColumnsComponent, MultiColumnHeadersComponent, - ColGridComponent + ColGridComponent, + ColPercentageGridComponent ], imports: [ FormsModule, @@ -725,8 +726,6 @@ describe('IgxGrid - Deferred Column Resizing', () => { it('should size headers correctly when column width is below the allowed minimum.', fakeAsync(() => { const fixture = TestBed.createComponent(ColGridComponent); fixture.detectChanges(); - tick(); - fixture.detectChanges(); const headers = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS)); const headerGroups = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_GROUP_CLASS)); @@ -744,6 +743,30 @@ describe('IgxGrid - Deferred Column Resizing', () => { expect(headerGroups[1].nativeElement.getBoundingClientRect().width).toBe(50); expect(headerGroups[2].nativeElement.getBoundingClientRect().width).toBe(48); })); + + it('should size headers correctly when column width is in %.', fakeAsync(() => { + const fixture = TestBed.createComponent(ColPercentageGridComponent); + 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(COLUMN_FILTER_CELL_SELECTOR)); + + expect(headers[0].nativeElement.getBoundingClientRect().width).toBe(100); + expect(headers[1].nativeElement.getBoundingClientRect().width).toBe(100); + expect(headers[2].nativeElement.getBoundingClientRect().width).toBe(100); + expect(headers[3].nativeElement.getBoundingClientRect().width).toBe(100); + + expect(filteringCells[0].nativeElement.getBoundingClientRect().width).toBe(100); + expect(filteringCells[1].nativeElement.getBoundingClientRect().width).toBe(100); + expect(filteringCells[2].nativeElement.getBoundingClientRect().width).toBe(100); + expect(filteringCells[3].nativeElement.getBoundingClientRect().width).toBe(100); + + expect(headerGroups[0].nativeElement.getBoundingClientRect().width).toBe(100); + expect(headerGroups[1].nativeElement.getBoundingClientRect().width).toBe(100); + expect(headerGroups[2].nativeElement.getBoundingClientRect().width).toBe(100); + expect(headerGroups[3].nativeElement.getBoundingClientRect().width).toBe(100); + })); }); @Component({ @@ -872,3 +895,21 @@ export class ColGridComponent implements OnInit { this.data = SampleTestData.generateProductData(10); } } + +@Component({ + template: GridTemplateStrings.declareGrid(`width="400px" height="600px" [allowFiltering]="true"`, ``, + ` + + + ` + ) +}) +export class ColPercentageGridComponent implements OnInit { + data = []; + + @ViewChild(IgxGridComponent) public grid: IgxGridComponent; + + ngOnInit() { + this.data = SampleTestData.generateProductData(10); + } +}