Merge pull request #7484 from IgniteUI/mkirova/hgrid-remote-POC

ChronosSF · web-flow · commit 58bc3fc0cfad · 2020-06-19T10:00:35.000+03:00
HierarchicalGrid remote virtualization POC
diff --git a/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts b/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts
@@ -179,7 +179,26 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
      * this.parentVirtDir.totalItemCount = data.Count;
      * ```
      */
-    public totalItemCount: number = null;
+    public get totalItemCount() {
+        return this._totalItemCount;
+    }
+
+    public set totalItemCount(val) {
+        if (this._totalItemCount !== val) {
+            this._totalItemCount = val;
+            // update sizes in case total count changes.
+            const newSize = this.initSizesCache(this.igxForOf);
+            const sizeDiff = this.scrollComponent.size - newSize;
+            this.scrollComponent.size = newSize;
+            const lastChunkExceeded = this.state.startIndex + this.state.chunkSize > val;
+            if (lastChunkExceeded) {
+                this.state.startIndex = val - this.state.chunkSize;
+            }
+            this._adjustScrollPositionAfterSizeChange(sizeDiff);
+        }
+    }
+
+    private _totalItemCount: number = null;
 
     /**
      * An event that is emitted after a new chunk has been loaded.
@@ -320,7 +339,7 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
     /**
      * @hidden
      */
-    protected get isRemote(): boolean {
+    public get isRemote(): boolean {
         return this.totalItemCount !== null;
     }
 
@@ -1117,13 +1136,17 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
         const newHeight = this.initSizesCache(this.igxForOf);
 
         const diff = oldHeight - newHeight;
+        this._adjustScrollPositionAfterSizeChange(diff);
+    }
 
+    private _adjustScrollPositionAfterSizeChange(sizeDiff) {
         // if data has been changed while container is scrolled
         // should update scroll top/left according to change so that same startIndex is in view
-        if (Math.abs(diff) > 0 && this.scrollPosition > 0) {
+        if (Math.abs(sizeDiff) > 0 && this.scrollPosition > 0) {
             this.recalcUpdateSizes();
             const offset = parseInt(this.dc.instance._viewContainer.element.nativeElement.style.top, 10);
-            this.scrollPosition = this.sizesCache[this.state.startIndex] - offset;
+            const newSize = this.sizesCache[this.state.startIndex] - offset;
+            this.scrollPosition = newSize === this.scrollPosition ? newSize + 1 : newSize;
         }
     }
 
@@ -1525,7 +1548,7 @@ export class IgxGridForOfDirective<T> extends IgxForOfDirective<T> implements On
         if (changes && !this.isRemote) {
             newHeight = this.handleCacheChanges(changes);
         } else {
-            newHeight = this.initSizesCache(this.igxForOf);
+            return;
         }
 
         const diff = oldHeight - newHeight;
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-api.service.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-api.service.ts
@@ -102,8 +102,13 @@ export class IgxHierarchicalGridAPIService extends GridBaseAPIService<IgxGridBas
         let inState;
         if (record.childGridsData !== undefined) {
             const ri = record.rowID;
-            const rec = this.grid.primaryKey ? this.get_rec_by_id(ri) : ri;
-            inState = !!super.get_row_expansion_state(rec);
+            const states = this.grid.expansionStates;
+            const expanded = states.get(ri);
+            if (expanded !== undefined) {
+                return expanded;
+            } else {
+                return this.grid.getDefaultExpandState(record);
+            }
         } else {
             inState = !!super.get_row_expansion_state(record);
         }
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.pipes.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.pipes.ts
@@ -28,6 +28,9 @@ export class IgxGridHierarchicalPipe implements PipeTransform {
             return collection;
         }
         const grid: IgxHierarchicalGridComponent = this.gridAPI.grid;
+        if (grid.verticalScrollContainer.isRemote) {
+            return collection;
+        }
         const result = this.addHierarchy(grid, cloneArray(collection), state, primaryKey, childKeys);
 
         return result;
diff --git a/projects/igniteui-angular/src/public_api.ts b/projects/igniteui-angular/src/public_api.ts
@@ -76,6 +76,7 @@ export * from './lib/grids/columns/templates.directive';
 export * from './lib/grids/columns/column.component';
 export * from './lib/grids/columns/column-group.component';
 export * from './lib/grids/columns/column-layout.component';
+export * from './lib/grids/hierarchical-grid/hierarchical-grid.pipes';
 export * from './lib/icon/public_api';
 export * from './lib/input-group/public_api';
 export * from './lib/list/public_api';
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -408,7 +408,11 @@ export class AppComponent implements OnInit {
         }, {
             link: '/hierarchicalGridRemote',
             icon: 'swap_vert',
-            name: 'Hierarchical Grid Remote'
+            name: 'Hierarchical Grid Remote Load on Demand'
+        }, {
+            link: '/hierarchicalGridRemoteVirtualization',
+            icon: 'swap_vert',
+            name: 'Hierarchical Grid Remote Virtualization'
         }, {
             link: '/hierarchicalGridUpdating',
             icon: 'edit',
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -7,7 +7,7 @@ import {
     IgxIconModule, IgxGridModule, IgxExcelExporterService, IgxCsvExporterService, IgxOverlayService,
     IgxDragDropModule, IgxDividerModule, IgxTreeGridModule,  IgxHierarchicalGridModule, IgxInputGroupModule,
     IgxIconService, DisplayDensityToken, DisplayDensity,
-    IgxDateTimeEditorModule, IgxDateRangePickerModule, IgxButtonModule, IgxActionStripModule
+    IgxDateTimeEditorModule, IgxDateRangePickerModule, IgxButtonModule, IgxActionStripModule, GridBaseAPIService
 } from 'igniteui-angular';
 import { IgxColumnHidingModule } from 'igniteui-angular';
 import { SharedModule } from './shared/shared.module';
@@ -126,6 +126,11 @@ import { GridColumnSelectionSampleComponent, GridColumnSelectionFilterPipe } fro
 import { ReactiveFormSampleComponent } from './reactive-from/reactive-form-sample.component';
 import { GridRowPinningSampleComponent } from './grid-row-pinning/grid-row-pinning.sample';
 import { DateRangeSampleComponent } from './date-range/date-range.sample';
+import {
+    HierarchicalGridRemoteVirtualizationComponent
+} from './hierarchical-grid-remote-virtualization/hierarchical-grid-remote-virtualization';
+import { HierarchicalRemoteService } from './hierarchical-grid-remote-virtualization/hierarchical-remote.service';
+import { IgxGridHierarchicalPipe } from 'igniteui-angular';
 import { GridVirtualizationScrollSampleComponent } from './grid-remote-virtualization-with-scroll/grid-remote-virtualization-scroll.sample';
 
 const components = [
@@ -223,6 +228,7 @@ const components = [
     TooltipSampleComponent,
     HierarchicalGridSampleComponent,
     HierarchicalGridRemoteSampleComponent,
+    HierarchicalGridRemoteVirtualizationComponent,
     HierarchicalGridUpdatingSampleComponent,
     DisplayFormatPipe,
     InputFormatPipe,
@@ -273,6 +279,9 @@ const components = [
     providers: [
         LocalService,
         RemoteService,
+        HierarchicalRemoteService,
+        GridBaseAPIService,
+        IgxGridHierarchicalPipe,
         IgxExcelExporterService,
         IgxIconService,
         IgxCsvExporterService,
diff --git a/src/app/app.routing.ts b/src/app/app.routing.ts
@@ -72,6 +72,7 @@ import { GridMasterDetailSampleComponent } from './grid-master-detail/grid-maste
 import { DateTimeEditorSampleComponent } from './date-time-editor/date-time-editor.sample';
 import { GridRowPinningSampleComponent } from './grid-row-pinning/grid-row-pinning.sample';
 import { ActionStripSampleComponent } from './action-strip/action-strip.sample';
+import { HierarchicalGridRemoteVirtualizationComponent } from './hierarchical-grid-remote-virtualization/hierarchical-grid-remote-virtualization';
 import { GridVirtualizationScrollSampleComponent } from './grid-remote-virtualization-with-scroll/grid-remote-virtualization-scroll.sample';
 
 const appRoutes = [
@@ -331,6 +332,9 @@ const appRoutes = [
     }, {
         path: 'hierarchicalGridRemote',
         component: HierarchicalGridRemoteSampleComponent
+    }, {
+        path: 'hierarchicalGridRemoteVirtualization',
+        component: HierarchicalGridRemoteVirtualizationComponent
     }, {
         path: 'hierarchicalGridUpdating',
         component: HierarchicalGridUpdatingSampleComponent
diff --git a/src/app/hierarchical-grid-remote-virtualization/hierarchical-grid-remote-virtualization.html b/src/app/hierarchical-grid-remote-virtualization/hierarchical-grid-remote-virtualization.html
@@ -0,0 +1,25 @@
+<ng-template #remoteDataLoading>
+    <div class="remote-data-loading-template-medium"></div>
+</ng-template>
+
+<ng-template #cellTemplate igxCell let-val let-rowData="cell.row.rowData">
+    <div *ngIf="!rowData.emptyRec; else remoteDataLoading">
+       {{ val }}
+    </div>
+</ng-template>
+
+<igx-hierarchical-grid #hGrid [data]="gridData" [primaryKey]="'CustomerID'" [autoGenerate]="false" [height]="'500px'" [width]="'100%'" #hGrid [emptyGridMessage]="''">
+    <igx-column field="CustomerID" [hidden]='true'></igx-column>
+    <igx-column field="CompanyName" [cellTemplate]="cellTemplate"></igx-column>
+    <igx-column field="ContactName" [cellTemplate]="cellTemplate"></igx-column>
+    <igx-column field="ContactTitle" [cellTemplate]="cellTemplate"></igx-column>
+    <igx-column field="Country" [cellTemplate]="cellTemplate"></igx-column>
+    <igx-column field="Phone" [cellTemplate]="cellTemplate"></igx-column>
+    <igx-row-island #rowIsland1 [key]="'Orders'" [primaryKey]="'OrderID'" [autoGenerate]="false" [rowSelection]='selectionMode' [emptyGridMessage]="''">
+        <igx-column field="OrderID"></igx-column>
+        <igx-column field="OrderDate"></igx-column>
+        <igx-column field="ShipCountry"></igx-column>
+        <igx-column field="ShipCity"></igx-column>
+        <igx-column field="ShipAddress"></igx-column>
+        </igx-row-island>
+</igx-hierarchical-grid>
diff --git a/src/app/hierarchical-grid-remote-virtualization/hierarchical-grid-remote-virtualization.scss b/src/app/hierarchical-grid-remote-virtualization/hierarchical-grid-remote-virtualization.scss
@@ -0,0 +1,10 @@
+.remote-data-loading-template {
+    animation: content-placeholder-animation .5s infinite;
+    background-color: lightgray;
+    height: 15px;
+}
+
+.remote-data-loading-template-medium {
+    @extend .remote-data-loading-template;
+    width: 30px;
+}
diff --git a/src/app/hierarchical-grid-remote-virtualization/hierarchical-grid-remote-virtualization.ts b/src/app/hierarchical-grid-remote-virtualization/hierarchical-grid-remote-virtualization.ts
@@ -0,0 +1,66 @@
+import { Component, ViewChild, AfterViewInit, PipeTransform, Pipe, ChangeDetectorRef } from '@angular/core';
+import {
+    IgxRowIslandComponent,
+    IgxHierarchicalGridComponent,
+    IGridCreatedEventArgs,
+    GridSelectionMode
+} from 'igniteui-angular';
+import { RemoteService } from '../shared/remote.service';
+import { HierarchicalRemoteService } from './hierarchical-remote.service';
+import { debounceTime } from 'rxjs/operators';
+
+@Component({
+    selector: 'app-hierarchical-grid-remote-virtualization-sample',
+    templateUrl: 'hierarchical-grid-remote-virtualization.html',
+    styleUrls: ['hierarchical-grid-remote-virtualization.scss'],
+    providers: [RemoteService]
+})
+export class HierarchicalGridRemoteVirtualizationComponent implements AfterViewInit {
+
+    public selectionMode;
+    remoteData = [];
+    gridData = [];
+    totalCount: number;
+
+    @ViewChild('rowIsland1', { static: true })
+    rowIsland1: IgxRowIslandComponent;
+
+    @ViewChild('hGrid', { static: true })
+    hGrid: IgxHierarchicalGridComponent;
+
+    public isExpanding = false;
+
+    constructor(private remoteService: HierarchicalRemoteService, private cdr: ChangeDetectorRef) {
+        remoteService.url = 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers?$expand=Orders';
+    }
+
+    public handleLoad(args) {
+        this.remoteService.getData(args, this.hGrid, (data) => {
+            this.gridData = data;
+            this.cdr.detectChanges();
+        });
+    }
+
+    public ngAfterViewInit() {
+        // load initial data
+        this.handleLoad(this.hGrid.virtualizationState);
+
+        // update when row is expanded/collapsed
+        this.hGrid.expansionStatesChange.subscribe(x => {
+            this.handleLoad(this.hGrid.virtualizationState);
+        });
+
+        // update on scroll
+        this.hGrid.onDataPreLoad.pipe().subscribe(() => {
+            const data = this.remoteService.getDataFromCache(this.hGrid.virtualizationState);
+            if (data) {
+                this.gridData = data;
+            }
+        });
+
+        // handle remote request after user stops scrolling for 500ms
+        this.hGrid.onDataPreLoad.pipe(debounceTime(500)).subscribe((event) => {
+            this.handleLoad(event);
+        });
+    }
+}
diff --git a/src/app/hierarchical-grid-remote-virtualization/hierarchical-remote.service.ts b/src/app/hierarchical-grid-remote-virtualization/hierarchical-remote.service.ts
@@ -0,0 +1,96 @@
+import { Injectable } from '@angular/core';
+import { Observable, BehaviorSubject } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { HttpClient } from '@angular/common/http';
+import { IgxGridHierarchicalPipe } from 'projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.pipes';
+import { IgxHierarchicalGridAPIService, IgxHierarchicalGridComponent } from 'igniteui-angular';
+
+@Injectable()
+export class HierarchicalRemoteService {
+
+    public remotePagingData: BehaviorSubject<any[]>;
+    public cachedData = [];
+    requestStartIndex = 0;
+    totalCount: number;
+    remoteData: Observable<any[]>;
+    _remoteData: BehaviorSubject<any[]>;
+    url = `https://services.odata.org/V4/Northwind/Northwind.svc/Products`;
+    urlBuilder;
+
+    constructor(private http: HttpClient, private hierarchyPipe: IgxGridHierarchicalPipe) {
+        this._remoteData = new BehaviorSubject([]);
+        this.remoteData = this._remoteData.asObservable();
+    }
+
+
+    nullData() {
+        this._remoteData.next(null);
+    }
+
+    undefinedData() {
+        this._remoteData.next(undefined);
+    }
+
+    public getDataFromCache(data: any) {
+        const startIndex = data.startIndex;
+        const endIndex = (data.chunkSize || 11) + startIndex;
+        const dataResult = this.cachedData.slice(startIndex, endIndex);
+        while (dataResult.length < data.chunkSize) {
+            dataResult.unshift({emptyRec: true});
+        }
+        this._remoteData.next(dataResult);
+        return dataResult;
+    }
+
+    private _updateCachedData (data: any, startIndex: number, lastChunk: boolean) {
+        for (let i = 0; i < data.length; i++) {
+            this.cachedData[i + startIndex] = data[i];
+        }
+        if (lastChunk) {
+            this.cachedData.splice(startIndex + data.length);
+        }
+    }
+
+    getData(virtualizationState: any, grid: IgxHierarchicalGridComponent, cb?: (any) => void) {
+        return this.http.get(this.buildUrl(virtualizationState, grid)).pipe(
+            map(response => response),
+        )
+        .subscribe(d => {
+                const result = d['value'];
+                this.totalCount = d['@odata.count'];
+                if (this.cachedData.length === 0) {
+                    this.cachedData = new Array<any>(this.totalCount * 2).fill({emptyRec: true});
+                }
+                const processedData = this.hierarchyPipe
+                .addHierarchy(grid, result, grid.expansionStates, grid.primaryKey, grid.childLayoutKeys);
+
+                const childRecsBeforeIndex = this.cachedData
+                .filter((x, index) => grid.isChildGridRecord(x) && index < virtualizationState.startIndex);
+                const size = virtualizationState.chunkSize || 11;
+                const lastChunk =  virtualizationState.startIndex + size === grid.verticalScrollContainer.totalItemCount;
+                this._updateCachedData(processedData, this.requestStartIndex + childRecsBeforeIndex.length, lastChunk);
+                const allChildRecords = this.cachedData.filter(x => grid.isChildGridRecord(x));
+                grid.verticalScrollContainer.totalItemCount = this.totalCount + allChildRecords.length;
+                const dataResult = this.getDataFromCache(virtualizationState);
+                this._remoteData.next(dataResult);
+            if (cb) {
+                cb(dataResult);
+            }
+        });
+    }
+
+    public buildUrl(virtualizationArgs, grid) {
+        let qS = '';
+        if (virtualizationArgs) {
+            let requiredChunkSize: number;
+            const childRecsBeforeIndex = this.cachedData
+            .filter((x, index) => grid.isChildGridRecord(x) && index <= virtualizationArgs.startIndex);
+            const skip = virtualizationArgs.startIndex - childRecsBeforeIndex.length;
+            this.requestStartIndex = skip;
+            requiredChunkSize = virtualizationArgs.chunkSize === 0 ? 11 : virtualizationArgs.chunkSize + childRecsBeforeIndex.length;
+            const top = requiredChunkSize;
+            qS = `&$skip=${skip}&$top=${top}&$count=true`;
+        }
+        return `${this.url}${qS}`;
+    }
+}
diff --git a/src/app/routing.ts b/src/app/routing.ts
@@ -102,6 +102,9 @@ import { GridRowPinningSampleComponent } from './grid-row-pinning/grid-row-pinni
 import { ReactiveFormSampleComponent } from './reactive-from/reactive-form-sample.component';
 import { DateRangeSampleComponent } from './date-range/date-range.sample';
 import { ActionStripSampleComponent } from './action-strip/action-strip.sample';
