Skip to content

Commit

Permalink
fix(grid): reimplementing autosizing for indeterminable height scena…
Browse files Browse the repository at this point in the history 
…rios - 7.2 (#4940)

* fix(grid): applying limited autosizing fixes #4809

* chore(*): some test fixes

* chore(*): final fixes for tests

* test(grid): adding tests for auto-sizing #4809

* fix(hgrid): adding auto-sizing specific hgrid implementation #4809

* chore(*): fixing test expectation based on new logic

* chore(*): applying hgrid logic to grid

* chore(*): resolving last failing tests

* chore(*): fixing tests that fail because of rowHeight fix
  • Loading branch information
@ChronosSF @mpavlinov
ChronosSF authored and mpavlinov committed Jun 17, 2019
1 parent 022a234 commit 8e99941
Show file tree
Hide file tree
Showing 12 changed files with 446 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 @@ -1411,6 +1422,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 @@ -1423,6 +1438,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
77 changes: 36 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 @@ -585,6 +585,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 @@ -2431,6 +2432,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 @@ -2447,7 +2449,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
private _columnWidth: string;
private _columnWidthSetByUser = false;

private _defaultTargetRecordNumber = 10;
protected _defaultTargetRecordNumber = 10;

private _summaryPosition = GridSummaryPosition.bottom;
private _summaryCalculationMode = GridSummaryCalculationMode.rootAndChildLevels;
Expand Down Expand Up @@ -2630,7 +2632,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 @@ -2758,6 +2759,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 @@ -3863,29 +3868,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 @@ -3922,21 +3910,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 @@ -3977,30 +3956,38 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
/**
* @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 @@ -4108,6 +4095,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 8e99941

Please sign in to comment.