Skip to content

Commit b6fbbc4

Browse files
kdinevkdinev
authored
Merge pull request #5961 from IgniteUI/pbozhinov/feat-5069
Exposes verticalScrollContainer.igxForOf in a public method
2 parents 8d2a638 + e2a6b27 commit b6fbbc4

20 files changed

+96
-83
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@ For more information about the theming please read our [documentation](https://w
8181
- `isCellSelected` method has been deprecated. Now you can use `selected` property.
8282
- `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).
8383
- Removed deprecated event `OnFocusChange`
84+
- `IgxGridBaseComponent` exposes a new property, `dataView` that returns the currently transformed paged/filtered/sorted/grouped data, displayed in the grid
8485
- **Breaking Change** `igxExcelStyleSortingTemplate` directive is renamed to `igxExcelStyleSorting`.
8586
- **Breaking Change** `igxExcelStyleMovingTemplate` directive is renamed to `igxExcelStyleMoving`.
8687
- **Breaking Change** `igxExcelStyleHidingTemplate` directive is renamed to `igxExcelStyleHiding`.

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ export interface GridType {
2525
pinnedColumns: any;
2626
summariesRowList: any;
2727
headerContainer: any;
28+
dataView: any[];
2829

2930
rowInEditMode: any;
3031
rowEditTabs: any;

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

Lines changed: 26 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4633,8 +4633,8 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
46334633
public hasVerticalSroll() {
46344634
if (this._init) { return false; }
46354635
const isScrollable = this.verticalScrollContainer ? this.verticalScrollContainer.isScrollable() : false;
4636-
return !!(this.calcWidth && this.verticalScrollContainer.igxForOf &&
4637-
this.verticalScrollContainer.igxForOf.length > 0 &&
4636+
return !!(this.calcWidth && this.dataView &&
4637+
this.dataView.length > 0 &&
46384638
isScrollable);
46394639
}
46404640

@@ -5000,6 +5000,17 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
50005000
return 0;
50015001
}
50025002

5003+
/**
5004+
* Returns the currently transformed paged/filtered/sorted/grouped data, displayed in the grid.
5005+
* ```typescript
5006+
* const dataView = this.grid.dataView;
5007+
* ```
5008+
* @memberof IgxGridComponent
5009+
*/
5010+
get dataView(): any[] {
5011+
return this.verticalScrollContainer.igxForOf;
5012+
}
5013+
50035014
/**
50045015
* Get current selection state.
50055016
* Returns an array with selected rows' IDs (primaryKey or rowData)
@@ -5218,7 +5229,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
52185229
* If `headers` is enabled, it will use the column header (if any) instead of the column field.
52195230
*/
52205231
getSelectedData(formatters = false, headers = false) {
5221-
const source = this.verticalScrollContainer.igxForOf;
5232+
const source = this.dataView;
52225233
return this.extractDataFromSelection(source, formatters, headers);
52235234
}
52245235

@@ -5287,12 +5298,12 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
52875298
* @memberof IgxGridBaseComponent
52885299
*/
52895300
public navigateTo(rowIndex: number, visibleColIndex = -1, cb: Function = null) {
5290-
if (rowIndex < 0 || rowIndex > this.verticalScrollContainer.igxForOf.length - 1
5301+
if (rowIndex < 0 || rowIndex > this.dataView.length - 1
52915302
|| (visibleColIndex !== -1 && this.columnList.map(col => col.visibleIndex).indexOf(visibleColIndex) === -1)) {
52925303
return;
52935304
}
52945305
this.wheelHandler();
5295-
if (this.verticalScrollContainer.igxForOf.slice(rowIndex, rowIndex + 1).find(rec => rec.expression || rec.childGridsData)) {
5306+
if (this.dataView.slice(rowIndex, rowIndex + 1).find(rec => rec.expression || rec.childGridsData)) {
52965307
visibleColIndex = -1;
52975308
}
52985309
if (visibleColIndex === -1 || this.navigation.isColumnFullyVisible(visibleColIndex)) {
@@ -5328,7 +5339,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
53285339
const colIndexes = callback ? columns.filter((col) => callback(col)).map(editCol => editCol.visibleIndex).sort((a, b) => a - b) :
53295340
columns.map(editCol => editCol.visibleIndex).sort((a, b) => a - b);
53305341
const nextCellIndex = colIndexes.find(index => index > curVisibleColIndex);
5331-
if (this.verticalScrollContainer.igxForOf.slice(currRowIndex, currRowIndex + 1)
5342+
if (this.dataView.slice(currRowIndex, currRowIndex + 1)
53325343
.find(rec => !rec.expression && !rec.summaries && !rec.childGridsData) && nextCellIndex !== undefined) {
53335344
return { rowIndex: currRowIndex, visibleColumnIndex: nextCellIndex };
53345345
} else {
@@ -5360,7 +5371,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
53605371
const colIndexes = callback ? columns.filter((col) => callback(col)).map(editCol => editCol.visibleIndex).sort((a, b) => b - a) :
53615372
columns.map(editCol => editCol.visibleIndex).sort((a, b) => b - a);
53625373
const prevCellIndex = colIndexes.find(index => index < curVisibleColIndex);
5363-
if (this.verticalScrollContainer.igxForOf.slice(currRowIndex, currRowIndex + 1)
5374+
if (this.dataView.slice(currRowIndex, currRowIndex + 1)
53645375
.find(rec => !rec.expression && !rec.summaries && !rec.childGridsData) && prevCellIndex !== undefined) {
53655376
return { rowIndex: currRowIndex, visibleColumnIndex: prevCellIndex };
53665377
} else {
@@ -5403,24 +5414,24 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
54035414
private getPrevDataRowIndex(currentRowIndex): number {
54045415
if (currentRowIndex <= 0) { return currentRowIndex; }
54055416

5406-
const prevRow = this.verticalScrollContainer.igxForOf.slice(0, currentRowIndex).reverse()
5417+
const prevRow = this.dataView.slice(0, currentRowIndex).reverse()
54075418
.find(rec => !rec.expression && !rec.summaries && !rec.childGridsData);
5408-
return prevRow ? this.verticalScrollContainer.igxForOf.indexOf(prevRow) : currentRowIndex;
5419+
return prevRow ? this.dataView.indexOf(prevRow) : currentRowIndex;
54095420
}
54105421

54115422
private getNextDataRowIndex(currentRowIndex): number {
5412-
if (currentRowIndex === this.verticalScrollContainer.igxForOf.length) { return currentRowIndex; }
5423+
if (currentRowIndex === this.dataView.length) { return currentRowIndex; }
54135424

5414-
const nextRow = this.verticalScrollContainer.igxForOf.slice(currentRowIndex + 1, this.verticalScrollContainer.igxForOf.length)
5425+
const nextRow = this.dataView.slice(currentRowIndex + 1, this.dataView.length)
54155426
.find(rec => !rec.expression && !rec.summaries && !rec.childGridsData);
5416-
return nextRow ? this.verticalScrollContainer.igxForOf.indexOf(nextRow) : currentRowIndex;
5427+
return nextRow ? this.dataView.indexOf(nextRow) : currentRowIndex;
54175428
}
54185429

54195430
private isValidPosition(rowIndex, colIndex): boolean {
54205431
const rows = this.summariesRowList.filter(s => s.index !== 0).concat(this.rowList.toArray()).length;
54215432
const cols = this.columnList.filter(col => !col.columnGroup && col.visibleIndex >= 0).length;
54225433
if (rows < 1 || cols < 1) { return false; }
5423-
if (rowIndex > -1 && rowIndex < this.verticalScrollContainer.igxForOf.length &&
5434+
if (rowIndex > -1 && rowIndex < this.dataView.length &&
54245435
colIndex > - 1 && colIndex <= this.unpinnedColumns[this.unpinnedColumns.length - 1].visibleIndex) {
54255436
return true;
54265437
}
@@ -5617,11 +5628,11 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
56175628
if (delayScrolling) {
56185629
this.verticalScrollContainer.onDataChanged.pipe(first()).subscribe(() => {
56195630
this.scrollDirective(this.verticalScrollContainer,
5620-
typeof (row) === 'number' ? row : this.verticalScrollContainer.igxForOf.indexOf(row));
5631+
typeof (row) === 'number' ? row : this.dataView.indexOf(row));
56215632
});
56225633
} else {
56235634
this.scrollDirective(this.verticalScrollContainer,
5624-
typeof (row) === 'number' ? row : this.verticalScrollContainer.igxForOf.indexOf(row));
5635+
typeof (row) === 'number' ? row : this.dataView.indexOf(row));
56255636
}
56265637

56275638
this.scrollToHorizontally(column);

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -249,7 +249,7 @@ export class IgxGridMRLNavigationService extends IgxGridNavigationService {
249249
moveNext = true;
250250
}
251251
const rowIndex = moveNext ? selectedNode.row + 1 : selectedNode.row;
252-
if (rowIndex > this.grid.verticalScrollContainer.igxForOf.length - 1) {
252+
if (rowIndex > this.grid.dataView.length - 1) {
253253
// end of rows reached.
254254
return;
255255
}
@@ -469,7 +469,7 @@ export class IgxGridMRLNavigationService extends IgxGridNavigationService {
469469
}
470470

471471
private _isGroupRecordAt(rowIndex: number) {
472-
const record = this.grid.verticalScrollContainer.igxForOf[rowIndex];
472+
const record = this.grid.dataView[rowIndex];
473473
return record.records && record.records.length;
474474
}
475475

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -267,7 +267,7 @@ export class IgxGridNavigationService {
267267
(cells[cells.length - 1] as HTMLElement).focus();
268268
} else {
269269
this.getFocusableGrid().nativeElement.focus({ preventScroll: true });
270-
this.grid.verticalScrollContainer.scrollTo(this.grid.verticalScrollContainer.igxForOf.length - 1);
270+
this.grid.verticalScrollContainer.scrollTo(this.grid.dataView.length - 1);
271271
this.grid.verticalScrollContainer.onChunkLoad
272272
.pipe(first()).subscribe(() => {
273273
const cells = this.grid.nativeElement.querySelectorAll(
@@ -315,7 +315,7 @@ export class IgxGridNavigationService {
315315
public navigateDown(rowElement, selectedNode: ISelectionNode) {
316316
const currentRowIndex = selectedNode.row;
317317
const visibleColumnIndex = selectedNode.column;
318-
if (currentRowIndex === this.grid.verticalScrollContainer.igxForOf.length - 1 ||
318+
if (currentRowIndex === this.grid.dataView.length - 1 ||
319319
(currentRowIndex === 0 && rowElement.tagName.toLowerCase() === 'igx-grid-summary-row')) {
320320
// check if this is rootSummary row
321321
return;
@@ -389,7 +389,7 @@ export class IgxGridNavigationService {
389389
this.onKeydownEnd(rowIndex);
390390
} else {
391391
this.getFocusableGrid().nativeElement.focus({ preventScroll: true });
392-
this.grid.verticalScrollContainer.scrollTo(this.grid.verticalScrollContainer.igxForOf.length - 1);
392+
this.grid.verticalScrollContainer.scrollTo(this.grid.dataView.length - 1);
393393
this.grid.verticalScrollContainer.onChunkLoad
394394
.pipe(first()).subscribe(() => {
395395
const rows = this.getAllRows();
@@ -405,7 +405,7 @@ export class IgxGridNavigationService {
405405
const verticalScroll = this.grid.verticalScrollContainer.getVerticalScroll();
406406
if (verticalScroll.scrollHeight === 0 ||
407407
verticalScroll.scrollTop === verticalScroll.scrollHeight - this.grid.verticalScrollContainer.igxForContainerSize) {
408-
const rowIndex = this.grid.verticalScrollContainer.igxForOf.length - 1;
408+
const rowIndex = this.grid.dataView.length - 1;
409409
const row = this.grid.nativeElement.querySelector(`[data-rowindex="${rowIndex}"]`) as HTMLElement;
410410
if (row && row.tagName.toLowerCase() === 'igx-grid-groupby-row') {
411411
row.focus();
@@ -414,10 +414,10 @@ export class IgxGridNavigationService {
414414
const isSummary = (row && row.tagName.toLowerCase() === 'igx-grid-summary-row') ? true : false;
415415
this.onKeydownEnd(rowIndex, isSummary);
416416
} else {
417-
this.grid.verticalScrollContainer.scrollTo(this.grid.verticalScrollContainer.igxForOf.length - 1);
417+
this.grid.verticalScrollContainer.scrollTo(this.grid.dataView.length - 1);
418418
this.grid.verticalScrollContainer.onChunkLoad
419419
.pipe(first()).subscribe(() => {
420-
const rowIndex = this.grid.verticalScrollContainer.igxForOf.length - 1;
420+
const rowIndex = this.grid.dataView.length - 1;
421421
const row = this.grid.nativeElement.querySelector(`[data-rowindex="${rowIndex}"]`) as HTMLElement;
422422
if (row && row.tagName.toLowerCase() === 'igx-grid-groupby-row') {
423423
row.focus();
@@ -447,7 +447,7 @@ export class IgxGridNavigationService {
447447
const rowEl = this.grid.rowList.find(row => row.index === rowIndex + 1) ?
448448
this.grid.rowList.find(row => row.index === rowIndex + 1) :
449449
this.grid.summariesRowList.find(row => row.index === rowIndex + 1);
450-
if (rowIndex === this.grid.verticalScrollContainer.igxForOf.length - 1 && this.grid.rootSummariesEnabled) {
450+
if (rowIndex === this.grid.dataView.length - 1 && this.grid.rootSummariesEnabled) {
451451
this.onKeydownHome(0, true);
452452
return;
453453
}

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -293,7 +293,7 @@ describe('IgxGrid - Cell selection #grid', () => {
293293

294294
GridSelectionFunctions.verifyCellSelected(firstCell);
295295

296-
grid.verticalScrollContainer.scrollTo(grid.verticalScrollContainer.igxForOf.length - 1);
296+
grid.verticalScrollContainer.scrollTo(grid.dataView.length - 1);
297297
await wait(100);
298298
fix.detectChanges();
299299

@@ -514,7 +514,7 @@ describe('IgxGrid - Cell selection #grid', () => {
514514
expect(selectionChangeSpy).toHaveBeenCalledTimes(0);
515515
expect(grid.getSelectedData()).toEqual(expectedData);
516516

517-
grid.verticalScrollContainer.scrollTo(grid.verticalScrollContainer.igxForOf.length - 1);
517+
grid.verticalScrollContainer.scrollTo(grid.dataView.length - 1);
518518
await wait(100);
519519
fix.detectChanges();
520520

@@ -538,7 +538,7 @@ describe('IgxGrid - Cell selection #grid', () => {
538538
expect(selectionChangeSpy).toHaveBeenCalledTimes(0);
539539
expect(grid.getSelectedData()).toEqual(expectedData);
540540

541-
grid.verticalScrollContainer.scrollTo(grid.verticalScrollContainer.igxForOf.length - 1);
541+
grid.verticalScrollContainer.scrollTo(grid.dataView.length - 1);
542542
await wait(100);
543543
fix.detectChanges();
544544

@@ -1040,7 +1040,7 @@ describe('IgxGrid - Cell selection #grid', () => {
10401040
GridSelectionFunctions.verifyCellsRegionSelected(grid, 0, 0, 0, 0);
10411041
GridSelectionFunctions.verifySelectedRange(grid, 0, 0, 0, 0);
10421042

1043-
grid.verticalScrollContainer.scrollTo(grid.verticalScrollContainer.igxForOf.length - 1);
1043+
grid.verticalScrollContainer.scrollTo(grid.dataView.length - 1);
10441044
await wait(100);
10451045
fix.detectChanges();
10461046

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -981,7 +981,7 @@ describe('IgxGrid - Keyboard navigation #grid', () => {
981981
});
982982
fix.detectChanges();
983983

984-
grid.verticalScrollContainer.scrollTo(grid.verticalScrollContainer.igxForOf.length - 1);
984+
grid.verticalScrollContainer.scrollTo(grid.dataView.length - 1);
985985
await wait(100);
986986
fix.detectChanges();
987987

@@ -1009,7 +1009,7 @@ describe('IgxGrid - Keyboard navigation #grid', () => {
10091009
});
10101010
fix.detectChanges();
10111011

1012-
grid.verticalScrollContainer.scrollTo(grid.verticalScrollContainer.igxForOf.length - 1);
1012+
grid.verticalScrollContainer.scrollTo(grid.dataView.length - 1);
10131013
await wait(100);
10141014
fix.detectChanges();
10151015

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1386,7 +1386,7 @@ describe('IgxGrid - Summaries #grid', () => {
13861386
});
13871387
fix.detectChanges();
13881388

1389-
grid.verticalScrollContainer.scrollTo(grid.verticalScrollContainer.igxForOf.length - 1);
1389+
grid.verticalScrollContainer.scrollTo(grid.dataView.length - 1);
13901390
await wait(100);
13911391
fix.detectChanges();
13921392

@@ -1452,7 +1452,7 @@ describe('IgxGrid - Summaries #grid', () => {
14521452
['Count', 'Earliest', 'Latest'], ['9', 'Dec 18, 2007', 'Dec 9, 2017']);
14531453
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 4, ['Min', 'Max'], ['19', '50']);
14541454

1455-
grid.verticalScrollContainer.scrollTo(grid.verticalScrollContainer.igxForOf.length - 1);
1455+
grid.verticalScrollContainer.scrollTo(grid.dataView.length - 1);
14561456
await wait(50);
14571457
fix.detectChanges();
14581458

@@ -1482,7 +1482,7 @@ describe('IgxGrid - Summaries #grid', () => {
14821482
GridSummaryFunctions.verifyColumnSummariesBySummaryRowIndex(fix, 0, 4, ['Min', 'Max'], ['19', '50']);
14831483
GridSummaryFunctions.verifyColumnSummariesBySummaryRowIndex(fix, 0, 5, ['Count'], ['9']);
14841484

1485-
grid.verticalScrollContainer.scrollTo(grid.verticalScrollContainer.igxForOf.length - 1);
1485+
grid.verticalScrollContainer.scrollTo(grid.dataView.length - 1);
14861486
await wait(50);
14871487
fix.detectChanges();
14881488
GridSummaryFunctions.verifyColumnSummariesBySummaryRowIndex(fix, 18, 5, ['Count'], ['1']);
@@ -1545,7 +1545,7 @@ describe('IgxGrid - Summaries #grid', () => {
15451545
GridSummaryFunctions.verifyColumnSummariesBySummaryRowIndex(fix, 0, 2, ['Count'], ['8']);
15461546
GridSummaryFunctions.verifyColumnSummariesBySummaryRowIndex(fix, 0, 4, ['Min', 'Max'], ['19', '50']);
15471547

1548-
grid.verticalScrollContainer.scrollTo(grid.verticalScrollContainer.igxForOf.length - 1);
1548+
grid.verticalScrollContainer.scrollTo(grid.dataView.length - 1);
15491549
await wait(50);
15501550
fix.detectChanges();
15511551

@@ -1614,7 +1614,7 @@ describe('IgxGrid - Summaries #grid', () => {
16141614
GridSummaryFunctions.verifyColumnSummariesBySummaryRowIndex(fix, 4, 2, ['Count'], ['3']);
16151615
GridSummaryFunctions.verifyColumnSummariesBySummaryRowIndex(fix, 4, 4, ['Min', 'Max'], ['19', '50']);
16161616

1617-
grid.verticalScrollContainer.scrollTo(grid.verticalScrollContainer.igxForOf.length - 1);
1617+
grid.verticalScrollContainer.scrollTo(grid.dataView.length - 1);
16181618
await wait(50);
16191619
fix.detectChanges();
16201620

@@ -1754,7 +1754,7 @@ describe('IgxGrid - Summaries #grid', () => {
17541754
expect(groupRows[0].groupRow.value).toEqual(-1);
17551755
expect(groupRows[1].groupRow.value).toEqual(19);
17561756

1757-
grid.verticalScrollContainer.scrollTo(grid.verticalScrollContainer.igxForOf.length - 1);
1757+
grid.verticalScrollContainer.scrollTo(grid.dataView.length - 1);
17581758
await wait(50);
17591759
fix.detectChanges();
17601760

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -982,7 +982,7 @@ export class IgxGridComponent extends IgxGridBaseComponent implements IGridDataB
982982

983983
};
984984

985-
this.verticalScrollContainer.igxForOf.forEach(process);
985+
this.dataView.forEach(process);
986986
return this.extractDataFromSelection(source, formatters, headers);
987987
} else {
988988
return super.getSelectedData(formatters, headers);

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -905,10 +905,10 @@ describe('IgxGrid - GroupBy #grid', () => {
905905

906906
// verify virtualization states - should be in last chunk
907907
const virtState = grid.verticalScrollContainer.state;
908-
expect(virtState.startIndex).toBe(grid.verticalScrollContainer.igxForOf.length - virtState.chunkSize);
908+
expect(virtState.startIndex).toBe(grid.dataView.length - virtState.chunkSize);
909909

910910
// verify last row is visible at bottom
911-
const lastRow = grid.getRowByIndex(grid.verticalScrollContainer.igxForOf.length - 1);
911+
const lastRow = grid.getRowByIndex(grid.dataView.length - 1);
912912
expect(lastRow.nativeElement.getBoundingClientRect().bottom).toBe(grid.tbody.nativeElement.getBoundingClientRect().bottom);
913913

914914
});

0 commit comments

Comments
 (0)