KB navigation in grid with remote virtualization (#7558)

* fix(IgxGrid): allow kb navigation with remote virtualization #7448
* fix(Grid): go to the last row on ctrl+arrowDown in grid with remote virtualization #7448
* fix(*): update selection correctly when navigate in grid remote virt #7448

Co-authored-by: Nadia Robakova <[email protected]>
Co-authored-by: Radoslav Karaivanov <[email protected]>

Author: 3 people

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

@@ -5721,8 +5721,9 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      * ```
      */
     public navigateTo(rowIndex: number, visibleColIndex = -1, cb: Function = null) {
-        if (rowIndex < 0 || rowIndex > this.dataView.length - 1
-            || (visibleColIndex !== -1 && this.columnList.map(col => col.visibleIndex).indexOf(visibleColIndex) === -1)) {
+        const totalItems = (this as any).totalItemCount ?? this.dataView.length - 1;
+        if (rowIndex < 0 || rowIndex > totalItems || (visibleColIndex !== -1
+            && this.columnList.map(col => col.visibleIndex).indexOf(visibleColIndex) === -1)) {
             return;
         }
         if (this.dataView.slice(rowIndex, rowIndex + 1).find(rec => rec.expression || rec.childGridsData)) {
@@ -5820,9 +5821,24 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
 
     private executeCallback(rowIndex, visibleColIndex = -1, cb: Function = null) {
         if (!cb) { return; }
+        let row = this.summariesRowList.filter(s => s.index !== 0).concat(this.rowList.toArray()).find(r => r.index === rowIndex);
+        if (!row) {
+            if ((this as any).totalItemCount) {
+                this.verticalScrollContainer.onDataChanged.pipe(first()).subscribe(() => {
+                    this.cdr.detectChanges();
+                    row = this.summariesRowList.filter(s => s.index !== 0).concat(this.rowList.toArray()).find(r => r.index === rowIndex);
+                    const cbArgs = this.getNavigationArguments(row, visibleColIndex);
+                    cb(cbArgs);
+                });
+            }
+            return;
+        }
+        const args = this.getNavigationArguments(row, visibleColIndex);
+        cb(args);
+    }
+
+    private getNavigationArguments(row, visibleColIndex) {
         let targetType, target;
-        const row = this.summariesRowList.filter(s => s.index !== 0).concat(this.rowList.toArray()).find(r => r.index === rowIndex);
-        if (!row) { return; }
         switch (row.nativeElement.tagName.toLowerCase()) {
             case 'igx-grid-groupby-row':
                 targetType = GridKeydownTargetType.groupRow;
@@ -5842,8 +5858,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
                 target = visibleColIndex !== -1 ? row.cells.find(c => c.visibleColumnIndex === visibleColIndex) : row.cells.first;
                 break;
         }
-        const args = { targetType: targetType, target: target };
-        cb(args);
+        return { targetType: targetType, target: target };
     }
 
     private getNextDataRowIndex(currentRowIndex, previous = false): number {

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

@@ -359,6 +359,7 @@ export class IgxGridNavigationService {
     }
 
     protected findLastDataRowIndex(): number {
+        if ((this.grid as any).totalItemCount) { return (this.grid as any).totalItemCount - 1;  }
         let i = this.grid.dataView.length;
         while (i--) {
             if (this.isDataRow(i)) {
@@ -376,7 +377,8 @@ export class IgxGridNavigationService {
     }
 
     protected isValidPosition(rowIndex: number, colIndex: number): boolean {
-        if (rowIndex < 0 || colIndex < 0 || this.grid.dataView.length - 1 < rowIndex || this.lastColumnIndex < colIndex) {
+        const length = (this.grid as any).totalItemCount ?? this.grid.dataView.length;
+        if (rowIndex < 0 || colIndex < 0 || length - 1 < rowIndex || this.lastColumnIndex < colIndex) {
             return false;
         }
         return this.activeNode.column !== colIndex && !this.isDataRow(rowIndex, true) ? false : true;

src/app/grid-remote-virtualization-with-scroll/grid-remote-virtualization-scroll.sample.ts

@@ -1,7 +1,7 @@
 import { Component, ViewChild, ChangeDetectorRef, OnInit, AfterViewInit } from '@angular/core';
 import { IgxGridComponent } from 'igniteui-angular';
 import { debounceTime } from 'rxjs/operators';
-import { RemoteVirtService } from '../shared/remote.service - Copy';
+import { RemoteVirtService } from '../shared/remoteProductsData.service';
 
 @Component({
     selector: 'app-grid-remote-virtualization-scroll',