fix(grid): reimplementing autosizing for indeterminable height scenarios - 7.2

projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts

@@ -1210,6 +1210,10 @@ export interface IForOfState {
     chunkSize?: number;
 }
 
+export interface IForOfDataChangingEventArgs {
+    containerSize: number;
+}
+
 @Directive({
     selector: '[igxGridFor][igxGridForOf]'
 })
@@ -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();
@@ -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;
@@ -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();

projects/igniteui-angular/src/lib/grids/grid-base.component.ts

@@ -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();
@@ -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;
@@ -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;
@@ -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$))
@@ -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) {
@@ -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
@@ -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();
         }
@@ -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;
@@ -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
      */