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 3faea38020f..e01e7b2a847 100644 --- 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 index f3adc7998ca..56528a03410 100644 --- 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 { This is Tab 1 content. This is Tab 2 content. - +