Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Jan 16, 2019
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
387ee22
fix(grid): igxGrid isn't displayed properly in IE11 if in igxTabs #3047
mpavlinov Jan 15, 2019
530aedd
chore(*): Fixing incorrect merge
mpavlinov Jan 16, 2019
b3c7419
Merge branch '7.1.x' into mpavlov/issue-3047-71x-1
mpavlinov Jan 16, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
108 changes: 67 additions & 41 deletions projects/igniteui-angular/src/lib/grids/grid-base.component.ts
View file
Open in desktop
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,10 +3607,10 @@ 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 +
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