Merge branch 'master' into pbozhinov/fix-6359

Author: ChronosSF

ROADMAP.md

@@ -6,21 +6,20 @@
 1. Dock Manger [#5980](https://github.com/IgniteUI/igniteui-angular/issues/5980)
 2. Theming service for Ignite UI for Angular [#5999](https://github.com/IgniteUI/igniteui-angular/issues/5999)
 3. Range Date Picker [#5732](https://github.com/IgniteUI/igniteui-angular/issues/5732)
-4. igxGrid overlay components exposed for instantiation in arbitrary container [#5878](https://github.com/IgniteUI/igniteui-angular/issues/5878)
+4. **[DONE]** igxGrid overlay components exposed for instantiation in arbitrary container [#5878](https://github.com/IgniteUI/igniteui-angular/issues/5878)
 5. RTL Support across Ignite UI for Angular components [#5958](https://github.com/IgniteUI/igniteui-angular/issues/5958)
-6. Carousel slide animations/transitions [#4268](https://github.com/IgniteUI/igniteui-angular/issues/4268)
-7. Access all data when calculating summary per column [#5754](https://github.com/IgniteUI/igniteui-angular/issues/5754)
+6. **[DONE]** Carousel slide animations/transitions [#4268](https://github.com/IgniteUI/igniteui-angular/issues/4268)
+7. **[DONE]** Access all data when calculating summary per column [#5754](https://github.com/IgniteUI/igniteui-angular/issues/5754)
 8. Angular 9 support [#5998](https://github.com/IgniteUI/igniteui-angular/issues/5998)
-9. Allow master-detail style visualization with igxHierarchicalGrid [#5880](https://github.com/IgniteUI/igniteui-angular/issues/5880)
-10. Collapsible column groups (column expansion state templates) [#3343](https://github.com/IgniteUI/igniteui-angular/issues/3343) 
+9. **[DONE]** Allow master-detail style visualization with igxHierarchicalGrid [#5880](https://github.com/IgniteUI/igniteui-angular/issues/5880)
+10. **[DONE]** Collapsible column groups (column expansion state templates) [#3343](https://github.com/IgniteUI/igniteui-angular/issues/3343) 
 
 ## Going down the road
 
 1. Row-pinning
-2. Column Groups expand/collapse, with column grouping templates
-3. Visual Cell merging
-4. Splitter
-5. PDF Integration
+2. Visual Cell merging
+3. Splitter
+4. PDF Integration
 
 # Previous Milestones 
 

projects/igniteui-angular/src/lib/grids/common/grid.interface.ts

@@ -65,4 +65,5 @@ export interface GridType extends IGridDataBindable {
     clearSort(name?: string): void;
     isColumnGrouped(fieldName: string): boolean;
     isDetailRecord(rec: any): boolean;
+    isGroupByRecord(rec: any): boolean;
 }

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

@@ -2893,6 +2893,14 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         return false;
     }
 
+    /**
+    * @hidden
+    * @internal
+    */
+    public isGroupByRecord(rec) {
+        return false;
+    }
+
     /**
     * @hidden
     * @internal

projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts

@@ -250,15 +250,17 @@ export class IgxGridNavigationService {
     }
 
     public navigateTop(visibleColumnIndex) {
+        const targetIndex = this.findFirstDataRowIndex();
         const verticalScroll = this.grid.verticalScrollContainer.getScroll();
         const cellSelector = this.getCellSelector(visibleColumnIndex);
-        if (verticalScroll.scrollTop === 0) {
+        const targetScr = this.grid.verticalScrollContainer.getScrollForIndex(targetIndex, false);
+        if (targetScr >= verticalScroll.scrollTop) {
             const cells = this.grid.nativeElement.querySelectorAll(
                 `${cellSelector}[data-visibleIndex="${visibleColumnIndex}"]`);
             (cells[0] as HTMLElement).focus();
         } else {
            this.getFocusableGrid().nativeElement.focus({ preventScroll: true });
-            this.grid.verticalScrollContainer.scrollTo(0);
+            this.grid.verticalScrollContainer.scrollTo(targetIndex !== -1 ? targetIndex : 0);
             this.grid.verticalScrollContainer.onChunkLoad
                 .pipe(first()).subscribe(() => {
                     const cells = this.grid.nativeElement.querySelectorAll(
@@ -268,17 +270,34 @@ export class IgxGridNavigationService {
         }
     }
 
+    private findFirstDataRowIndex() {
+        const dv = this.grid.dataView;
+        return dv.findIndex(rec => !this.grid.isGroupByRecord(rec) && !this.grid.isDetailRecord(rec));
+    }
+
+    private findLastDataRowIndex() {
+        let i = this.grid.dataView.length;
+        while (i--) {
+            const rec = this.grid.dataView[i];
+            if (!this.grid.isGroupByRecord(rec) && !this.grid.isDetailRecord(rec)) {
+                 return i;
+            }
+        }
+    }
+
     public navigateBottom(visibleColumnIndex) {
+        const targetIndex = this.findLastDataRowIndex();
+        const targetScr = this.grid.verticalScrollContainer.getScrollForIndex(targetIndex, true);
         const verticalScroll = this.grid.verticalScrollContainer.getScroll();
         const cellSelector = this.getCellSelector(visibleColumnIndex);
         if (verticalScroll.scrollHeight === 0 ||
-            verticalScroll.scrollTop === verticalScroll.scrollHeight - this.grid.verticalScrollContainer.igxForContainerSize) {
+            verticalScroll.scrollTop === targetScr) {
             const cells = this.grid.nativeElement.querySelectorAll(
                 `${cellSelector}[data-visibleIndex="${visibleColumnIndex}"]`);
             (cells[cells.length - 1] as HTMLElement).focus();
         } else {
            this.getFocusableGrid().nativeElement.focus({ preventScroll: true });
-            this.grid.verticalScrollContainer.scrollTo(this.grid.dataView.length - 1);
+            this.grid.verticalScrollContainer.scrollTo(targetIndex !== -1 ? targetIndex : this.grid.dataView.length - 1);
             this.grid.verticalScrollContainer.onChunkLoad
                 .pipe(first()).subscribe(() => {
                     const cells = this.grid.nativeElement.querySelectorAll(
@@ -366,12 +385,14 @@ export class IgxGridNavigationService {
     }
 
     public goToFirstCell() {
+        const targetIndex = this.findFirstDataRowIndex();
+        const targetScr = this.grid.verticalScrollContainer.getScrollForIndex(targetIndex, false);
         const verticalScroll = this.grid.verticalScrollContainer.getScroll();
-        if (verticalScroll.scrollTop === 0) {
+        if (verticalScroll.scrollTop === targetScr) {
             this.onKeydownHome(this.grid.dataRowList.first.index);
         } else {
             this.getFocusableGrid().nativeElement.focus({ preventScroll: true });
-            this.grid.verticalScrollContainer.scrollTo(0);
+            this.grid.verticalScrollContainer.scrollTo(targetIndex !== -1 ? targetIndex : 0);
             this.grid.verticalScrollContainer.onChunkLoad
                 .pipe(first()).subscribe(() => {
                     this.onKeydownHome(this.grid.dataRowList.first.index);
@@ -380,15 +401,17 @@ export class IgxGridNavigationService {
     }
 
     public goToLastCell() {
+        const targetIndex = this.findLastDataRowIndex();
+        const targetScr = this.grid.verticalScrollContainer.getScrollForIndex(targetIndex, true);
         const verticalScroll = this.grid.verticalScrollContainer.getScroll();
         if (verticalScroll.scrollHeight === 0 ||
-            verticalScroll.scrollTop === verticalScroll.scrollHeight - this.grid.verticalScrollContainer.igxForContainerSize) {
+            verticalScroll.scrollTop === targetScr) {
             const rows = this.getAllRows();
             const rowIndex = parseInt(rows[rows.length - 1].getAttribute('data-rowIndex'), 10);
             this.onKeydownEnd(rowIndex);
         } else {
            this.getFocusableGrid().nativeElement.focus({ preventScroll: true });
-            this.grid.verticalScrollContainer.scrollTo(this.grid.dataView.length - 1);
+            this.grid.verticalScrollContainer.scrollTo(targetIndex !== -1 ? targetIndex : this.grid.dataView.length - 1);
             this.grid.verticalScrollContainer.onChunkLoad
                 .pipe(first()).subscribe(() => {
                     const rows = this.getAllRows();

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

@@ -90,7 +90,6 @@ export class IgxHierarchicalGridCellComponent extends IgxGridCellComponent imple
      * @hidden
      * @internal
      */
-    @HostListener('keydown', ['$event'])
     dispatchEvent(event: KeyboardEvent) {
         const key = event.key.toLowerCase();
         if (event.altKey && !this.row.added) {