Skip to content

Commit

Permalink
Merge pull request #5083 from IgniteUI/sstoychev/autosizing-for-master
Browse files Browse the repository at this point in the history 
fix(grid): applying autosizing fixes #4809
  • Loading branch information
@kdinev
kdinev committed Jun 19, 2019
2 parents 52492df + d9f43ba commit 0bb1e9e
Show file tree
Hide file tree
Showing 12 changed files with 447 additions and 72 deletions.
16 changes: 16 additions & 0 deletions projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1210,6 +1210,10 @@ export interface IForOfState {
chunkSize?: number;
}

export interface IForOfDataChangingEventArgs {
containerSize: number;
}

@Directive({
selector: '[igxGridFor][igxGridForOf]'
})
Expand All @@ -1235,6 +1239,13 @@ export class IgxGridForOfDirective<T> extends IgxForOfDirective<T> implements On
return this.igxForOf;
}

/**
* @hidden @internal
* An event that is emitted after data has been changed but before the view is refreshed
*/
@Output()
public onDataChanging = new EventEmitter<IForOfDataChangingEventArgs>();

ngOnInit() {
this.syncService.setMaster(this);
super.ngOnInit();
Expand Down Expand Up @@ -1413,6 +1424,10 @@ export class IgxGridForOfDirective<T> extends IgxForOfDirective<T> implements On
if (this._differ) {
const changes = this._differ.diff(this.igxForOf);
if (changes) {
const args: IForOfDataChangingEventArgs = {
containerSize: this.igxForContainerSize
};
this.onDataChanging.emit(args);
// re-init cache.
if (!this.igxForOf) {
return;
Expand All @@ -1425,6 +1440,7 @@ export class IgxGridForOfDirective<T> extends IgxForOfDirective<T> implements On
this.syncService.resetMaster();
}
this.syncService.setMaster(this);
this.igxForContainerSize = args.containerSize;
this._updateSizeCache(changes);
this._applyChanges();
this._updateScrollOffset();
Expand Down
78 changes: 37 additions & 41 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 @@ -628,6 +628,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
public set height(value: string) {
if (this._height !== value) {
this._height = value;
this._autoSize = false;
requestAnimationFrame(() => {
if (!this._destroyed) {
this.reflow();
Expand Down Expand Up @@ -2516,6 +2517,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
private _pinnedColumnsText = '';
private _height = '100%';
private _width = '100%';
protected _autoSize = false;
private _rowHeight;
protected _ngAfterViewInitPassed = false;
private _horizontalForOfs;
Expand All @@ -2532,7 +2534,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements

private _columnWidth: string;

private _defaultTargetRecordNumber = 10;
protected _defaultTargetRecordNumber = 10;

private _summaryPosition = GridSummaryPosition.bottom;
private _summaryCalculationMode = GridSummaryCalculationMode.rootAndChildLevels;
Expand Down Expand Up @@ -2715,7 +2717,6 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
this.columnListDiffer.diff(this.columnList);
this.markForCheck();
this.resetCaches();
this._derivePossibleHeight();

this.columnList.changes
.pipe(takeUntil(this.destroy$))
Expand Down Expand Up @@ -2843,6 +2844,10 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
vertScrDC.addEventListener('scroll', (evt) => { this.scrollHandler(evt); });
vertScrDC.addEventListener('wheel', () => { this.wheelHandler(); });

this.verticalScrollContainer.onDataChanging.pipe(takeUntil(this.destroy$)).subscribe(($event) => {
this.calculateGridHeight();
$event.containerSize = this.calcHeight;
});
this.verticalScrollContainer.onDataChanged.pipe(takeUntil(this.destroy$)).subscribe(() => {
requestAnimationFrame(() => {
if (!this._destroyed) {
Expand Down Expand Up @@ -3972,29 +3977,12 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
}

/**
* @hidden
* @hidden @internal
*/
protected get isPercentHeight() {
public get isPercentHeight() {
return this._height && this._height.indexOf('%') !== -1;
}

/**
* @hidden
* Sets this._height
*/
protected _derivePossibleHeight() {
if (!this.isPercentHeight || !this._height || !this.isAttachedToDom || this.rowBasedHeight === 0) {
return;
}
if (!this.nativeElement.parentNode || !this.nativeElement.parentNode.clientHeight) {
const viewPortHeight = document.documentElement.clientHeight;
this._height = this.rowBasedHeight <= viewPortHeight ? null : viewPortHeight.toString();
} else {
const parentHeight = this.nativeElement.parentNode.getBoundingClientRect().height;
this._height = this.rowBasedHeight <= parentHeight ? null : this._height;
}
}

/**
* @hidden
* Sets columns defaultWidth property
Expand Down Expand Up @@ -4036,21 +4024,12 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
* Sets TBODY height i.e. this.calcHeight
*/
protected calculateGridHeight() {
this._derivePossibleHeight();
// TODO: Calculate based on grid density
if (this.maxLevelHeaderDepth) {
this.theadRow.nativeElement.style.height = `${(this.maxLevelHeaderDepth + 1) * this.defaultRowHeight +
(this.allowFiltering && this.filterMode === FilterMode.quickFilter ? FILTER_ROW_HEIGHT : 0) + 1}px`;
}
this.summariesHeight = 0;
if (!this._height) {
this.calcHeight = null;
if (this.hasSummarizedColumns && this.rootSummariesEnabled) {
this.summariesHeight = this.summaryService.calcMaxSummaryHeight();
}
return;
}

if (this.hasSummarizedColumns && this.rootSummariesEnabled) {
this.summariesHeight = this.summaryService.calcMaxSummaryHeight();
}
Expand Down Expand Up @@ -4088,33 +4067,42 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
}
return pagingHeight;
}

/**
* @hidden
*/
protected _calculateGridBodyHeight() {
protected _calculateGridBodyHeight(): number {
if (!this._height) {
return null;
}
const footerBordersAndScrollbars = this.tfoot.nativeElement.offsetHeight -
this.tfoot.nativeElement.clientHeight;
let gridHeight;
const computed = this.document.defaultView.getComputedStyle(this.nativeElement);
const toolbarHeight = this.getToolbarHeight();
const pagingHeight = this.getPagingHeight();
const groupAreaHeight = this.getGroupAreaHeight();
let gridHeight;
const renderedHeight = toolbarHeight + this.theadRow.nativeElement.offsetHeight +
this.summariesHeight + pagingHeight + groupAreaHeight + footerBordersAndScrollbars +
this.scr.nativeElement.clientHeight;

if (this.isPercentHeight) {
/*height in %*/
if (computed.getPropertyValue('height').indexOf('%') === -1 ) {
gridHeight = parseInt(computed.getPropertyValue('height'), 10);
} else {
return this.defaultTargetBodyHeight;
if (!this.nativeElement.parentElement ||
this.nativeElement.parentElement.clientHeight === renderedHeight) {
/* parent element is sized by the rendered elements which means
the grid should attempt a content-box style rendering */
this._autoSize = true;
}
if (this._autoSize || computed.getPropertyValue('height').indexOf('%') !== -1) {
const bodyHeight = this.getDataBasedBodyHeight();
return bodyHeight > 0 ? bodyHeight : null;
}
gridHeight = parseInt(computed.getPropertyValue('height'), 10);
} else {
gridHeight = parseInt(this._height, 10);
}
const height = Math.abs(gridHeight - toolbarHeight -
this.theadRow.nativeElement.offsetHeight -
this.summariesHeight - pagingHeight -
groupAreaHeight - footerBordersAndScrollbars -
this.scr.nativeElement.clientHeight);
const height = Math.abs(gridHeight - renderedHeight);

if (height === 0 || isNaN(gridHeight)) {
const bodyHeight = this.defaultTargetBodyHeight;
Expand Down Expand Up @@ -4236,6 +4224,14 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
isScrollable);
}

/**
* @hidden @internal
*/
protected getDataBasedBodyHeight(): number {
return !this.data || (this.data.length < this._defaultTargetRecordNumber) ?
0 : this.defaultTargetBodyHeight;
}

/**
* @hidden
*/
Expand Down
Loading

0 comments on commit 0bb1e9e

Please sign in to comment.