Skip to content

Commit fc7584a

Browse files
MayaKirovaMayaKirova
authored
Merge pull request #17220 from IgniteUI/mkirova/fix-17215
fix(igxGrid): Hide overlays on scroll + special handling for row edit…
1 parent 415b8e7 commit fc7584a

4 files changed

Lines changed: 39 additions & 17 deletions

File tree

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

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3717,10 +3717,10 @@ export abstract class IgxGridBaseDirective implements GridType,
37173717
filter(() => !this._init),
37183718
throttle(() =>
37193719
this.throttleTime$.pipe(
3720-
take(1),
3721-
switchMap(time => timer(time, this.throttleScheduler))
3720+
take(1),
3721+
switchMap(time => timer(time, this.throttleScheduler))
37223722
)
3723-
),
3723+
),
37243724
destructor
37253725
)
37263726
.subscribe((event) => {
@@ -3767,7 +3767,7 @@ export abstract class IgxGridBaseDirective implements GridType,
37673767
const overlaySettings = this.overlayService.getOverlayById(event.id)?.settings;
37683768

37693769
// do not hide the advanced filtering overlay on scroll
3770-
if (this._advancedFilteringOverlayId === event.id) {
3770+
if (this._advancedFilteringOverlayId === event.id) {
37713771
const instance = event.componentRef.instance as IgxAdvancedFilteringDialogComponent;
37723772
if (instance) {
37733773
instance.lastActiveNode = this.navigation.activeNode;
@@ -3776,12 +3776,14 @@ export abstract class IgxGridBaseDirective implements GridType,
37763776
return;
37773777
}
37783778

3779-
// do not hide the overlay if it's attached to a row
3780-
if (this.rowEditingOverlay?.overlayId === event.id) {
3779+
const inRow = (overlaySettings?.target as HTMLElement)?.classList.contains("igx-grid__tr");
3780+
// do not hide the overlay if it's attached to a row on scroll
3781+
if (inRow) {
37813782
return;
37823783
}
37833784

3784-
if (overlaySettings?.outlet === this.outlet && this.overlayIDs.indexOf(event.id) === -1) {
3785+
const isInGrid = overlaySettings?.target instanceof Node && this.tbody.nativeElement.contains(overlaySettings?.target);
3786+
if (isInGrid && this.overlayIDs.indexOf(event.id) === -1) {
37853787
this.overlayIDs.push(event.id);
37863788
}
37873789
});
@@ -4047,8 +4049,8 @@ export abstract class IgxGridBaseDirective implements GridType,
40474049
const activeRow = this.navigation.activeNode?.row;
40484050

40494051
const selectedCellIndexes = this.selectionService.selection
4050-
? Array.from(this.selectionService.selection.keys())
4051-
: [];
4052+
? Array.from(this.selectionService.selection.keys())
4053+
: [];
40524054
this._activeRowIndexes = [activeRow, ...selectedCellIndexes];
40534055
return this._activeRowIndexes;
40544056
}

‎projects/igniteui-angular/grids/grid/src/grid-row-editing.spec.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -491,6 +491,21 @@ describe('IgxGrid - Row Editing #grid', () => {
491491
cell.editMode = false;
492492
});
493493

494+
it('Overlay position: Should keep row editing overlay open on vertical scroll', fakeAsync(() => {
495+
cell = grid.getCellByColumn(0, 'ProductName');
496+
cell.editMode = true;
497+
fix.detectChanges();
498+
499+
expect(grid.rowEditingOverlay.collapsed).toBeFalse();
500+
501+
(grid as any).verticalScrollHandler({ target: grid.verticalScrollContainer.getScroll() });
502+
tick();
503+
fix.detectChanges();
504+
505+
expect(GridFunctions.getRowEditingOverlay(fix)).toBeTruthy();
506+
expect(grid.rowEditingOverlay.collapsed).toBeFalse();
507+
}));
508+
494509
it('should end row editing when clearing or applying advanced filter', () => {
495510
fix.detectChanges();
496511
const row = grid.gridAPI.get_row_by_index(2);

‎src/app/hierarchical-grid/hierarchical-grid.sample.html‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ <h4 class="sample-title">Sample One</h4>
88
<button igxButton="contained" (click)="getState()">Get state</button>
99
<igx-hierarchical-grid [batchEditing]="true" #grid1 [data]="localData" [showExpandAll]="true" [pinning]="{rows: 0}" class="hgrid"
1010
[rowSelection]="selectionMode" [autoGenerate]="false" [allowFiltering]="true"
11-
[rowDraggable]="true" [height]="'800px'" filterMode="excelStyleFilter" [width]="'100%'" [expandChildren]="rootExpanded"
11+
[rowDraggable]="true" [height]="'500px'" filterMode="excelStyleFilter" [width]="'100%'" [expandChildren]="rootExpanded"
1212
#hGrid [rowClasses]="rowClasses">
1313
<igx-grid-excel-style-filtering [minHeight]="'200px'" [maxHeight]="'500px'">
1414
<igx-excel-style-column-operations>
@@ -53,9 +53,9 @@ <h4 class="sample-title">Sample One</h4>
5353
<ng-template igxRowCollapsedIndicator>
5454
<igx-icon role="button" family="default" name="add"></igx-icon>
5555
</ng-template>
56-
<igx-row-island [rowDraggable]="true" [height]="'400px'" [showExpandAll]="true" [key]="'childData'"
57-
[autoGenerate]="false" [allowFiltering]='true' [rowSelection]='selectionMode' [rowEditable]="true"
58-
[expandChildren]="firstLevelExpanded" #layout1 [allowFiltering]="true" filterMode="excelStyleFilter">
56+
<igx-row-island [primaryKey]="'ID'" [rowEditable]="true" [allowAdvancedFiltering]="true" [rowDraggable]="true" [height]="'400px'" [showExpandAll]="true" [key]="'childData'"
57+
[autoGenerate]="false" [allowFiltering]="true" [rowSelection]="selectionMode"
58+
[expandChildren]="firstLevelExpanded" #layout1 filterMode="excelStyleFilter">
5959
<igx-grid-excel-style-filtering [minHeight]="'200px'" [maxHeight]="'360px'">
6060
<igx-excel-style-column-operations>
6161
<igx-excel-style-header [showPinning]="false" [showHiding]="true">
@@ -66,10 +66,14 @@ <h4 class="sample-title">Sample One</h4>
6666
<igx-excel-style-search></igx-excel-style-search>
6767
</igx-excel-style-filter-operations>
6868
</igx-grid-excel-style-filtering>
69-
69+
<igx-action-strip>
70+
<igx-grid-editing-actions [addRow]="true"></igx-grid-editing-actions>
71+
<igx-grid-pinning-actions></igx-grid-pinning-actions>
72+
</igx-action-strip>
7073
<igx-grid-toolbar *igxGridToolbar>
7174
<igx-grid-toolbar-title>{{ toolbarTitle }}</igx-grid-toolbar-title>
7275
<igx-grid-toolbar-actions>
76+
<igx-grid-toolbar-advanced-filtering></igx-grid-toolbar-advanced-filtering>
7377
<igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
7478
<igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
7579
<igx-grid-toolbar-exporter></igx-grid-toolbar-exporter>
@@ -79,8 +83,8 @@ <h4 class="sample-title">Sample One</h4>
7983
</igx-paginator>
8084
<igx-column field="ID" [hasSummary]="false" [dataType]="'number'"></igx-column>
8185
<igx-column-group header="Information2">
82-
<igx-column field="ChildLevels" [resizable]="true" [groupable]="true"></igx-column>
83-
<igx-column field="ProductName" [resizable]="true" [groupable]="true"></igx-column>
86+
<igx-column field="ChildLevels" [resizable]="true" [groupable]="true" ></igx-column>
87+
<igx-column field="ProductName" [resizable]="true" [groupable]="true" [editable]="true"></igx-column>
8488
</igx-column-group>
8589
<ng-template let-data igxRowDragGhost>
8690
<div class="dragGhost">

‎src/app/hierarchical-grid/hierarchical-grid.sample.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { Component, ViewChild, ChangeDetectorRef, AfterViewInit, HostBinding } f
22
import { GridSearchBoxComponent } from '../grid-search-box/grid-search-box.component';
33
import {
44
IgxRowIslandComponent,
5+
IgxActionStripComponent,
56
IgxHierarchicalGridComponent,
67
IGridCellEventArgs,
78
GridSelectionMode,
@@ -16,7 +17,7 @@ import {
1617
selector: 'app-hierarchical-grid-sample',
1718
styleUrls: ['hierarchical-grid.sample.scss'],
1819
templateUrl: 'hierarchical-grid.sample.html',
19-
imports: [GridSearchBoxComponent, IGX_HIERARCHICAL_GRID_DIRECTIVES, IgxIconComponent, IGX_BUTTON_GROUP_DIRECTIVES]
20+
imports: [GridSearchBoxComponent, IGX_HIERARCHICAL_GRID_DIRECTIVES, IgxIconComponent, IGX_BUTTON_GROUP_DIRECTIVES, IgxActionStripComponent]
2021
})
2122
export class HierarchicalGridSampleComponent implements AfterViewInit {
2223
@HostBinding('style.--ig-size')

0 commit comments

Comments
 (0)