Skip to content

Commit

Permalink
fix(grid): igxGrid isn't displayed properly in IE11 if in igxTabs #3047
Browse files Browse the repository at this point in the history
  • Loading branch information
@mpavlinov
mpavlinov committed Jan 16, 2019
1 parent 65a60f1 commit 387ee22
Show file tree
Hide file tree
Showing 2 changed files with 197 additions and 73 deletions.
110 changes: 68 additions & 42 deletions projects/igniteui-angular/src/lib/grids/grid-base.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2359,7 +2359,6 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
this._keydownListener = this.keydownHandler.bind(this);
this.nativeElement.addEventListener('keydown', this._keydownListener);
});
this.calculateGridWidth();
this.initPinning();
this.calculateGridSizes();
this.onDensityChanged.pipe(takeUntil(this.destroy$)).subscribe(() => {
Expand All @@ -2374,20 +2373,19 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
// In some rare cases we get the AfterViewInit before the grid is added to the DOM
// and as a result we get 0 width and can't size ourselves properly.
// In order to prevent that add a mutation observer that watches if we have been added.
if (!this.calcWidth && this._width !== undefined) {
if (!this.isAttachedToDom) {
const config = { childList: true, subtree: true };
let observer: MutationObserver = null;
const callback = (mutationsList) => {
mutationsList.forEach((mutation) => {
if (mutation.type === 'childList') {
const addedNodes = new Array(...mutation.addedNodes);
addedNodes.forEach((node) => {
const added = this.checkIfGridIsAdded(node);
for (let i = 0; i < mutation.addedNodes.length; i++) {
const added = this.checkIfGridIsAdded(mutation.addedNodes[i]);
if (added) {
this.calculateGridWidth();
this.reflow();
observer.disconnect();
}
});
}
}
});
};
Expand Down Expand Up @@ -3570,9 +3568,10 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements

/**
* @hidden
* Sets this._height
*/
protected _derivePossibleHeight() {
if ((this._height && this._height.indexOf('%') === -1) || !this._height) {
if ((this._height && this._height.indexOf('%') === -1) || !this._height || !this.isAttachedToDom) {
return;
}
if (!this.nativeElement.parentNode || !this.nativeElement.parentNode.clientHeight) {
Expand All @@ -3582,18 +3581,17 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
const parentHeight = this.nativeElement.parentNode.getBoundingClientRect().height;
this._height = this.rowBasedHeight <= parentHeight ? null : this._height;
}
this.calculateGridHeight();
this.cdr.detectChanges();
}

/**
* @hidden
* Sets columns defaultWidth property
*/
protected _derivePossibleWidth() {
if (!this._columnWidthSetByUser) {
this._columnWidth = this.getPossibleColumnWidth();
this.columnList.forEach((column: IgxColumnComponent) => {
column.defaultWidth = this.columnWidth;
column.defaultWidth = this._columnWidth;
});
}
}
Expand All @@ -3609,14 +3607,14 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements

/**
* @hidden
* Sets TBODY height i.e. this.calcHeight
*/
protected calculateGridHeight() {
const computed = this.document.defaultView.getComputedStyle(this.nativeElement);

this._derivePossibleHeight();
// TODO: Calculate based on grid density
if (this.maxLevelHeaderDepth) {
this.theadRow.nativeElement.style.height = `${(this.maxLevelHeaderDepth + 1) * this.defaultRowHeight +
(this.allowFiltering ? FILTER_ROW_HEIGHT : 0) + 1}px`;
(this.allowFiltering ? this._rowHeight : 0) + 1}px`;
}
this.summariesHeight = 0;
if (!this._height) {
Expand All @@ -3627,56 +3625,77 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
return;
}

if (this.hasSummarizedColumns && this.rootSummariesEnabled) {
this.summariesHeight = this.summaryService.calcMaxSummaryHeight();
}

this.calcHeight = this._calculateGridBodyHeight();
}

/**
* @hidden
*/
protected getGroupAreaHeight(): number {
return 0;
}

/**
* @hidden
*/
protected getToolbarHeight(): number {
let toolbarHeight = 0;
if (this.showToolbar && this.toolbarHtml != null) {
toolbarHeight = this.toolbarHtml.nativeElement.firstElementChild ?
this.toolbarHtml.nativeElement.offsetHeight : 0;
}
return toolbarHeight;
}

/**
* @hidden
*/
protected getPagingHeight(): number {
let pagingHeight = 0;
if (this.paging && this.paginator) {
pagingHeight = this.paginator.nativeElement.firstElementChild ?
this.paginator.nativeElement.offsetHeight : 0;
}
return pagingHeight;
}

if (this.hasSummarizedColumns && this.rootSummariesEnabled) {
this.summariesHeight = this.summaryService.calcMaxSummaryHeight();
}
/**
* @hidden
*/
protected _calculateGridBodyHeight() {
const footerBordersAndScrollbars = this.tfoot.nativeElement.offsetHeight -
this.tfoot.nativeElement.clientHeight;
const computed = this.document.defaultView.getComputedStyle(this.nativeElement);
const toolbarHeight = this.getToolbarHeight();
const pagingHeight = this.getPagingHeight();
const groupAreaHeight = this.getGroupAreaHeight();
let gridHeight;

if (!this.isAttachedToDom) {
return null;
}

if (this._height && this._height.indexOf('%') !== -1) {
/*height in %*/
this.calcHeight = this._calculateGridBodyHeight(
parseInt(computed.getPropertyValue('height'), 10), toolbarHeight, pagingHeight, groupAreaHeight);
gridHeight = parseInt(computed.getPropertyValue('height'), 10);
} else {
this.calcHeight = this._calculateGridBodyHeight(
parseInt(this._height, 10), toolbarHeight, pagingHeight, groupAreaHeight);
gridHeight = parseInt(this._height, 10);
}
}

/**
* @hidden
*/
protected getGroupAreaHeight(): number {
return 0;
}
const height = Math.abs(gridHeight - toolbarHeight -
this.theadRow.nativeElement.offsetHeight -
this.summariesHeight - pagingHeight - groupAreaHeight -
footerBordersAndScrollbars -
this.scr.nativeElement.clientHeight);

/**
* @hidden
*/
protected _calculateGridBodyHeight(gridHeight: number,
toolbarHeight: number, pagingHeight: number, groupAreaHeight: number) {
const footerBordersAndScrollbars = this.tfoot.nativeElement.offsetHeight -
this.tfoot.nativeElement.clientHeight;
if (isNaN(gridHeight)) {
if (height === 0 || isNaN(gridHeight)) {
return this.defaultTargetBodyHeight;
}

return Math.abs(gridHeight - toolbarHeight -
this.theadRow.nativeElement.offsetHeight -
this.summariesHeight - pagingHeight - groupAreaHeight -
footerBordersAndScrollbars -
this.scr.nativeElement.clientHeight);
return height;
}

/**
Expand Down Expand Up @@ -3714,6 +3733,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements

/**
* @hidden
* Sets grid width i.e. this.calcWidth
*/
protected calculateGridWidth() {
let width;
Expand Down Expand Up @@ -4757,4 +4777,10 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
return rowData.summaries && (rowData.summaries instanceof Map);
}

/**
* @hidden
*/
protected get isAttachedToDom(): boolean {
return this.document.body.contains(this.nativeElement);
}
}
Loading

0 comments on commit 387ee22

Please sign in to comment.