Merge pull request #3354 from IgniteUI/SAndreeva/fix-percentage-col

fix(grid): check for % when setting min width to header group
IgniteUI · Dec 11, 2018 · 73c5f01 · 73c5f01
2 parents 71ce9a4 + f18a3c3
commit 73c5f01
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 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
@@ -2595,9 +2595,11 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
 	 * @memberof IgxGridBaseComponent
      */
     public getHeaderGroupWidth(column: IgxColumnComponent): string {
-
+        const colWidth = column.width;
         const minWidth = this.defaultHeaderGroupMinWidth;
-        if (parseInt(column.width, 10) < minWidth) {
+        const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1;
+
+        if (!isPercentageWidth && 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
@@ -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"`, ``,
+        `<igx-column [field]="'Items'" [width]="'25%'" dataType="string" [filterable]="true"></igx-column>
+         <igx-column [field]="'ID'" [width]="'25%'" [header]="'ID'" [filterable]="true"></igx-column>
+         <igx-column [field]="'ProductName'" [width]="'25%'" dataType="string" [filterable]="true"></igx-column>
+         <igx-column [field]="'Test'"[width]="'25%'" dataType="string" [resizable]="true"></igx-column>`
+    )
+})
+export class ColPercentageGridComponent implements OnInit {
+    data = [];
+
+    @ViewChild(IgxGridComponent) public grid: IgxGridComponent;
+
+    ngOnInit() {
+        this.data = SampleTestData.generateProductData(10);
+    }
+}