+import {
+    HierarchicalGridRemoteVirtualizationComponent
+} from './hierarchical-grid-remote-virtualization/hierarchical-grid-remote-virtualization';
 import { GridVirtualizationScrollSampleComponent } from './grid-remote-virtualization-with-scroll/grid-remote-virtualization-scroll.sample';
 
 const appRoutes = [
@@ -460,6 +463,9 @@ const appRoutes = [
     }, {
         path: 'hierarchicalGridRemote',
         component: HierarchicalGridRemoteSampleComponent
+    }, {
+        path: 'hierarchicalGridRemoteVirtualization',
+        component: HierarchicalGridRemoteVirtualizationComponent
     }, {
         path: 'hierarchicalGridUpdating',
         component: HierarchicalGridUpdatingSampleComponent

Original file line number	Diff line number	Diff line change
`@@ -28,6 +28,9 @@ export class IgxGridHierarchicalPipe implements PipeTransform {`
`28`	`28`	`return collection;`
`29`	`29`	`}`
`30`	`30`	`const grid: IgxHierarchicalGridComponent = this.gridAPI.grid;`
	`31`	`+ if (grid.verticalScrollContainer.isRemote) {`
	`32`	`+ return collection;`
	`33`	`+ }`
`31`	`34`	`const result = this.addHierarchy(grid, cloneArray(collection), state, primaryKey, childKeys);`
`32`	`35`
`33`	`36`	`return result;`