fix(grid): fix getCellByColumn with virtualization #10172

CHANGELOG.md

@@ -2,6 +2,18 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 13.0.0
+
+### New Features
+- `IgxCsvExporterService`, `IgxExcelExporterService`
+    - Exporter services are no longer required to be provided in the application since they are now injected on a root level. 
+
+## 12.2.1
+
+### New Features
+- `igxGrid`, `igxHierarchicalGrid`, `igxTreeGrid`
+    - new `rowPinned` event is emitted after a row is pinned/unpinned and grid has already refreshed its state to represent the pinned/unpinned rows in the DOM.
+
 ## 12.2.0
 
 ### New Features

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

@@ -54,7 +54,6 @@ import {
     Action,
 } from '../services/public_api';
 import { GridBaseAPIService } from './api.service';
-import { IgxGridCellComponent } from './cell.component';
 import { ISummaryExpression } from './summaries/grid-summary';
 import { RowEditPositionStrategy, IPinningConfig } from './grid.common';
 import { IgxGridToolbarComponent } from './toolbar/grid-toolbar.component';
@@ -941,6 +940,17 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     @Output()
     public rowPinning = new EventEmitter<IPinRowEventArgs>();
 
+    /**
+     * Emitted when the pinned state of a row is changed.
+     *
+     * @example
+     * ```html
+     * <igx-grid [data]="employeeData" (rowPinned)="rowPin($event)" [autoGenerate]="true"></igx-grid>
+     * ```
+     */
+    @Output()
+    public rowPinned = new EventEmitter<IPinRowEventArgs>();
+
     /**
      * Emmited when the active node is changed.
      *
@@ -4826,6 +4836,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         if (this._pinnedRecordIDs.indexOf(rowID) !== -1) {
             return false;
         }
+
         const eventArgs: IPinRowEventArgs = {
             insertAtIndex: index,
             isPinned: true,
@@ -4840,8 +4851,10 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         this._pinnedRecordIDs.splice(insertIndex, 0, rowID);
         this.pipeTrigger++;
         if (this.gridAPI.grid) {
-            this.notifyChanges();
+            this.cdr.detectChanges();
+            this.rowPinned.emit(eventArgs);
         }
+
         return true;
     }
 
@@ -4867,12 +4880,15 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
             row
         };
         this.rowPinning.emit(eventArgs);
+
         this.crudService.endEdit(false);
         this._pinnedRecordIDs.splice(index, 1);
         this.pipeTrigger++;
         if (this.gridAPI.grid) {
             this.cdr.detectChanges();
+            this.rowPinned.emit(eventArgs);
         }
+
         return true;
     }
 

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

@@ -251,10 +251,15 @@ export class IgxGridNavigationService {
     }
 
     public isDataRow(rowIndex: number, includeSummary = false) {
+        let curRow: any;
         if (rowIndex < 0 || rowIndex > this.grid.dataView.length - 1) {
-            return false;
+            curRow = this.grid.dataView[rowIndex - this.grid.virtualizationState.startIndex];
+            if (!curRow){
+                return false;
+            }
+        } else {
+            curRow = this.grid.dataView[rowIndex];
         }
-        const curRow = this.grid.dataView[rowIndex];
         return curRow && !this.grid.isGroupByRecord(curRow) && !this.grid.isDetailRecord(curRow)
             && !curRow.childGridsData && (includeSummary || !curRow.summaries);
     }

projects/igniteui-angular/src/lib/grids/grid-public-row.ts

@@ -211,7 +211,7 @@ abstract class BaseRow implements RowType {
      * ```
      */
     public pin(): boolean {
-        return this.grid.pinRow(this.key);
+        return this.grid.pinRow(this.key, this.index);
     }
 
     /**

projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts

@@ -155,28 +155,51 @@ describe('Row Pinning #grid', () => {
             let row = grid.getRowByIndex(0);
             const rowID = row.key;
             row.pin();
-            fix.detectChanges();
 
             // Check pinned state with getRowByIndex after pin action
             expect(row.pinned).toBe(true);
 
             expect(grid.rowPinning.emit).toHaveBeenCalledTimes(1);
             expect(grid.rowPinning.emit).toHaveBeenCalledWith({
                 rowID,
-                insertAtIndex: undefined,
+                insertAtIndex: 0,
                 isPinned: true,
                 row
             });
 
             row = grid.getRowByIndex(0);
             row.unpin();
-            fix.detectChanges();
             // Check pinned state with getRowByIndex after unpin action
             expect(row.pinned).toBe(false);
 
             expect(grid.rowPinning.emit).toHaveBeenCalledTimes(2);
         });
 
+        it('should emit rowPinned on pin/unpin.', () => {
+            spyOn(grid.rowPinned, 'emit').and.callThrough();
+
+            const row = grid.getRowByIndex(0);
+            const rowID = row.key;
+            row.pin();
+
+            // Check pinned state with getRowByIndex after pin action
+            expect(row.pinned).toBe(true);
+
+            expect(grid.rowPinned.emit).toHaveBeenCalledTimes(1);
+            expect(grid.rowPinned.emit).toHaveBeenCalledWith({
+                rowID,
+                insertAtIndex: 0,
+                isPinned: true,
+                row
+            });
+
+            row.unpin();
+            // Check pinned state with getRowByIndex after unpin action
+            expect(row.pinned).toBe(false);
+
+            expect(grid.rowPinned.emit).toHaveBeenCalledTimes(2);
+        });
+
         it('should pin/unpin via grid API methods.', () => {
             // pin 2nd row
             grid.pinRow(fix.componentInstance.data[1]);
@@ -223,7 +246,6 @@ describe('Row Pinning #grid', () => {
             // unpin
             row = grid.gridAPI.get_row_by_index(0);
             row.unpin();
-            fix.detectChanges();
 
             expect(grid.pinnedRows.length).toBe(0);
             pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
@@ -429,8 +451,7 @@ describe('Row Pinning #grid', () => {
 
         it('should apply sorting to both pinned and unpinned rows.', () => {
             grid.gridAPI.get_row_by_index(1).pin();
-            grid.gridAPI.get_row_by_index(5).pin();
-            fix.detectChanges();
+            grid.gridAPI.get_row_by_index(6).pin();
 
             expect(grid.gridAPI.get_row_by_index(0).rowID).toBe(fix.componentInstance.data[1]);
             expect(grid.gridAPI.get_row_by_index(1).rowID).toBe(fix.componentInstance.data[5]);
@@ -573,7 +594,6 @@ describe('Row Pinning #grid', () => {
         it('should correctly apply paging state for grid and paginator when there are pinned rows.', () => {
             // pin the first row
             grid.gridAPI.get_row_by_index(0).pin();
-            fix.detectChanges();
 
             expect(grid.rowList.length).toEqual(6);
             expect(grid.perPage).toEqual(5);
@@ -583,7 +603,6 @@ describe('Row Pinning #grid', () => {
 
             // pin the second row
             grid.gridAPI.get_row_by_index(2).pin();
-            fix.detectChanges();
 
             expect(grid.rowList.length).toEqual(7);
             expect(grid.perPage).toEqual(5);
@@ -594,19 +613,17 @@ describe('Row Pinning #grid', () => {
 
         it('should have the correct records shown for pages with pinned rows', () => {
             grid.gridAPI.get_row_by_index(0).pin();
-            grid.gridAPI.get_row_by_index(1).pin();
-            fix.detectChanges();
 
             let rows = grid.rowList.toArray();
 
-            [1, 2, 1, 2, 3, 4, 5].forEach((x, index) => expect(rows[index].cells.first.value).toEqual(x));
+            [1, 1, 2, 3, 4, 5].forEach((x, index) => expect(rows[index].cells.first.value).toEqual(x));
 
             grid.paginate(2);
             fix.detectChanges();
 
             rows = grid.rowList.toArray();
 
-            [1, 2, 11, 12].forEach((x, index) => expect(rows[index].cells.first.value).toEqual(x));
+            [1, 11, 12].forEach((x, index) => expect(rows[index].cells.first.value).toEqual(x));
         });
     });
 
@@ -805,10 +822,8 @@ describe('Row Pinning #grid', () => {
             // Pin/Unpin with the methods
             firstRow.unpin();
             expect(firstRow.pinned).toBe(false);
-            fix.detectChanges();
             firstRow.pin();
             expect(firstRow.pinned).toBe(true);
-            fix.detectChanges();
 
             // Check again pinned row presence
             pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
@@ -855,7 +870,6 @@ describe('Row Pinning #grid', () => {
         it('should hide columns in pinned and unpinned area', () => {
             // pin 2nd data row
             grid.pinRow(fix.componentInstance.data[1]);
-            fix.detectChanges();
             const hiddenCol = grid.columns[1];
             hiddenCol.hidden = true;
             fix.detectChanges();
@@ -892,14 +906,9 @@ describe('Row Pinning #grid', () => {
 
         it('should keep the scrollbar sizes correct when partially filtering out pinned records', () => {
             grid.gridAPI.get_row_by_index(1).pin();
-            fix.detectChanges();
             grid.gridAPI.get_row_by_index(3).pin();
-            fix.detectChanges();
             grid.gridAPI.get_row_by_index(5).pin();
-            fix.detectChanges();
             grid.gridAPI.get_row_by_index(7).pin();
-            fix.detectChanges();
-
             fix.detectChanges();
             // 4 records pinned + 2px border
             expect(grid.pinnedRowHeight).toBe(4 * grid.renderedRowHeight + 2);
@@ -929,9 +938,7 @@ describe('Row Pinning #grid', () => {
         it('should enter edit mode for the next editable cell when tabbing.', () => {
             const  gridContent = GridFunctions.getGridContent(fix);
             grid.gridAPI.get_row_by_index(0).pin();
-            fix.detectChanges();
             grid.gridAPI.get_row_by_index(3).pin();
-            fix.detectChanges();
 
             const firstEditable = grid.gridAPI.get_cell_by_index(0, 'CompanyName');
             const secondEditable = grid.gridAPI.get_cell_by_index(1, 'CompanyName');
@@ -967,9 +974,7 @@ describe('Row Pinning #grid', () => {
         it('should enter edit mode for the previous editable cell when shift+tabbing.', () => {
             const  gridContent = GridFunctions.getGridContent(fix);
             grid.gridAPI.get_row_by_index(0).pin();
-            fix.detectChanges();
             grid.gridAPI.get_row_by_index(3).pin();
-            fix.detectChanges();
 
             const firstEditable = grid.gridAPI.get_cell_by_index(0, 'CompanyName');
             const secondEditable = grid.gridAPI.get_cell_by_index(1, 'CompanyName');
@@ -1017,7 +1022,6 @@ describe('Row Pinning #grid', () => {
 
         it('should navigate to bottom from top pinned row using Ctrl+ArrowDown', async () => {
             grid.gridAPI.get_row_by_index(5).pin();
-            fix.detectChanges();
 
             const firstRowCell = grid.gridAPI.get_row_by_index(0).cells.toArray()[1];
             UIInteractions.simulateClickAndSelectEvent(firstRowCell);
@@ -1039,7 +1043,6 @@ describe('Row Pinning #grid', () => {
 
         it('should navigate and scroll to first unpinned row from top pinned row using ArrowDown', async () => {
             grid.gridAPI.get_row_by_index(5).pin();
-            fix.detectChanges();
 
             grid.navigateTo(10);
             await wait(DEBOUNCE_TIME);
@@ -1064,7 +1067,6 @@ describe('Row Pinning #grid', () => {
 
         it('should navigate to top pinned row from bottom unpinned row without scrolling using Ctrl+ArrowUp', async () => {
             grid.gridAPI.get_row_by_index(5).pin();
-            fix.detectChanges();
 
             grid.navigateTo(27);
             await wait(DEBOUNCE_TIME);
@@ -1095,7 +1097,6 @@ describe('Row Pinning #grid', () => {
         it('should navigate to top pinned row from first unpinned row using ArrowUp', async () => {
             grid.gridAPI.get_row_by_index(5).pin();
             grid.gridAPI.get_row_by_index(1).pin();
-            fix.detectChanges();
 
             const thirdRowCell = grid.gridAPI.get_row_by_index(2).cells.toArray()[1];
             UIInteractions.simulateClickAndSelectEvent(thirdRowCell);
@@ -1118,7 +1119,6 @@ describe('Row Pinning #grid', () => {
         it('should navigate and scroll to top from bottom pinned row using Ctrl+ArrowUp', async () => {
             fix.componentInstance.pinningConfig = { columns: ColumnPinningPosition.Start, rows: RowPinningPosition.Bottom };
             grid.gridAPI.get_row_by_index(5).pin();
-            fix.detectChanges();
 
             grid.navigateTo(26);
             await wait(DEBOUNCE_TIME);
@@ -1171,7 +1171,6 @@ describe('Row Pinning #grid', () => {
         it('should navigate to bottom pinned row from top unpinned row without scrolling using Ctrl+ArrowDown', async () => {
             fix.componentInstance.pinningConfig = { columns: ColumnPinningPosition.Start, rows: RowPinningPosition.Bottom };
             grid.gridAPI.get_row_by_index(5).pin();
-            fix.detectChanges();
 
             expect(grid.verticalScrollContainer.getScroll().scrollTop).toEqual(0);
 
@@ -1199,7 +1198,6 @@ describe('Row Pinning #grid', () => {
             grid.gridAPI.get_row_by_index(5).pin();
             grid.gridAPI.get_row_by_index(1).pin();
             await wait(DEBOUNCE_TIME);
-            fix.detectChanges();
 
             grid.navigateTo(26);
             await wait(DEBOUNCE_TIME);
@@ -1228,8 +1226,6 @@ describe('Row Pinning #grid', () => {
         it('should navigate down from pinned to unpinned row when there are filtered out pinned rows', async () => {
             grid.gridAPI.get_row_by_index(5).pin();
             grid.gridAPI.get_row_by_index(1).pin();
-            fix.detectChanges();
-
             grid.filter('ID', 'B', IgxStringFilteringOperand.instance().condition('contains'), false);
             fix.detectChanges();
 

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

@@ -1029,7 +1029,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
      * @param index
      */
     public getRowByIndex(index: number): RowType {
-        if (index < 0 || index >= this.dataView.length) {
+        if (index < 0) {
             return undefined;
         }
         return this.createRow(index);
@@ -1140,8 +1140,16 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
      */
     public createRow(index: number, data?: any): RowType {
         let row: RowType;
+        let rec: any;
 
-        const rec: any = data ?? this.dataView[index];
+        if (index < 0 || index >= this.dataView.length) {
+            if (index >= this.dataView.length){
+                const virtIndex = index - this.gridAPI.grid.virtualizationState.startIndex;
+                rec = data ?? this.dataView[virtIndex];
+            }
+        }else {
+            rec = data ?? this.dataView[index];
+        }
 
         if (rec && this.isGroupByRecord(rec)) {
             row = new IgxGroupByRow(this, index, rec);