Merge branch 'master' into iganchev/select-implement-hint

Author: Lipata

ROADMAP.md

@@ -19,19 +19,19 @@ To Be Updated
 
 ## Milestone 11 (Released June 2nd, 2020)
 
-1. Dock Manger [#5980](https://github.com/IgniteUI/igniteui-angular/issues/5980)
-2. Range Date Picker [#5732](https://github.com/IgniteUI/igniteui-angular/issues/5732)
-3. Keyboard Navigation Enhancement [#6755](https://github.com/IgniteUI/igniteui-angular/issues/6755)
-4. Column freezing/Pinning on the right (igx-grid) [#5879](https://github.com/IgniteUI/igniteui-angular/issues/5879)
-5. Column Selection for IgxGrid [#6578](https://github.com/IgniteUI/igniteui-angular/issues/6578)
-6. Splitter [#6639](https://github.com/IgniteUI/igniteui-angular/issues/6639)
-7. Row Pinning IgxGrid [#6640](https://github.com/IgniteUI/igniteui-angular/issues/6640)
-8. Data Analysis Directive [#1752](https://github.com/IgniteUI/igniteui-angular-samples/issues/1752)
-9. Slider does not support RTL [#5212](https://github.com/igniteui/igniteui-angular/issues/5212)
-10. Circular Progress Indicator does not support RTL [#5903](https://github.com/igniteui/igniteui-angular/issues/5903)
-11. Action Strip [#6941](https://github.com/IgniteUI/igniteui-angular/issues/6941)
-12. Theme igx-component scrollbars [#6675](https://github.com/IgniteUI/igniteui-angular/issues/6675)
-13. Use CSS variables by default [#6803](https://github.com/IgniteUI/igniteui-angular/issues/6675)
+1.  **[DONE]** Dock Manger - Public Preview [#5980](https://github.com/IgniteUI/igniteui-angular/issues/5980)
+2.  **[DONE]** Range Date Picker [#5732](https://github.com/IgniteUI/igniteui-angular/issues/5732)
+3.  **[DONE]** Keyboard Navigation Enhancement [#6755](https://github.com/IgniteUI/igniteui-angular/issues/6755)
+4.  **[DONE]** Column freezing/Pinning on the right (igx-grid) [#5879](https://github.com/IgniteUI/igniteui-angular/issues/5879)
+5.  **[DONE]** Column Selection for IgxGrid [#6578](https://github.com/IgniteUI/igniteui-angular/issues/6578)
+6.  **[DONE]** Splitter [#6639](https://github.com/IgniteUI/igniteui-angular/issues/6639)
+7.  **[DONE]** Row Pinning IgxGrid [#6640](https://github.com/IgniteUI/igniteui-angular/issues/6640)
+8.  **[DONE]** Data Analysis Directive [#1752](https://github.com/IgniteUI/igniteui-angular-samples/issues/1752)
+9.  **[DONE]** Slider does not support RTL [#5212](https://github.com/igniteui/igniteui-angular/issues/5212)
+10.  **[DONE]** Circular Progress Indicator does not support RTL [#5903](https://github.com/igniteui/igniteui-angular/issues/5903)
+11.  **[DONE]** Action Strip [#6941](https://github.com/IgniteUI/igniteui-angular/issues/6941)
+12.  **[DONE]** Theme igx-component scrollbars [#6675](https://github.com/IgniteUI/igniteui-angular/issues/6675)
+13.  **[DONE]** Use CSS variables by default [#6803](https://github.com/IgniteUI/igniteui-angular/issues/6675)
 
 ## Milestone 10 (Released February 10th, 2020)
 

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;

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);
         }

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;

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';

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',

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,

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

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>

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;
+}

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);
+        });
+    }
+}