Skip to content

Commit 2b5c0d6

Browse files
ChronosSFChronosSF
authored
Merge pull request #8262 from IgniteUI/mkirova/jump-to-addRow
Row Adding jump to added row - Integration w/ features
2 parents e7410aa + ad9f44c commit 2b5c0d6

File tree

8 files changed

+90
-23
lines changed

8 files changed

+90
-23
lines changed

‎projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1010,7 +1010,7 @@ describe('igxExpansionPanel', () => {
10101010
expect(grid.attributes.getNamedItem('ng-reflect-auto-generate').nodeValue).toEqual('true');
10111011
expect(grid.attributes.getNamedItem('ng-reflect-width').nodeValue).toEqual(fixture.componentInstance.width);
10121012
expect(grid.attributes.getNamedItem('ng-reflect-height').nodeValue).toEqual(fixture.componentInstance.height);
1013-
expect(grid.childElementCount).toEqual(8); // +1 because of add row snackbar
1013+
expect(grid.childElementCount).toEqual(7);
10141014
}));
10151015
it('Should apply all appropriate classes on combo initialization_image + text content', fakeAsync(() => {
10161016
const fixture: ComponentFixture<IgxExpansionPanelImageComponent> = TestBed.createComponent(IgxExpansionPanelImageComponent);

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

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2712,7 +2712,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
27122712
private _rowSelectionMode: GridSelectionMode = GridSelectionMode.none;
27132713
private _columnSelectionMode: GridSelectionMode = GridSelectionMode.none;
27142714

2715-
private lastAddedRowId;
2715+
private lastAddedRowIndex;
27162716

27172717
private rowEditPositioningStrategy = new RowEditPositionStrategy({
27182718
horizontalDirection: HorizontalAlignment.Right,
@@ -3274,7 +3274,8 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
32743274
});
32753275

32763276
this.addRowSnackbar?.onAction.subscribe(() => {
3277-
this.navigateTo(this.lastAddedRowId, 0);
3277+
const rec = this.filteredSortedData[this.lastAddedRowIndex];
3278+
this.scrollTo(rec, 0);
32783279
this.addRowSnackbar.hide();
32793280
});
32803281
}
@@ -5881,9 +5882,9 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
58815882
/**
58825883
* @hidden @internal
58835884
*/
5884-
public showSnackbarFor(id: number) {
5885-
this.addRowSnackbar.actionText = id === -1 ? '' : this.snackbarActionText;
5886-
this.lastAddedRowId = id;
5885+
public showSnackbarFor(index: number) {
5886+
this.addRowSnackbar.actionText = index === -1 ? '' : this.snackbarActionText;
5887+
this.lastAddedRowIndex = index;
58875888
this.addRowSnackbar.show();
58885889
}
58895890

@@ -6559,9 +6560,10 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
65596560
if (commit) {
65606561
this.onRowAdded.pipe(first()).subscribe(rowData => {
65616562
// A check whether the row is in the current view
6562-
const index = this.findRecordIndexInView(rowData);
6563-
const shouldScroll = this.navigation.shouldPerformVerticalScroll(index, 0);
6564-
const showIndex = shouldScroll ? index : -1;
6563+
const viewIndex = this.findRecordIndexInView(rowData);
6564+
const dataIndex = this.filteredSortedData.findIndex(data => data[this.primaryKey] === rowData[this.primaryKey]);
6565+
const isInView = viewIndex !== -1 && !this.navigation.shouldPerformVerticalScroll(viewIndex, 0);
6566+
const showIndex = isInView ? -1 : dataIndex;
65656567
this.showSnackbarFor(showIndex);
65666568
});
65676569
this.gridAPI.submit_add_value();
@@ -6594,7 +6596,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
65946596
}
65956597

65966598
protected findRecordIndexInView(rec) {
6597-
return this.dataView.findIndex(data => data === rec);
6599+
return this.dataView.findIndex(data => data[this.primaryKey] === rec[this.primaryKey]);
65986600
}
65996601

66006602
/**

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

Lines changed: 65 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
import { By } from '@angular/platform-browser';
1212
import { IgxActionStripComponent } from '../../action-strip/action-strip.component';
1313
import { IgxActionStripModule } from '../../action-strip/action-strip.module';
14-
import { UIInteractions } from '../../test-utils/ui-interactions.spec';
14+
import { UIInteractions, wait } from '../../test-utils/ui-interactions.spec';
1515

1616
describe('IgxGrid - Row Adding #grid', () => {
1717
let fixture;
@@ -111,5 +111,69 @@ describe('IgxGrid - Row Adding #grid', () => {
111111
expect(grid.getRowByIndex(1).addRow).toBeFalse();
112112
});
113113

114+
it('should navigate to added row on snackbar button click.', async() => {
115+
const rows = grid.rowList.toArray();
116+
const dataCount = grid.data.length;
117+
rows[0].beginAddRow();
118+
fixture.detectChanges();
119+
120+
grid.endEdit(true);
121+
fixture.detectChanges();
122+
123+
// check row is in data
124+
expect(grid.data.length).toBe(dataCount + 1);
125+
126+
const addedRec = grid.data[grid.data.length - 1];
127+
128+
grid.addRowSnackbar.triggerAction();
129+
fixture.detectChanges();
130+
131+
await wait(100);
132+
fixture.detectChanges();
133+
134+
// check added row is rendered and is in view
135+
const row = grid.getRowByKey(addedRec[grid.primaryKey]);
136+
expect(row).not.toBeNull();
137+
const gridOffsets = grid.tbody.nativeElement.getBoundingClientRect();
138+
const rowOffsets = row.nativeElement.getBoundingClientRect();
139+
expect(rowOffsets.top >= gridOffsets.top && rowOffsets.bottom <= gridOffsets.bottom).toBeTruthy();
140+
});
141+
142+
it('should navigate to added row on snackbar button click when row is not in current view.', async() => {
143+
grid.paging = true;
144+
grid.perPage = 5;
145+
fixture.detectChanges();
146+
147+
const rows = grid.rowList.toArray();
148+
const dataCount = grid.data.length;
149+
150+
rows[0].beginAddRow();
151+
fixture.detectChanges();
152+
153+
grid.endEdit(true);
154+
fixture.detectChanges();
155+
156+
// check row is in data
157+
expect(grid.data.length).toBe(dataCount + 1);
158+
159+
const addedRec = grid.data[grid.data.length - 1];
160+
161+
grid.addRowSnackbar.triggerAction();
162+
fixture.detectChanges();
163+
164+
await wait(100);
165+
fixture.detectChanges();
166+
167+
// check page is correct
168+
expect(grid.page).toBe(5);
169+
170+
// check added row is rendered and is in view
171+
const row = grid.getRowByKey(addedRec[grid.primaryKey]);
172+
expect(row).not.toBeNull();
173+
const gridOffsets = grid.tbody.nativeElement.getBoundingClientRect();
174+
const rowOffsets = row.nativeElement.getBoundingClientRect();
175+
expect(rowOffsets.top >= gridOffsets.top && rowOffsets.bottom <= gridOffsets.bottom).toBeTruthy();
176+
});
177+
114178
});
115179
});

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -209,6 +209,10 @@
209209
</div>
210210
<div class="igx-grid__tbody-scrollbar-end" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>
211211
</div>
212+
213+
<div class="igx-grid__addrow-snackbar">
214+
<igx-snackbar #addRowSnackbar [actionText]="snackbarActionText" [displayTime]='snackbarDisplayTime'>{{snackbarLabel}}</igx-snackbar>
215+
</div>
212216
</div>
213217

214218

@@ -231,9 +235,6 @@
231235
</div>
232236
<div class="igx-grid__scroll-end" [style.float]='"right"' [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]="pinnedWidth === 0 || isPinningToStart"></div>
233237
</div>
234-
<div class="igx-grid__addrow-snackbar">
235-
<igx-snackbar #addRowSnackbar [actionText]="snackbarActionText" [displayTime]='snackbarDisplayTime'>{{snackbarLabel}}</igx-snackbar>
236-
</div>
237238

238239
<div class="igx-grid__footer" #footer>
239240
<ng-content select="igx-grid-footer"></ng-content>

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -168,6 +168,9 @@
168168
</div>
169169
<div class="igx-grid__tbody-scrollbar-end" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>
170170
</div>
171+
<div class="igx-grid__addrow-snackbar">
172+
<igx-snackbar #addRowSnackbar [actionText]="snackbarActionText" [displayTime]='snackbarDisplayTime'>{{snackbarLabel}}</igx-snackbar>
173+
</div>
171174
</div>
172175

173176

@@ -191,10 +194,6 @@
191194
<div class="igx-grid__scroll-end" [style.float]='"right"' [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]="pinnedWidth === 0 || isPinningToStart"></div>
192195
</div>
193196

194-
<div class="igx-grid__addrow-snackbar">
195-
<igx-snackbar #addRowSnackbar [actionText]="snackbarActionText" [displayTime]='snackbarDisplayTime'>{{snackbarLabel}}</igx-snackbar>
196-
</div>
197-
198197
<div class="igx-grid__footer" #footer>
199198
<ng-content select="igx-grid-footer"></ng-content>
200199
<ng-container *ngIf="paging && totalRecords">

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,9 @@
143143
</div>
144144
<div class="igx-grid__tbody-scrollbar-end" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>
145145
</div>
146+
<div class="igx-grid__addrow-snackbar">
147+
<igx-snackbar #addRowSnackbar [actionText]="snackbarActionText" [displayTime]='snackbarDisplayTime'>{{snackbarLabel}}</igx-snackbar>
148+
</div>
146149
</div>
147150

148151
<div class="igx-grid__tfoot" role="rowgroup" [style.height.px]='summariesHeight' tabindex="0" [attr.aria-activedescendant]="activeDescendant" (focus)="navigation.focusFirstCell(false)" (keydown)="navigation.summaryNav($event)" #tfoot>
@@ -164,10 +167,6 @@
164167
<div class="igx-grid__scroll-end" [style.float]='"right"' [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]="pinnedWidth === 0 || isPinningToStart"></div>
165168
</div>
166169

167-
<div class="igx-grid__addrow-snackbar">
168-
<igx-snackbar #addRowSnackbar [actionText]="snackbarActionText" [displayTime]='snackbarDisplayTime'>{{snackbarLabel}}</igx-snackbar>
169-
</div>
170-
171170
<div class="igx-grid__footer" #footer>
172171
<ng-content select="igx-grid-footer"></ng-content>
173172
<ng-container *ngIf="paging && totalRecords">

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -436,7 +436,7 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy
436436
}
437437

438438
protected findRecordIndexInView(rec) {
439-
return this.dataView.findIndex(x => x.data === rec);
439+
return this.dataView.findIndex(x => x.data[this.primaryKey] === rec[this.primaryKey]);
440440
}
441441

442442
private cloneMap(mapIn: Map<any, boolean>): Map<any, boolean> {

‎src/app/grid-add-row/grid-add-row.sample.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
#grid
44
[data]="data"
55
[width]="'800px'"
6+
[paging]="true"
67
[height]="'500px'"
78
[primaryKey]="'ID'"
89
(mouseleave)="onMouseLeave(actionstrip)"
@@ -17,6 +18,7 @@
1718
[width]="c.width"
1819
[pinned]="c.pinned"
1920
[hidden]="c.hidden"
21+
[groupable]='true'
2022
>
2123
</igx-column>
2224

0 commit comments

Comments
 (0)