Skip to content

Commit 638df68

Browse files
MKirovaMKirova
MKirova
authored and
MKirova
committed
chore(*): Add scroll inertia in merged rows outside of virt.frame.
1 parent 69ba10d commit 638df68

File tree

6 files changed

+43
-20
lines changed

6 files changed

+43
-20
lines changed

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

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -47,13 +47,19 @@
4747
<ng-container *ngTemplateOutlet="hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null">
4848
</ng-container>
4949

50-
51-
@for (rowData of mergedDataInView; track rowData.record;) {
52-
<igx-grid-row class="igx-grid__tr--merged-top" [gridID]="id" [index]="rowData.index" [data]="rowData.record.recordRef" [metaData]="rowData.record" [style.top.px]="getMergeCellOffset(rowData)"
53-
[ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowData.index:hasColumnLayouts:isRecordMerged(rowData):false:rowData.record:pipeTrigger"
54-
[ngStyle]="rowStyles | igxGridRowStyles:rowData.record:rowData.index:pipeTrigger" #row>
55-
</igx-grid-row>
50+
@if (mergedDataInView && mergedDataInView.length > 0) {
51+
<div igxScrollInertia
52+
[IgxScrollInertiaScrollContainer]="this.verticalScrollContainer.dc.instance.scrollContainer"
53+
[IgxScrollInertiaDirection]="this.verticalScrollContainer.dc.instance.scrollDirection">
54+
@for (rowData of mergedDataInView; track rowData.record;) {
55+
<igx-grid-row class="igx-grid__tr--merged-top" [gridID]="id" [index]="rowData.index" [data]="rowData.record.recordRef" [metaData]="rowData.record" [style.top.px]="getMergeCellOffset(rowData)"
56+
[ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowData.index:hasColumnLayouts:isRecordMerged(rowData):false:rowData.record:pipeTrigger"
57+
[ngStyle]="rowStyles | igxGridRowStyles:rowData.record:rowData.index:pipeTrigger" #row>
58+
</igx-grid-row>
59+
}
60+
</div>
5661
}
62+
5763
<ng-template #pinnedRecordsTemplate>
5864
@if (data
5965
| gridTransaction:id:pipeTrigger

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ import { IgxGridBodyDirective } from '../grid.common';
5454
import { IgxGridHeaderRowComponent } from '../headers/grid-header-row.component';
5555
import { IgxGridGroupByAreaComponent } from '../grouping/grid-group-by-area.component';
5656
import { Observable, Subject } from 'rxjs';
57+
import { IgxScrollInertiaDirective } from '../../directives/scroll-inertia/scroll_inertia.directive';
5758

5859
let NEXT_ID = 0;
5960

@@ -152,7 +153,8 @@ export interface IGroupingDoneEventArgs extends IBaseEventArgs {
152153
IgxGridSummaryPipe,
153154
IgxGridDetailsPipe,
154155
IgxStringReplacePipe,
155-
IgxGridCellMergePipe
156+
IgxGridCellMergePipe,
157+
IgxScrollInertiaDirective
156158
],
157159
schemas: [CUSTOM_ELEMENTS_SCHEMA]
158160
})

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

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,17 @@
3030
[igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
3131
class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
3232
}
33-
34-
@for (rowData of mergedDataInView; track rowData.record;) {
35-
<igx-hierarchical-grid-row class="igx-grid__tr--merged-top" [gridID]="id" [index]="rowData.index" [data]="rowData.record.recordRef" [metaData]="rowData.record" [style.top.px]="getMergeCellOffset(rowData)"
36-
[ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowData.index:hasColumnLayouts:isRecordMerged(rowData.record):false:rowData.record:pipeTrigger"
37-
[ngStyle]="rowStyles | igxGridRowStyles:rowData.record:rowData.index:pipeTrigger" #row>
38-
</igx-hierarchical-grid-row>
33+
@if (mergedDataInView && mergedDataInView.length > 0) {
34+
<div igxScrollInertia
35+
[IgxScrollInertiaScrollContainer]="this.verticalScrollContainer.dc.instance.scrollContainer"
36+
[IgxScrollInertiaDirection]="this.verticalScrollContainer.dc.instance.scrollDirection">
37+
@for (rowData of mergedDataInView; track rowData.record;) {
38+
<igx-hierarchical-grid-row class="igx-grid__tr--merged-top" [gridID]="id" [index]="rowData.index" [data]="rowData.record.recordRef" [metaData]="rowData.record" [style.top.px]="getMergeCellOffset(rowData)"
39+
[ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowData.index:hasColumnLayouts:isRecordMerged(rowData.record):false:rowData.record:pipeTrigger"
40+
[ngStyle]="rowStyles | igxGridRowStyles:rowData.record:rowData.index:pipeTrigger" #row>
41+
</igx-hierarchical-grid-row>
42+
}
43+
</div>
3944
}
4045
<ng-template #pinnedRecordsTemplate>
4146
@if (data

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ import { IgxGridHeaderRowComponent } from '../headers/grid-header-row.component'
6868
import { IgxActionStripToken } from '../../action-strip/token';
6969
import { flatten } from '../../core/utils';
7070
import { IFilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
71+
import { IgxScrollInertiaDirective } from '../../directives/scroll-inertia/scroll_inertia.directive';
7172

7273
let NEXT_ID = 0;
7374

@@ -351,7 +352,8 @@ export class IgxChildGridRowComponent implements AfterViewInit, OnInit {
351352
IgxGridHierarchicalPipe,
352353
IgxGridHierarchicalPagingPipe,
353354
IgxStringReplacePipe,
354-
IgxGridCellMergePipe
355+
IgxGridCellMergePipe,
356+
IgxScrollInertiaDirective
355357
],
356358
schemas: [CUSTOM_ELEMENTS_SCHEMA]
357359
})

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

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,17 @@
3131
class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
3232
}
3333

34-
@for (rowData of mergedDataInView; track rowData.record;) {
35-
<igx-tree-grid-row class="igx-grid__tr--merged-top" [gridID]="id" [index]="rowData.index" [treeRow]="rowData.record.recordRef" [metaData]="rowData.record" [style.top.px]="getMergeCellOffset(rowData)"
36-
[ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowData.index:hasColumnLayouts:isRecordMerged(rowData):row.treeRow.isFilteredOutParent:rowData:pipeTrigger"
37-
[ngStyle]="rowStyles | igxGridRowStyles:rowData:rowData.index:pipeTrigger" #row>
38-
</igx-tree-grid-row>
34+
@if (mergedDataInView && mergedDataInView.length > 0) {
35+
<div igxScrollInertia
36+
[IgxScrollInertiaScrollContainer]="this.verticalScrollContainer.dc.instance.scrollContainer"
37+
[IgxScrollInertiaDirection]="this.verticalScrollContainer.dc.instance.scrollDirection">
38+
@for (rowData of mergedDataInView; track rowData.record;) {
39+
<igx-tree-grid-row class="igx-grid__tr--merged-top" [gridID]="id" [index]="rowData.index" [treeRow]="rowData.record.recordRef" [metaData]="rowData.record" [style.top.px]="getMergeCellOffset(rowData)"
40+
[ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowData.index:hasColumnLayouts:isRecordMerged(rowData):row.treeRow.isFilteredOutParent:rowData:pipeTrigger"
41+
[ngStyle]="rowStyles | igxGridRowStyles:rowData:rowData.index:pipeTrigger" #row>
42+
</igx-tree-grid-row>
43+
}
44+
</div>
3945
}
4046

4147
<ng-template #pinnedRecordsTemplate>

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ import { IgxGridHeaderRowComponent } from '../headers/grid-header-row.component'
8484
import { IgxTextHighlightService } from '../../directives/text-highlight/text-highlight.service';
8585
import { IgxGridCellMergePipe } from '../grid/grid.pipes';
8686
import { DefaultTreeGridMergeStrategy, IGridMergeStrategy } from '../../data-operations/merge-strategy';
87+
import { IgxScrollInertiaDirective } from '../../directives/scroll-inertia/scroll_inertia.directive';
8788

8889
let NEXT_ID = 0;
8990

@@ -171,7 +172,8 @@ let NEXT_ID = 0;
171172
IgxTreeGridNormalizeRecordsPipe,
172173
IgxTreeGridAddRowPipe,
173174
IgxStringReplacePipe,
174-
IgxGridCellMergePipe
175+
IgxGridCellMergePipe,
176+
IgxScrollInertiaDirective
175177
],
176178
schemas: [CUSTOM_ELEMENTS_SCHEMA]
177179
})

0 commit comments

Comments
 (0)