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.
-
+