diff --git a/projects/igniteui-angular/src/lib/grids/common/pipes.ts b/projects/igniteui-angular/src/lib/grids/common/pipes.ts index 36807ba0860..e5192a85ddc 100644 --- a/projects/igniteui-angular/src/lib/grids/common/pipes.ts +++ b/projects/igniteui-angular/src/lib/grids/common/pipes.ts @@ -227,10 +227,6 @@ export class IgxGridRowPinningPipe implements PipeTransform { public transform(collection: any[] , id: string, isPinned = false, pipeTrigger: number) { const grid = this.gridAPI.grid; - if (!grid.hasPinnedRecords) { - return isPinned ? [] : collection; - } - if (grid.hasPinnedRecords && isPinned) { const result = collection.filter(rec => grid.isRecordPinned(rec)); result.sort((rec1, rec2) => grid.pinRecordIndex(rec1) - grid.pinRecordIndex(rec2)); @@ -238,6 +234,10 @@ export class IgxGridRowPinningPipe implements PipeTransform { } grid.unpinnedRecords = collection; + if (!grid.hasPinnedRecords) { + grid.pinnedRecords = []; + return isPinned ? [] : collection; + } return collection.map((rec) => { return grid.isRecordPinned(rec) ? { recordRef: rec, ghostRecord: true} : rec; diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index 298bafe6835..09fc1216de0 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -2444,6 +2444,11 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements */ public columnWidthSetByUser = false; + /** + * @hidden @internal + */ + public pinnedRecords: any[]; + /** * @hidden @internal */ @@ -2665,12 +2670,13 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements /** * @hidden + * Returns the row index of a row that takes into account the full view data like pinning. */ - public getRowIndex(rowIndex, pinned) { + public getDataViewIndex(rowIndex, pinned) { if (pinned && !this.isRowPinningToTop) { - rowIndex = rowIndex + this.dataView.length; + rowIndex = rowIndex + this.unpinnedDataView.length; } else if (!pinned && this.isRowPinningToTop) { - rowIndex = rowIndex + this.pinnedRecordsCount; + rowIndex = rowIndex + this.pinnedDataView.length; } return rowIndex; } @@ -2727,6 +2733,15 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements return this._pinnedRecordIDs.indexOf(id) !== -1; } + /** + * @hidden + * @internal + */ + public isRecordPinnedByIndex(rowIndex: number) { + return this.hasPinnedRecords && (this.isRowPinningToTop && rowIndex < this.pinnedDataView.length) || + (!this.isRowPinningToTop && rowIndex >= this.unpinnedDataView.length); + } + /** * @hidden * @internal @@ -2997,6 +3012,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements data = data.map(rec => rec.ghostRecord !== undefined ? rec.recordRef : rec); if (this._pinnedRecordIDs.length > 0 && pinned) { this._filteredSortedPinnedData = data; + this.pinnedRecords = data; this.filteredSortedData = this.isRowPinningToTop ? [... this._filteredSortedPinnedData, ... this._filteredSortedUnpinnedData] : [... this._filteredSortedUnpinnedData, ... this._filteredSortedPinnedData]; } else if (this._pinnedRecordIDs.length > 0 && !pinned) { @@ -5172,25 +5188,38 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements } /** - * Returns the currently transformed paged/filtered/sorted/grouped data, displayed in the grid. + * Returns the currently transformed paged/filtered/sorted/grouped pinned row data, displayed in the grid. * @example * ```typescript - * const dataView = this.grid.dataView; + * const pinnedDataView = this.grid.pinnedDataView; * ``` */ - get dataView(): any[] { + get pinnedDataView(): any[] { + return this.pinnedRecords ? this.pinnedRecords : []; + } + + /** + * Returns currently transformed paged/filtered/sorted/grouped unpinned row data, displayed in the grid. + * @example + * ```typescript + * const pinnedDataView = this.grid.pinnedDataView; + * ``` + */ + get unpinnedDataView(): any[] { return this.unpinnedRecords ? this.unpinnedRecords : this.verticalScrollContainer.igxForOf; } - /** - * Returns the currently transformed paged/filtered/sorted/grouped pinned data, displayed in the grid. - * @example - * ```typescript - * const pinnedDataView = this.grid.pinnedDataView; - * ``` - */ - get pinnedDataView(): any[] { - return this.pinnedRows.map(row => row.rowData); + /** + * Returns the currently transformed paged/filtered/sorted/grouped/pinned/unpinned row data, displayed in the grid. + * @example + * ```typescript + * const dataView = this.grid.dataView; + * ``` + */ + get dataView(): any[] { + return this.isRowPinningToTop ? + [...this.pinnedDataView, ...this.unpinnedDataView] : + [...this.unpinnedDataView, ...this.pinnedDataView]; } /** @@ -5433,7 +5462,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements * If `headers` is enabled, it will use the column header (if any) instead of the column field. */ public getSelectedData(formatters = false, headers = false) { - const source = this.isRowPinningToTop ? [...this.pinnedDataView, ...this.dataView] : [...this.dataView, ...this.pinnedDataView]; + const source = this.filteredSortedData; return this.extractDataFromSelection(source, formatters, headers); } @@ -5637,6 +5666,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements if (this.dataView.slice(rowIndex, rowIndex + 1).find(rec => rec.expression || rec.childGridsData)) { visibleColIndex = -1; } + // If the target row is pinned no need to scroll as well. const shouldScrollVertically = this.navigation.shouldPerformVerticalScroll(rowIndex, visibleColIndex); const shouldScrollHorizontally = this.navigation.shouldPerformHorizontalScroll(visibleColIndex, rowIndex); if (shouldScrollVertically) { @@ -5923,11 +5953,11 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements if (delayScrolling) { this.verticalScrollContainer.onDataChanged.pipe(first()).subscribe(() => { this.scrollDirective(this.verticalScrollContainer, - typeof (row) === 'number' ? row : this.dataView.indexOf(row)); + typeof (row) === 'number' ? row : this.unpinnedDataView.indexOf(row)); }); } else { this.scrollDirective(this.verticalScrollContainer, - typeof (row) === 'number' ? row : this.dataView.indexOf(row)); + typeof (row) === 'number' ? row : this.unpinnedDataView.indexOf(row)); } this.scrollToHorizontally(column); diff --git a/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts b/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts index 3fb6a5daa7c..90e864856c4 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts @@ -308,8 +308,11 @@ export class IgxGridNavigationService { } public shouldPerformVerticalScroll(targetRowIndex: number, visibleColIndex: number): boolean { + if (this.grid.isRecordPinnedByIndex(targetRowIndex)) { return false; } + const scrollRowIndex = this.grid.hasPinnedRecords && this.grid.isRowPinningToTop ? + targetRowIndex - this.grid.pinnedDataView.length : targetRowIndex; const targetRow = this.getRowElementByIndex(targetRowIndex); - const rowHeight = this.grid.verticalScrollContainer.getSizeAt(targetRowIndex); + const rowHeight = this.grid.verticalScrollContainer.getSizeAt(scrollRowIndex); const containerHeight = this.grid.calcHeight ? Math.ceil(this.grid.calcHeight) : 0; const endTopOffset = targetRow ? targetRow.offsetTop + rowHeight + this.containerTopOffset : containerHeight + rowHeight; return !targetRow || targetRow.offsetTop < Math.abs(this.containerTopOffset) @@ -322,7 +325,10 @@ export class IgxGridNavigationService { } public performVerticalScrollToCell(rowIndex: number, visibleColIndex = -1, cb?: () => void) { - this.grid.verticalScrollContainer.scrollTo(rowIndex); + // Only for top pinning we need to subtract pinned count because virtualization indexing doesn't count pinned rows. + const scrollRowIndex = this.grid.hasPinnedRecords && this.grid.isRowPinningToTop ? + rowIndex - this.grid.pinnedDataView.length : rowIndex; + this.grid.verticalScrollContainer.scrollTo(scrollRowIndex); this.grid.verticalScrollContainer.onChunkLoad .pipe(first()).subscribe(() => { if (cb) { cb(); } diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts index fa04ff0ba2c..1d46fc1028c 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts @@ -1,4 +1,4 @@ -import { ViewChild, Component } from '@angular/core'; +import { ViewChild, Component, DebugElement } from '@angular/core'; import { TestBed, async, fakeAsync, tick } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; @@ -15,7 +15,8 @@ import { IgxTransactionService } from '../../services'; import { GridSummaryFunctions } from '../../test-utils/grid-functions.spec'; import { IgxStringFilteringOperand } from '../../data-operations/filtering-condition'; import { IgxPaginatorComponent } from '../../paginator/paginator.component'; -import { wait } from '../../test-utils/ui-interactions.spec'; +import { wait, UIInteractions } from '../../test-utils/ui-interactions.spec'; +import { setupGridScrollDetection } from '../../test-utils/helper-utils.spec'; describe('Row Pinning #grid', () => { const FIXED_ROW_CONTAINER = '.igx-grid__tr--pinned '; @@ -840,6 +841,248 @@ describe('Row Pinning #grid', () => { expect(grid.calcHeight - expectedHeight).toBeLessThanOrEqual(1); }); }); + + describe(' Navigation', () => { + let gridContent: DebugElement; + + beforeEach(() => { + fix = TestBed.createComponent(GridRowPinningComponent); + fix.detectChanges(); + grid = fix.componentInstance.instance; + setupGridScrollDetection(fix, grid); + gridContent = GridFunctions.getGridContent(fix); + }); + + it('should navigate to bottom from top pinned row using Ctrl+ArrowDown', async() => { + grid.getRowByIndex(5).pin(); + fix.detectChanges(); + + const firstRowCell = grid.getRowByIndex(0).cells.toArray()[1]; + UIInteractions.simulateClickAndSelectEvent(firstRowCell); + await wait(DEBOUNCE_TIME); + fix.detectChanges(); + + UIInteractions.triggerEventHandlerKeyDown('ArrowDown', gridContent, false, false, true); + await wait(DEBOUNCE_TIME); + fix.detectChanges(); + await wait(DEBOUNCE_TIME); + fix.detectChanges(); + + const lastRowCell = grid.getRowByIndex(27).cells.toArray()[1]; + const selectedCell = fix.componentInstance.instance.selectedCells[0]; + expect(selectedCell).toBe(lastRowCell); + expect(selectedCell.rowIndex).toBe(27); + }); + + it('should navigate and scroll to first unpinned row from top pinned row using ArrowDown', async() => { + grid.getRowByIndex(5).pin(); + fix.detectChanges(); + + grid.navigateTo(10); + await wait(DEBOUNCE_TIME); + fix.detectChanges(); + + const firstRowCell = grid.getRowByIndex(0).cells.toArray()[1]; + UIInteractions.simulateClickAndSelectEvent(firstRowCell); + await wait(DEBOUNCE_TIME); + fix.detectChanges(); + + UIInteractions.triggerEventHandlerKeyDown('ArrowDown', gridContent); + await wait(DEBOUNCE_TIME); + fix.detectChanges(); + await wait(DEBOUNCE_TIME); + fix.detectChanges(); + + const secondRowCell = grid.getRowByIndex(1).cells.toArray()[1]; + const selectedCell = fix.componentInstance.instance.selectedCells[0]; + expect(selectedCell).toBe(secondRowCell); + expect(selectedCell.rowIndex).toBe(1); + }); + + it('should navigate to top pinned row from bottom unpinned row without scrolling using Ctrl+ArrowUp', async() => { + grid.getRowByIndex(5).pin(); + fix.detectChanges(); + + grid.navigateTo(27); + await wait(DEBOUNCE_TIME); + fix.detectChanges(); + await wait(DEBOUNCE_TIME); + fix.detectChanges(); + + expect(grid.verticalScrollContainer.getScroll().scrollTop).not.toEqual(0); + + const lastRowCell = grid.getRowByIndex(27).cells.toArray()[1]; + UIInteractions.simulateClickAndSelectEvent(lastRowCell); + await wait(DEBOUNCE_TIME); + fix.detectChanges(); + + UIInteractions.triggerEventHandlerKeyDown('ArrowUp', gridContent, false, false, true); + await wait(DEBOUNCE_TIME); + fix.detectChanges(); + await wait(DEBOUNCE_TIME); + fix.detectChanges(); + + const firstRowCell = grid.getRowByIndex(0).cells.toArray()[1]; + const selectedCell = fix.componentInstance.instance.selectedCells[0]; + expect(selectedCell).toBe(firstRowCell); + expect(selectedCell.rowIndex).toBe(0); + expect(grid.verticalScrollContainer.getScroll().scrollTop).not.toEqual(0); + }); + + it('should navigate to top pinned row from first unpinned row using ArrowUp', async() => { + grid.getRowByIndex(5).pin(); + grid.getRowByIndex(1).pin(); + fix.detectChanges(); + + const thirdRowCell = grid.getRowByIndex(2).cells.toArray()[1]; + UIInteractions.simulateClickAndSelectEvent(thirdRowCell); + await wait(DEBOUNCE_TIME); + fix.detectChanges(); + + expect(grid.navigation.activeNode.row).toBe(2); + expect(grid.navigation.activeNode.column).toBe(1); + + UIInteractions.triggerEventHandlerKeyDown('ArrowUp', gridContent); + await wait(DEBOUNCE_TIME); + fix.detectChanges(); + + const secondRowCell = grid.getRowByIndex(1).cells.toArray()[1]; + const selectedCell = fix.componentInstance.instance.selectedCells[0]; + expect(selectedCell).toBe(secondRowCell); + expect(selectedCell.rowIndex).toBe(1); + }); + + 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.getRowByIndex(5).pin(); + fix.detectChanges(); + + grid.navigateTo(26); + await wait(DEBOUNCE_TIME); + fix.detectChanges(); + await wait(DEBOUNCE_TIME); + fix.detectChanges(); + + const lastRowCell = grid.getRowByIndex(27).cells.toArray()[1]; + UIInteractions.simulateClickAndSelectEvent(lastRowCell); + await wait(DEBOUNCE_TIME); + fix.detectChanges(); + + expect(grid.navigation.activeNode.row).toBe(27); + expect(grid.navigation.activeNode.column).toBe(1); + + UIInteractions.triggerEventHandlerKeyDown('ArrowUp', gridContent, false, false, true); + await wait(DEBOUNCE_TIME); + fix.detectChanges(); + await wait(DEBOUNCE_TIME); + fix.detectChanges(); + + const firstRowCell = grid.getRowByIndex(0).cells.toArray()[1]; + const selectedCell = fix.componentInstance.instance.selectedCells[0]; + expect(selectedCell).toBe(firstRowCell); + expect(selectedCell.rowIndex).toBe(0); + }); + + it('should navigate to last unpinned row from bottom pinned row using ArrowUp', async() => { + fix.componentInstance.pinningConfig = { columns: ColumnPinningPosition.Start, rows: RowPinningPosition.Bottom }; + grid.getRowByIndex(5).pin(); + fix.detectChanges(); + + const firstRowCell = grid.getRowByIndex(27).cells.toArray()[1]; + UIInteractions.simulateClickAndSelectEvent(firstRowCell); + await wait(DEBOUNCE_TIME); + fix.detectChanges(); + + UIInteractions.triggerEventHandlerKeyDown('ArrowUp', gridContent); + await wait(DEBOUNCE_TIME); + fix.detectChanges(); + await wait(DEBOUNCE_TIME); + fix.detectChanges(); + + const lastUnpinnedRowCell = grid.getRowByIndex(26).cells.toArray()[1]; + const selectedCell = fix.componentInstance.instance.selectedCells[0]; + expect(selectedCell).toBe(lastUnpinnedRowCell); + expect(selectedCell.rowIndex).toBe(26); + }); + + 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.getRowByIndex(5).pin(); + fix.detectChanges(); + + expect(grid.verticalScrollContainer.getScroll().scrollTop).toEqual(0); + + const firstRowCell = grid.getRowByIndex(0).cells.toArray()[1]; + UIInteractions.simulateClickAndSelectEvent(firstRowCell); + await wait(DEBOUNCE_TIME); + fix.detectChanges(); + + UIInteractions.triggerEventHandlerKeyDown('ArrowDown', gridContent, false, false, true); + await wait(DEBOUNCE_TIME); + fix.detectChanges(); + await wait(DEBOUNCE_TIME); + fix.detectChanges(); + + const lastRowCell = grid.getRowByIndex(27).cells.toArray()[1]; + const selectedCell = fix.componentInstance.instance.selectedCells[0]; + expect(selectedCell).toBe(lastRowCell); + expect(selectedCell.rowIndex).toBe(27); + expect(grid.verticalScrollContainer.getScroll().scrollTop).toEqual(0); + }); + + it('should navigate to bottom pinned row from last unpinned row using ArrowDown', async() => { + fix.componentInstance.pinningConfig = { columns: ColumnPinningPosition.Start, rows: RowPinningPosition.Bottom }; + grid.getRowByIndex(5).pin(); + grid.getRowByIndex(1).pin(); + fix.detectChanges(); + + grid.navigateTo(26); + await wait(DEBOUNCE_TIME); + fix.detectChanges(); + await wait(DEBOUNCE_TIME); + fix.detectChanges(); + + const firstRowCell = grid.getRowByIndex(26).cells.toArray()[1]; + UIInteractions.simulateClickAndSelectEvent(firstRowCell); + await wait(DEBOUNCE_TIME); + fix.detectChanges(); + + expect(grid.navigation.activeNode.row).toBe(26); + expect(grid.navigation.activeNode.column).toBe(1); + + UIInteractions.triggerEventHandlerKeyDown('ArrowDown', gridContent); + await wait(DEBOUNCE_TIME); + fix.detectChanges(); + + const lastRowCell = grid.getRowByIndex(27).cells.toArray()[1]; + const selectedCell = fix.componentInstance.instance.selectedCells[0]; + expect(selectedCell).toBe(lastRowCell); + expect(selectedCell.rowIndex).toBe(27); + }); + + it('should navigate down from pinned to unpinned row when there are filtered out pinned rows', async() => { + grid.getRowByIndex(5).pin(); + grid.getRowByIndex(1).pin(); + fix.detectChanges(); + + grid.filter('ID', 'B', IgxStringFilteringOperand.instance().condition('contains'), false); + fix.detectChanges(); + + const firstRowCell = grid.getRowByIndex(0).cells.toArray()[1]; + UIInteractions.simulateClickAndSelectEvent(firstRowCell); + await wait(DEBOUNCE_TIME); + fix.detectChanges(); + + UIInteractions.triggerEventHandlerKeyDown('ArrowDown', gridContent); + await wait(DEBOUNCE_TIME); + fix.detectChanges(); + + const lastRowCell = grid.getRowByIndex(1).cells.toArray()[1]; + const selectedCell = fix.componentInstance.instance.selectedCells[0]; + expect(selectedCell).toBe(lastRowCell); + expect(selectedCell.rowIndex).toBe(1); + }); + }); }); @Component({ diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts index 6384314c6b8..69e8ede2450 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts @@ -769,10 +769,6 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, * @hidden @internal */ public getContext(rowData: any, rowIndex: number, pinned?: boolean): any { - if (pinned && !this.isRowPinningToTop) { - rowIndex = rowIndex + this.dataView.length; - } - rowIndex = !pinned && this.isRowPinningToTop ? rowIndex + this._pinnedRecordIDs.length : rowIndex; if (this.isDetailRecord(rowData)) { const cachedData = this.childDetailTemplates.get(rowData.detailsData); const rowID = this.primaryKey ? rowData.detailsData[this.primaryKey] : this.data.indexOf(rowData.detailsData); @@ -797,7 +793,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, } return { $implicit: this.isGhostRecord(rowData) ? rowData.recordRef : rowData, - index: rowIndex, + index: this.getDataViewIndex(rowIndex, pinned), templateID: this.isGroupByRecord(rowData) ? 'groupRow' : this.isSummaryRow(rowData) ? 'summaryRow' : 'dataRow', disabled: this.isGhostRecord(rowData) }; diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-navigation.service.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-navigation.service.ts index d32955220af..cf23d3272c0 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-navigation.service.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-navigation.service.ts @@ -318,7 +318,8 @@ export class IgxHierarchicalGridNavigationService extends IgxGridNavigationServi let top = currGrid.tbody.nativeElement.getBoundingClientRect().top; while (currGrid.parent) { currGrid = currGrid.parent; - top = Math.max(top, currGrid.tbody.nativeElement.getBoundingClientRect().top); + const pinnedRowsHeight = currGrid.hasPinnedRecords && currGrid.isRowPinningToTop ? currGrid.pinnedRowHeight : 0; + top = Math.max(top, currGrid.tbody.nativeElement.getBoundingClientRect().top + pinnedRowsHeight); } return top; } @@ -332,7 +333,8 @@ export class IgxHierarchicalGridNavigationService extends IgxGridNavigationServi let bottom = currGrid.tbody.nativeElement.getBoundingClientRect().bottom; while (currGrid.parent) { currGrid = currGrid.parent; - bottom = Math.min(bottom, currGrid.tbody.nativeElement.getBoundingClientRect().bottom); + const pinnedRowsHeight = currGrid.hasPinnedRecords && !currGrid.isRowPinningToTop ? currGrid.pinnedRowHeight : 0; + bottom = Math.min(bottom, currGrid.tbody.nativeElement.getBoundingClientRect().bottom - pinnedRowsHeight); } return bottom; } diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html index c644d0ca36e..3155d588942 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html @@ -99,7 +99,7 @@ | visibleColumns:hasVisibleColumns | gridRowPinning:id:true:pipeTrigger | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true - | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger as pinnedData"> + | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger:true as pinnedData">
@@ -145,7 +145,7 @@ 'igx-grid__tr-container': true, 'igx-grid__tr--highlighted':isRowHighlighted(rowData) }"> -
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts index a6ec522dd26..b2ed56e066e 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts @@ -547,7 +547,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti return { $implicit: this.isGhostRecord(rowData) ? rowData.recordRef : rowData, templateID: 'dataRow', - index: this.getRowIndex(rowIndex, pinned), + index: this.getDataViewIndex(rowIndex, pinned), disabled: this.isGhostRecord(rowData) }; } diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-integration.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-integration.spec.ts index c1d38143161..9c8de752417 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-integration.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-integration.spec.ts @@ -1575,12 +1575,12 @@ describe('IgxTreeGrid - Integration #tGrid', () => { treeGrid.perPage = 5; fix.detectChanges(); - expect(treeGrid.dataView.length).toBe(5); + expect(treeGrid.dataView.length).toBe(6); treeGrid.perPage = 10; fix.detectChanges(); - expect(treeGrid.dataView.length).toBe(10); + expect(treeGrid.dataView.length).toBe(11); }); it('should correctly apply paging state for grid and paginator when there are pinned rows.', fakeAsync(() => { diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html index fcc3be06f30..81c446c2e8c 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html @@ -79,9 +79,9 @@ | treeGridTransaction:id:pipeTrigger | visibleColumns:hasVisibleColumns | treeGridNormalizeRecord:pipeTrigger + | gridRowPinning:id:true:pipeTrigger | treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true - | treeGridSorting:sortingExpressions:sortStrategy:id:pipeTrigger:true - | gridRowPinning:id:true:pipeTrigger as pinnedData'> + | treeGridSorting:sortingExpressions:sortStrategy:id:pipeTrigger:true as pinnedData'>
- @@ -60,7 +60,7 @@ - + {{cell.row.pinned ? 'lock' : 'lock_open'}} @@ -87,7 +87,7 @@ > - + {{cell.row.pinned ? 'lock' : 'lock_open'}}