fix(grid): igxGrid isn't displayed properly in IE11 in igxTabs #3047

IgniteUI · Dec 20, 2018 · 547f209 · 547f209
1 parent 780cc5a
commit 547f209
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 22 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
@@ -3406,7 +3406,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         if ((this._height && this._height.indexOf('%') === -1) || !this._height) {
             return;
         }
-        if (!this.nativeElement.parentNode.clientHeight) {
+        if (!this.nativeElement.parentNode || !this.nativeElement.parentNode.clientHeight) {
             const viewPortHeight = document.documentElement.clientHeight;
             this._height = this.rowBasedHeight <= viewPortHeight ? null : viewPortHeight.toString();
         } else {
@@ -3543,24 +3543,32 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
      * @hidden
      */
     protected calculateGridWidth() {
+        let width;
         const computed = this.document.defaultView.getComputedStyle(this.nativeElement);
+        const el = this.document.getElementById(this.nativeElement.id);
 
         if (this._width && this._width.indexOf('%') !== -1) {
             /* width in %*/
-            const width = computed.getPropertyValue('width').indexOf('%') === -1 ?
-                parseInt(computed.getPropertyValue('width'), 10) :
-                this.document.getElementById(this.nativeElement.id).offsetWidth;
-
-            if (Number.isFinite(width) && width !== this.calcWidth) {
-                this.calcWidth = width;
-
-                this.cdr.markForCheck();
-            }
+            width = computed.getPropertyValue('width').indexOf('%') === -1 ?
+                parseInt(computed.getPropertyValue('width'), 10) : null;
         } else {
-            this.calcWidth = parseInt(this._width, 10);
+            width = parseInt(this._width, 10);
+        }
+
+        if (!width && el) {
+            width = el.offsetWidth;
         }
 
         this._derivePossibleWidth();
+
+        if (!width) {
+            width = this.columnList.reduce((sum, item) =>  sum + parseInt((item.width || item.defaultWidth), 10), 0);
+        }
+
+        if (Number.isFinite(width) && width !== this.calcWidth) {
+            this.calcWidth = width;
+            this.cdr.markForCheck();
+        }
     }
 
     /**
@@ -4321,16 +4329,20 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     private checkIfGridIsAdded(node): boolean {
         if (node === this.nativeElement) {
             return true;
-        } else {
-            for (const childNode of node.childNodes) {
-                const added = this.checkIfGridIsAdded(childNode);
-                if (added) {
-                    return true;
-                }
-            }
+        }
 
+
+        if (!node.childNodes) {
             return false;
         }
+
+        for (const childNode of node.childNodes) {
+            const added = this.checkIfGridIsAdded(childNode);
+            if (added) {
+                return true;
+            }
+        }
+        return false;
     }
 
     /**

diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts
@@ -30,7 +30,7 @@ import { IgxTabsModule, IgxTabsComponent } from '../../tabs';
 
 const DEBOUNCETIME = 30;
 
-fdescribe('IgxGrid Component Tests', () => {
+describe('IgxGrid Component Tests', () => {
     const MIN_COL_WIDTH = '136px';
     const COLUMN_HEADER_CLASS = '.igx-grid__th';
     const COLUMN_HEADER_GROUP_CLASS = '.igx-grid__thead-item';
@@ -2986,7 +2986,7 @@ fdescribe('IgxGrid Component Tests', () => {
         });
     });
 
-    fdescribe('IgxGrid - Integration with other Igx Controls', () => {
+    describe('IgxGrid - Integration with other Igx Controls', () => {
         configureTestSuite();
         beforeEach(async(() => {
             TestBed.configureTestingModule({
@@ -3011,7 +3011,7 @@ fdescribe('IgxGrid Component Tests', () => {
             const gridBody = fix.debugElement.query(By.css('.igx-grid__tbody'));
             expect(parseInt(window.getComputedStyle(gridHeader.nativeElement).width, 10)).toBe(400);
             expect(parseInt(window.getComputedStyle(gridBody.nativeElement).width, 10)).toBe(400);
-            expect(parseInt(window.getComputedStyle(gridBody.nativeElement).height, 10)).toBe(500);
+            expect(parseInt(window.getComputedStyle(gridBody.nativeElement).height, 10)).toBe(510);
         }));
     });
 });
@@ -3545,7 +3545,7 @@ export class IgxGridRowEditingWithFeaturesComponent extends DataParent {
       <igx-tabs-group label="Tab 1">This is Tab 1 content.</igx-tabs-group>
       <igx-tabs-group label="Tab 2">This is Tab 2 content.</igx-tabs-group>
       <igx-tabs-group label="Tab 3">
-        <igx-grid #grid [data]="data" [primaryKey]="'id'" width="'null'">
+        <igx-grid #grid [data]="data" [primaryKey]="'id'">
           <igx-column
             *ngFor="let column of columns"
             [field]="column.field"