Exposes verticalScrollContainer.igxForOf in a public method

CHANGELOG.md

@@ -81,6 +81,7 @@ For more information about the theming please read our [documentation](https://w
     - `isCellSelected` method has been deprecated. Now you can use `selected` property.
     - `rowSelectable` property has been deprecated. Now you can use `rowSelection` property to enable row selection and also you can show and hide the row selectors by setting `hideRowSelectors` property to true or false (which is the default value).
     - Removed deprecated event `OnFocusChange`
+    - `IgxGridBaseComponent` exposes a new property, `dataView` that returns the currently transformed paged/filtered/sorted/grouped data, displayed in the grid
     - **Breaking Change** `igxExcelStyleSortingTemplate` directive is renamed to `igxExcelStyleSorting`.
     - **Breaking Change** `igxExcelStyleMovingTemplate` directive is renamed to `igxExcelStyleMoving`.
     - **Breaking Change** `igxExcelStyleHidingTemplate` directive is renamed to `igxExcelStyleHiding`.

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

@@ -25,6 +25,7 @@ export interface GridType {
     pinnedColumns: any;
     summariesRowList: any;
     headerContainer: any;
+    dataView: any[];
 
     rowInEditMode: any;
     rowEditTabs: any;

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

@@ -4633,8 +4633,8 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     public hasVerticalSroll() {
         if (this._init) { return false; }
         const isScrollable = this.verticalScrollContainer ? this.verticalScrollContainer.isScrollable() : false;
-        return !!(this.calcWidth && this.verticalScrollContainer.igxForOf &&
-            this.verticalScrollContainer.igxForOf.length > 0 &&
+        return !!(this.calcWidth && this.dataView &&
+            this.dataView.length > 0 &&
             isScrollable);
     }
 
@@ -5000,6 +5000,17 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         return 0;
     }
 
+    /**
+     * Returns the currently transformed paged/filtered/sorted/grouped data, displayed in the grid.
+     * ```typescript
+     *      const dataView = this.grid.dataView;
+     * ```
+     * @memberof IgxGridComponent
+     */
+    get dataView(): any[] {
+        return this.verticalScrollContainer.igxForOf;
+    }
+
     /**
      * Get current selection state.
      * Returns an array with selected rows' IDs (primaryKey or rowData)
@@ -5218,7 +5229,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
      * If `headers` is enabled, it will use the column header (if any) instead of the column field.
      */
     getSelectedData(formatters = false, headers = false) {
-        const source = this.verticalScrollContainer.igxForOf;
+        const source = this.dataView;
         return this.extractDataFromSelection(source, formatters, headers);
     }
 
@@ -5287,12 +5298,12 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
 	 * @memberof IgxGridBaseComponent
      */
     public navigateTo(rowIndex: number, visibleColIndex = -1, cb: Function = null) {
-        if (rowIndex < 0 || rowIndex > this.verticalScrollContainer.igxForOf.length - 1
+        if (rowIndex < 0 || rowIndex > this.dataView.length - 1
             || (visibleColIndex !== -1 && this.columnList.map(col => col.visibleIndex).indexOf(visibleColIndex) === -1)) {
             return;
         }
         this.wheelHandler();
-        if (this.verticalScrollContainer.igxForOf.slice(rowIndex, rowIndex + 1).find(rec => rec.expression || rec.childGridsData)) {
+        if (this.dataView.slice(rowIndex, rowIndex + 1).find(rec => rec.expression || rec.childGridsData)) {
             visibleColIndex = -1;
         }
         if (visibleColIndex === -1 || this.navigation.isColumnFullyVisible(visibleColIndex)) {
@@ -5328,7 +5339,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         const colIndexes = callback ? columns.filter((col) => callback(col)).map(editCol => editCol.visibleIndex).sort((a, b) => a - b) :
             columns.map(editCol => editCol.visibleIndex).sort((a, b) => a - b);
         const nextCellIndex = colIndexes.find(index => index > curVisibleColIndex);
-        if (this.verticalScrollContainer.igxForOf.slice(currRowIndex, currRowIndex + 1)
+        if (this.dataView.slice(currRowIndex, currRowIndex + 1)
             .find(rec => !rec.expression && !rec.summaries && !rec.childGridsData) && nextCellIndex !== undefined) {
             return { rowIndex: currRowIndex, visibleColumnIndex: nextCellIndex };
         } else {
@@ -5360,7 +5371,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         const colIndexes = callback ? columns.filter((col) => callback(col)).map(editCol => editCol.visibleIndex).sort((a, b) => b - a) :
             columns.map(editCol => editCol.visibleIndex).sort((a, b) => b - a);
         const prevCellIndex = colIndexes.find(index => index < curVisibleColIndex);
-        if (this.verticalScrollContainer.igxForOf.slice(currRowIndex, currRowIndex + 1)
+        if (this.dataView.slice(currRowIndex, currRowIndex + 1)
             .find(rec => !rec.expression && !rec.summaries && !rec.childGridsData) && prevCellIndex !== undefined) {
             return { rowIndex: currRowIndex, visibleColumnIndex: prevCellIndex };
         } else {
@@ -5403,24 +5414,24 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     private getPrevDataRowIndex(currentRowIndex): number {
         if (currentRowIndex <= 0) { return currentRowIndex; }
 
-        const prevRow = this.verticalScrollContainer.igxForOf.slice(0, currentRowIndex).reverse()
+        const prevRow = this.dataView.slice(0, currentRowIndex).reverse()
             .find(rec => !rec.expression && !rec.summaries && !rec.childGridsData);
-        return prevRow ? this.verticalScrollContainer.igxForOf.indexOf(prevRow) : currentRowIndex;
+        return prevRow ? this.dataView.indexOf(prevRow) : currentRowIndex;
     }
 
     private getNextDataRowIndex(currentRowIndex): number {
-        if (currentRowIndex === this.verticalScrollContainer.igxForOf.length) { return currentRowIndex; }
+        if (currentRowIndex === this.dataView.length) { return currentRowIndex; }
 
-        const nextRow = this.verticalScrollContainer.igxForOf.slice(currentRowIndex + 1, this.verticalScrollContainer.igxForOf.length)
+        const nextRow = this.dataView.slice(currentRowIndex + 1, this.dataView.length)
             .find(rec => !rec.expression && !rec.summaries && !rec.childGridsData);
-        return nextRow ? this.verticalScrollContainer.igxForOf.indexOf(nextRow) : currentRowIndex;
+        return nextRow ? this.dataView.indexOf(nextRow) : currentRowIndex;
     }
 
     private isValidPosition(rowIndex, colIndex): boolean {
         const rows = this.summariesRowList.filter(s => s.index !== 0).concat(this.rowList.toArray()).length;
         const cols = this.columnList.filter(col => !col.columnGroup && col.visibleIndex >= 0).length;
         if (rows < 1 || cols < 1) { return false; }
-        if (rowIndex > -1 && rowIndex < this.verticalScrollContainer.igxForOf.length &&
+        if (rowIndex > -1 && rowIndex < this.dataView.length &&
             colIndex > - 1 && colIndex <= this.unpinnedColumns[this.unpinnedColumns.length - 1].visibleIndex) {
             return true;
         }
@@ -5617,11 +5628,11 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         if (delayScrolling) {
             this.verticalScrollContainer.onDataChanged.pipe(first()).subscribe(() => {
                 this.scrollDirective(this.verticalScrollContainer,
-                    typeof (row) === 'number' ? row : this.verticalScrollContainer.igxForOf.indexOf(row));
+                    typeof (row) === 'number' ? row : this.dataView.indexOf(row));
             });
         } else {
             this.scrollDirective(this.verticalScrollContainer,
-                typeof (row) === 'number' ? row : this.verticalScrollContainer.igxForOf.indexOf(row));
+                typeof (row) === 'number' ? row : this.dataView.indexOf(row));
         }
 
         this.scrollToHorizontally(column);

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

@@ -249,7 +249,7 @@ export class IgxGridMRLNavigationService extends IgxGridNavigationService {
             moveNext = true;
         }
         const rowIndex = moveNext ? selectedNode.row + 1 : selectedNode.row;
-        if (rowIndex > this.grid.verticalScrollContainer.igxForOf.length - 1) {
+        if (rowIndex > this.grid.dataView.length - 1) {
             // end of rows reached.
             return;
         }
@@ -469,7 +469,7 @@ export class IgxGridMRLNavigationService extends IgxGridNavigationService {
     }
 
     private _isGroupRecordAt(rowIndex: number) {
-        const record = this.grid.verticalScrollContainer.igxForOf[rowIndex];
+        const record = this.grid.dataView[rowIndex];
         return record.records && record.records.length;
     }
 

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

@@ -267,7 +267,7 @@ export class IgxGridNavigationService {
             (cells[cells.length - 1] as HTMLElement).focus();
         } else {
            this.getFocusableGrid().nativeElement.focus({ preventScroll: true });
-            this.grid.verticalScrollContainer.scrollTo(this.grid.verticalScrollContainer.igxForOf.length - 1);
+            this.grid.verticalScrollContainer.scrollTo(this.grid.dataView.length - 1);
             this.grid.verticalScrollContainer.onChunkLoad
                 .pipe(first()).subscribe(() => {
                     const cells = this.grid.nativeElement.querySelectorAll(
@@ -315,7 +315,7 @@ export class IgxGridNavigationService {
     public navigateDown(rowElement, selectedNode: ISelectionNode) {
         const currentRowIndex = selectedNode.row;
         const visibleColumnIndex = selectedNode.column;
-        if (currentRowIndex === this.grid.verticalScrollContainer.igxForOf.length - 1 ||
+        if (currentRowIndex === this.grid.dataView.length - 1 ||
             (currentRowIndex === 0 && rowElement.tagName.toLowerCase() === 'igx-grid-summary-row')) {
             // check if this is rootSummary row
             return;
@@ -389,7 +389,7 @@ export class IgxGridNavigationService {
             this.onKeydownEnd(rowIndex);
         } else {
            this.getFocusableGrid().nativeElement.focus({ preventScroll: true });
-            this.grid.verticalScrollContainer.scrollTo(this.grid.verticalScrollContainer.igxForOf.length - 1);
+            this.grid.verticalScrollContainer.scrollTo(this.grid.dataView.length - 1);
             this.grid.verticalScrollContainer.onChunkLoad
                 .pipe(first()).subscribe(() => {
                     const rows = this.getAllRows();
@@ -405,7 +405,7 @@ export class IgxGridNavigationService {
         const verticalScroll = this.grid.verticalScrollContainer.getVerticalScroll();
         if (verticalScroll.scrollHeight === 0 ||
             verticalScroll.scrollTop === verticalScroll.scrollHeight - this.grid.verticalScrollContainer.igxForContainerSize) {
-            const rowIndex = this.grid.verticalScrollContainer.igxForOf.length - 1;
+            const rowIndex = this.grid.dataView.length - 1;
             const row = this.grid.nativeElement.querySelector(`[data-rowindex="${rowIndex}"]`) as HTMLElement;
             if (row && row.tagName.toLowerCase() === 'igx-grid-groupby-row') {
                 row.focus();
@@ -414,10 +414,10 @@ export class IgxGridNavigationService {
             const isSummary = (row && row.tagName.toLowerCase() === 'igx-grid-summary-row') ? true : false;
             this.onKeydownEnd(rowIndex, isSummary);
         } else {
-            this.grid.verticalScrollContainer.scrollTo(this.grid.verticalScrollContainer.igxForOf.length - 1);
+            this.grid.verticalScrollContainer.scrollTo(this.grid.dataView.length - 1);
             this.grid.verticalScrollContainer.onChunkLoad
                 .pipe(first()).subscribe(() => {
-                    const rowIndex = this.grid.verticalScrollContainer.igxForOf.length - 1;
+                    const rowIndex = this.grid.dataView.length - 1;
                     const row = this.grid.nativeElement.querySelector(`[data-rowindex="${rowIndex}"]`) as HTMLElement;
                     if (row && row.tagName.toLowerCase() === 'igx-grid-groupby-row') {
                         row.focus();
@@ -447,7 +447,7 @@ export class IgxGridNavigationService {
             const rowEl = this.grid.rowList.find(row => row.index === rowIndex + 1) ?
                 this.grid.rowList.find(row => row.index === rowIndex + 1) :
                 this.grid.summariesRowList.find(row => row.index === rowIndex + 1);
-            if (rowIndex === this.grid.verticalScrollContainer.igxForOf.length - 1 && this.grid.rootSummariesEnabled) {
+            if (rowIndex === this.grid.dataView.length - 1 && this.grid.rootSummariesEnabled) {
                 this.onKeydownHome(0, true);
                 return;
             }

projects/igniteui-angular/src/lib/grids/grid/grid-cell-selection.spec.ts

@@ -293,7 +293,7 @@ describe('IgxGrid - Cell selection #grid', () => {
 
             GridSelectionFunctions.verifyCellSelected(firstCell);
 
-            grid.verticalScrollContainer.scrollTo(grid.verticalScrollContainer.igxForOf.length - 1);
+            grid.verticalScrollContainer.scrollTo(grid.dataView.length - 1);
             await wait(100);
             fix.detectChanges();
 
@@ -514,7 +514,7 @@ describe('IgxGrid - Cell selection #grid', () => {
             expect(selectionChangeSpy).toHaveBeenCalledTimes(0);
             expect(grid.getSelectedData()).toEqual(expectedData);
 
-            grid.verticalScrollContainer.scrollTo(grid.verticalScrollContainer.igxForOf.length - 1);
+            grid.verticalScrollContainer.scrollTo(grid.dataView.length - 1);
             await wait(100);
             fix.detectChanges();
 
@@ -538,7 +538,7 @@ describe('IgxGrid - Cell selection #grid', () => {
             expect(selectionChangeSpy).toHaveBeenCalledTimes(0);
             expect(grid.getSelectedData()).toEqual(expectedData);
 
-            grid.verticalScrollContainer.scrollTo(grid.verticalScrollContainer.igxForOf.length - 1);
+            grid.verticalScrollContainer.scrollTo(grid.dataView.length - 1);
             await wait(100);
             fix.detectChanges();
 
@@ -1040,7 +1040,7 @@ describe('IgxGrid - Cell selection #grid', () => {
             GridSelectionFunctions.verifyCellsRegionSelected(grid, 0, 0, 0, 0);
             GridSelectionFunctions.verifySelectedRange(grid, 0, 0, 0, 0);
 
-            grid.verticalScrollContainer.scrollTo(grid.verticalScrollContainer.igxForOf.length - 1);
+            grid.verticalScrollContainer.scrollTo(grid.dataView.length - 1);
             await wait(100);
             fix.detectChanges();
 

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

@@ -981,7 +981,7 @@ describe('IgxGrid - Keyboard navigation #grid', () => {
                 });
                 fix.detectChanges();
 
-                grid.verticalScrollContainer.scrollTo(grid.verticalScrollContainer.igxForOf.length - 1);
+                grid.verticalScrollContainer.scrollTo(grid.dataView.length - 1);
                 await wait(100);
                 fix.detectChanges();
 
@@ -1009,7 +1009,7 @@ describe('IgxGrid - Keyboard navigation #grid', () => {
                 });
                 fix.detectChanges();
 
-                grid.verticalScrollContainer.scrollTo(grid.verticalScrollContainer.igxForOf.length - 1);
+                grid.verticalScrollContainer.scrollTo(grid.dataView.length - 1);
                 await wait(100);
                 fix.detectChanges();
 

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

@@ -1386,7 +1386,7 @@ describe('IgxGrid - Summaries #grid', () => {
             });
             fix.detectChanges();
 
-            grid.verticalScrollContainer.scrollTo(grid.verticalScrollContainer.igxForOf.length - 1);
+            grid.verticalScrollContainer.scrollTo(grid.dataView.length - 1);
             await wait(100);
             fix.detectChanges();
 
@@ -1452,7 +1452,7 @@ describe('IgxGrid - Summaries #grid', () => {
                 ['Count', 'Earliest', 'Latest'], ['9', 'Dec 18, 2007', 'Dec 9, 2017']);
             GridSummaryFunctions.verifyColumnSummaries(summaryRow, 4, ['Min', 'Max'], ['19', '50']);
 
-            grid.verticalScrollContainer.scrollTo(grid.verticalScrollContainer.igxForOf.length - 1);
+            grid.verticalScrollContainer.scrollTo(grid.dataView.length - 1);
             await wait(50);
             fix.detectChanges();
 
@@ -1482,7 +1482,7 @@ describe('IgxGrid - Summaries #grid', () => {
             GridSummaryFunctions.verifyColumnSummariesBySummaryRowIndex(fix, 0, 4, ['Min', 'Max'], ['19', '50']);
             GridSummaryFunctions.verifyColumnSummariesBySummaryRowIndex(fix, 0, 5, ['Count'], ['9']);
 
-            grid.verticalScrollContainer.scrollTo(grid.verticalScrollContainer.igxForOf.length - 1);
+            grid.verticalScrollContainer.scrollTo(grid.dataView.length - 1);
             await wait(50);
             fix.detectChanges();
             GridSummaryFunctions.verifyColumnSummariesBySummaryRowIndex(fix, 18, 5, ['Count'], ['1']);
@@ -1545,7 +1545,7 @@ describe('IgxGrid - Summaries #grid', () => {
             GridSummaryFunctions.verifyColumnSummariesBySummaryRowIndex(fix, 0, 2, ['Count'], ['8']);
             GridSummaryFunctions.verifyColumnSummariesBySummaryRowIndex(fix, 0, 4, ['Min', 'Max'], ['19', '50']);
 
-            grid.verticalScrollContainer.scrollTo(grid.verticalScrollContainer.igxForOf.length - 1);
+            grid.verticalScrollContainer.scrollTo(grid.dataView.length - 1);
             await wait(50);
             fix.detectChanges();
 
@@ -1614,7 +1614,7 @@ describe('IgxGrid - Summaries #grid', () => {
             GridSummaryFunctions.verifyColumnSummariesBySummaryRowIndex(fix, 4, 2, ['Count'], ['3']);
             GridSummaryFunctions.verifyColumnSummariesBySummaryRowIndex(fix, 4, 4, ['Min', 'Max'], ['19', '50']);
 
-            grid.verticalScrollContainer.scrollTo(grid.verticalScrollContainer.igxForOf.length - 1);
+            grid.verticalScrollContainer.scrollTo(grid.dataView.length - 1);
             await wait(50);
             fix.detectChanges();
 
@@ -1754,7 +1754,7 @@ describe('IgxGrid - Summaries #grid', () => {
             expect(groupRows[0].groupRow.value).toEqual(-1);
             expect(groupRows[1].groupRow.value).toEqual(19);
 
-            grid.verticalScrollContainer.scrollTo(grid.verticalScrollContainer.igxForOf.length - 1);
+            grid.verticalScrollContainer.scrollTo(grid.dataView.length - 1);
             await wait(50);
             fix.detectChanges();
 

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

@@ -982,7 +982,7 @@ export class IgxGridComponent extends IgxGridBaseComponent implements IGridDataB
 
             };
 
-            this.verticalScrollContainer.igxForOf.forEach(process);
+            this.dataView.forEach(process);
             return this.extractDataFromSelection(source, formatters, headers);
         } else {
             return super.getSelectedData(formatters, headers);

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

@@ -905,10 +905,10 @@ describe('IgxGrid - GroupBy #grid', () => {
 
         // verify virtualization states - should be in last chunk
         const virtState = grid.verticalScrollContainer.state;
-        expect(virtState.startIndex).toBe(grid.verticalScrollContainer.igxForOf.length - virtState.chunkSize);
+        expect(virtState.startIndex).toBe(grid.dataView.length - virtState.chunkSize);
 
         // verify last row is visible at bottom
-        const lastRow = grid.getRowByIndex(grid.verticalScrollContainer.igxForOf.length - 1);
+        const lastRow = grid.getRowByIndex(grid.dataView.length - 1);
         expect(lastRow.nativeElement.getBoundingClientRect().bottom).toBe(grid.tbody.nativeElement.getBoundingClientRect().bottom);
 
     });

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

@@ -275,7 +275,7 @@ export class IgxGridGroupByRowComponent {
         if (shift) {
             this.grid.navigation.performShiftTabKey(this.nativeElement, activeNode);
         } else {
-            if (this.index === this.grid.verticalScrollContainer.igxForOf.length - 1 && this.grid.rootSummariesEnabled) {
+            if (this.index === this.grid.dataView.length - 1 && this.grid.rootSummariesEnabled) {
                 this.grid.navigation.onKeydownHome(0, true);
             } else {
                 const orderedColumns = this.grid.navigation.gridOrderedColumns;