Skip to content

Commit dc336b9

Browse files
kdinevkdinev
authored
Merge branch 'master' into mvenkov/handle_correctly_target_as_point
2 parents b932055 + de253a6 commit dc336b9

File tree

16 files changed

+154
-48
lines changed

16 files changed

+154
-48
lines changed

‎projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ export class IgxGridEditingActionsComponent extends IgxGridActionsBaseDirective
104104
const context = this.strip.context;
105105
const grid = context.grid;
106106
if (!grid.rowEditable) {
107-
console.warn('The grid must be in row edit mode to perform row adding!');
107+
console.warn('The grid must use row edit mode to perform row adding! Please set rowEditable to true.');
108108
return;
109109
}
110110
grid.beginAddRowByIndex(context.rowID, context.index, asChild);

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -370,9 +370,9 @@ export class IgxGridAddRowPipe implements PipeTransform {
370370

371371
constructor(private gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>) { }
372372

373-
transform(collection: any, pipeTrigger: number) {
373+
transform(collection: any, isPinned = false, pipeTrigger: number) {
374374
const grid = this.gridAPI.grid;
375-
if (!grid.rowEditable || !grid.addRowParent || grid.cancelAddMode) {
375+
if (!grid.rowEditable || !grid.addRowParent || grid.cancelAddMode || isPinned !== grid.addRowParent.isPinned) {
376376
return collection;
377377
}
378378
const copy = collection.slice(0);
@@ -383,7 +383,11 @@ export class IgxGridAddRowPipe implements PipeTransform {
383383
addRow: true
384384
};
385385
copy.splice(parentIndex + 1, 0, rec);
386-
grid.unpinnedRecords = copy;
386+
if (isPinned) {
387+
grid.pinnedRecords = copy;
388+
} else {
389+
grid.unpinnedRecords = copy;
390+
}
387391
return copy;
388392
}
389393
}

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

Lines changed: 38 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4082,33 +4082,43 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
40824082
* @hidden @internal
40834083
*/
40844084
public beginAddRowByIndex(rowID: any, index: number, asChild?: boolean) {
4085+
if (!this.rowEditable) {
4086+
console.warn('The grid must use row edit mode to perform row adding! Please set rowEditable to true.');
4087+
return;
4088+
}
40854089
this.endEdit(true);
40864090
this.cancelAddMode = false;
4091+
const isInPinnedArea = this.isRecordPinnedByViewIndex(index);
4092+
const pinIndex = this.pinnedRecords.findIndex(x => x[this.primaryKey] === rowID);
4093+
const unpinIndex = this.getUnpinnedIndexById(rowID);
40874094

40884095
if (this.expansionStates.get(rowID)) {
40894096
this.collapseRow(rowID);
40904097
}
40914098

40924099
this.addRowParent = {
40934100
rowID: rowID,
4094-
index: index,
4095-
asChild: asChild
4101+
index: isInPinnedArea ? pinIndex : unpinIndex,
4102+
asChild: asChild,
4103+
isPinned: isInPinnedArea
40964104
};
4097-
this.verticalScrollContainer.onDataChanged.pipe(first()).subscribe(() => {
4098-
this.cdr.detectChanges();
4099-
const newRowIndex = this.addRowParent.index + 1;
4100-
// ensure adding row is in view.
4101-
const shouldScroll = this.navigation.shouldPerformVerticalScroll(newRowIndex, -1);
4102-
if (shouldScroll) {
4103-
this.navigateTo(newRowIndex, -1);
4104-
}
4105-
const row = this.getRowByIndex(newRowIndex);
4106-
const cell = row.cells.find(c => c.editable);
4105+
this._pipeTrigger++;
4106+
this.cdr.detectChanges();
4107+
if (isInPinnedArea) {
4108+
this.calculateGridHeight();
4109+
}
4110+
const newRowIndex = this.addRowParent.index + 1;
4111+
// ensure adding row is in view.
4112+
const shouldScroll = this.navigation.shouldPerformVerticalScroll(newRowIndex, -1);
4113+
if (shouldScroll) {
4114+
this.navigateTo(newRowIndex, -1);
4115+
}
4116+
const row = this.getRowByIndex(index + 1);
4117+
const cell = row.cells.find(c => c.editable);
4118+
if (cell) {
41074119
cell.setEditMode(true);
41084120
cell.activate();
4109-
});
4110-
this._pipeTrigger++;
4111-
this.notifyChanges();
4121+
}
41124122
}
41134123

41144124
/**
@@ -4404,6 +4414,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
44044414
this.endEdit(true);
44054415
this.selectionService.clearHeaderCBState();
44064416
this.summaryService.clearSummaryCache();
4417+
this.cdr.detectChanges();
44074418
}
44084419

44094420
// TODO: We have return values here. Move them to event args ??
@@ -6594,9 +6605,11 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
65946605
return;
65956606
}
65966607
if (commit) {
6597-
this.onRowAdded.pipe(first()).subscribe(rowData => {
6608+
this.onRowAdded.pipe(first()).subscribe((args: IRowDataEventArgs) => {
6609+
const rowData = args.data;
6610+
const pinnedIndex = this.pinnedRecords.findIndex(x => x[this.primaryKey] === rowData[this.primaryKey]);
65986611
// A check whether the row is in the current view
6599-
const viewIndex = this.findRecordIndexInView(rowData);
6612+
const viewIndex = pinnedIndex !== -1 ? pinnedIndex : this.findRecordIndexInView(rowData);
66006613
const dataIndex = this.filteredSortedData.findIndex(data => data[this.primaryKey] === rowData[this.primaryKey]);
66016614
const isInView = viewIndex !== -1 && !this.navigation.shouldPerformVerticalScroll(viewIndex, 0);
66026615
const showIndex = isInView ? -1 : dataIndex;
@@ -6605,6 +6618,9 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
66056618
this.gridAPI.submit_add_value();
66066619
this.gridAPI.addRowToData(row.data, this.addRowParent.asChild ? this.addRowParent.rowID : undefined);
66076620
this.crudService.endRowEdit();
6621+
if (this.addRowParent.isPinned) {
6622+
this.pinRow(row.id);
6623+
}
66086624
this.addRowParent = null;
66096625
} else {
66106626
this.crudService.exitCellEdit();
@@ -6615,7 +6631,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
66156631
this._pipeTrigger++;
66166632
if (!this.cancelAddMode) {
66176633
this.cdr.detectChanges();
6618-
this.onRowAdded.emit(row.data);
6634+
this.onRowAdded.emit({ data: row.data});
66196635
}
66206636
}
66216637

@@ -6640,6 +6656,10 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
66406656
return this.dataView.findIndex(data => data[this.primaryKey] === rec[this.primaryKey]);
66416657
}
66426658

6659+
protected getUnpinnedIndexById(id) {
6660+
return this.unpinnedRecords.findIndex(x => x[this.primaryKey] === id);
6661+
}
6662+
66436663
/**
66446664
* @hidden
66456665
*/

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

Lines changed: 47 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { By } from '@angular/platform-browser';
1212
import { IgxActionStripComponent } from '../../action-strip/action-strip.component';
1313
import { IgxActionStripModule } from '../../action-strip/action-strip.module';
1414
import { UIInteractions, wait } from '../../test-utils/ui-interactions.spec';
15+
import { IgxGridRowComponent } from './grid-row.component';
1516

1617
describe('IgxGrid - Row Adding #grid', () => {
1718
const SUMMARY_ROW = 'igx-grid-summary-row';
@@ -20,7 +21,7 @@ describe('IgxGrid - Row Adding #grid', () => {
2021
let gridContent: DebugElement;
2122
let actionStrip: IgxActionStripComponent;
2223
configureTestSuite();
23-
beforeAll(async(() => {
24+
beforeAll( async(() => {
2425
TestBed.configureTestingModule({
2526
declarations: [
2627
IgxAddRowComponent
@@ -133,6 +134,51 @@ describe('IgxGrid - Row Adding #grid', () => {
133134
expect(grid.getRowByIndex(1).addRow).toBeFalse();
134135
});
135136

137+
it('Should allow adding row from pinned row.', () => {
138+
let row = grid.getRowByIndex(0);
139+
row.pin();
140+
fixture.detectChanges();
141+
expect(grid.pinnedRecords.length).toBe(1);
142+
143+
row = grid.getRowByIndex(0);
144+
row.beginAddRow();
145+
fixture.detectChanges();
146+
147+
// add row should be pinned
148+
const addRow = grid.getRowByIndex(1) as IgxGridRowComponent;
149+
expect(addRow.addRow).toBe(true);
150+
expect(grid.pinnedRows[1]).toBe(addRow);
151+
152+
grid.endEdit(true);
153+
fixture.detectChanges();
154+
155+
// added record should be pinned.
156+
expect(grid.pinnedRecords.length).toBe(2);
157+
expect(grid.pinnedRecords[1]).toBe(grid.data[grid.data.length - 1]);
158+
159+
});
160+
it('Should allow adding row from ghost row.', () => {
161+
const row = grid.getRowByIndex(0);
162+
row.pin();
163+
fixture.detectChanges();
164+
expect(grid.pinnedRecords.length).toBe(1);
165+
166+
const ghostRow = grid.getRowByIndex(1);
167+
ghostRow.beginAddRow();
168+
fixture.detectChanges();
169+
170+
// add row should be unpinned
171+
const addRow = grid.getRowByIndex(2);
172+
expect(addRow.addRow).toBe(true);
173+
expect(grid.pinnedRows.length).toBe(1);
174+
175+
grid.endEdit(true);
176+
fixture.detectChanges();
177+
178+
// added record should be unpinned.
179+
expect(grid.pinnedRecords.length).toBe(1);
180+
expect(grid.unpinnedRecords[grid.unpinnedRecords.length - 1]).toBe(grid.data[grid.data.length - 1]);
181+
});
136182
it('should navigate to added row on snackbar button click.', async() => {
137183
const rows = grid.rowList.toArray();
138184
const dataCount = grid.data.length;

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,8 @@
117117
| visibleColumns:hasVisibleColumns
118118
| gridRowPinning:id:true:pipeTrigger
119119
| gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true
120-
| gridSort:sortingExpressions:sortStrategy:id:pipeTrigger:true as pinnedData'>
120+
| gridSort:sortingExpressions:sortStrategy:id:pipeTrigger:true
121+
| gridAddRow:true:pipeTrigger as pinnedData'>
121122
<div #pinContainer *ngIf='pinnedData.length > 0'
122123
[ngClass]="{
123124
'igx-grid__tr--pinned-bottom': !isRowPinningToTop,
@@ -141,7 +142,7 @@
141142
| gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger
142143
| gridDetails:hasDetails:expansionStates:pipeTrigger
143144
| gridRowPinning:id:false:pipeTrigger
144-
| gridAddRow:pipeTrigger"
145+
| gridAddRow:false:pipeTrigger"
145146
let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll'
146147
[igxForContainerSize]='calcHeight'
147148
[igxForItemSize]="hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight"
@@ -161,8 +162,8 @@
161162
<igx-grid-row [gridID]="id" [index]="rowIndex" [rowData]="rowData" [disabled]="disabledRow" [addRow]="isAddRow" #row>
162163
</igx-grid-row>
163164
</ng-template>
164-
<ng-template #pinned_record_template let-rowIndex="index" let-rowData>
165-
<igx-grid-row [gridID]="id" [index]="rowIndex" [rowData]="rowData" #row #pinnedRow>
165+
<ng-template #pinned_record_template let-rowIndex="index" let-rowData let-isAddRow="addRow">
166+
<igx-grid-row [gridID]="id" [index]="rowIndex" [rowData]="rowData" [addRow]="isAddRow" #row #pinnedRow>
166167
</igx-grid-row>
167168
</ng-template>
168169
<ng-template #group_template let-rowIndex="index" let-rowData>

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,8 @@
9999
| visibleColumns:hasVisibleColumns
100100
| gridRowPinning:id:true:pipeTrigger
101101
| gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true
102-
| gridSort:sortingExpressions:sortStrategy:id:pipeTrigger:true as pinnedData">
102+
| gridSort:sortingExpressions:sortStrategy:id:pipeTrigger:true
103+
| gridAddRow:true:pipeTrigger as pinnedData">
103104
<div #pinContainer *ngIf='pinnedData.length > 0' class='igx-grid__tr--pinned'
104105
[ngClass]="{ 'igx-grid__tr--pinned-bottom': !isRowPinningToTop, 'igx-grid__tr--pinned-top': isRowPinningToTop }"
105106
[style.width.px]='calcWidth'>
@@ -120,7 +121,7 @@
120121
| gridHierarchicalPaging:page:perPage:id:pipeTrigger
121122
| gridHierarchical:expansionStates:id:primaryKey:childLayoutKeys:pipeTrigger
122123
| gridRowPinning:id:false:pipeTrigger
123-
| gridAddRow:pipeTrigger"
124+
| gridAddRow:false:pipeTrigger"
124125
[igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll'
125126
[igxForContainerSize]='calcHeight' [igxForItemSize]="renderedRowHeight" [igxForTrackBy]='trackChanges'
126127
#verticalScrollContainer (onChunkPreload)="dataLoading($event)">
@@ -136,8 +137,8 @@
136137
</igx-hierarchical-grid-row>
137138
</ng-template>
138139

139-
<ng-template #pinned_hierarchical_record_template let-rowIndex="index" let-rowData>
140-
<igx-hierarchical-grid-row [gridID]="id" [index]="rowIndex" [rowData]="rowData" #row #pinnedRow>
140+
<ng-template #pinned_hierarchical_record_template let-rowIndex="index" let-rowData let-isAddRow="addRow">
141+
<igx-hierarchical-grid-row [gridID]="id" [index]="rowIndex" [rowData]="rowData" [addRow]="isAddRow" #row #pinnedRow>
141142
</igx-hierarchical-grid-row>
142143
</ng-template>
143144
<ng-template #child_record_template let-rowIndex="index" let-rowData>

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
44
import { IgxHierarchicalGridModule } from './public_api';
55
import { Component, ViewChild, DebugElement} from '@angular/core';
66
import { IgxHierarchicalGridComponent } from './hierarchical-grid.component';
7-
import { wait, UIInteractions } from '../../test-utils/ui-interactions.spec';
7+
import { wait, UIInteractions, waitForSelectionChange, waitForGridScroll } from '../../test-utils/ui-interactions.spec';
88
import { IgxRowIslandComponent } from './row-island.component';
99
import { By } from '@angular/platform-browser';
1010
import { IgxHierarchicalRowComponent } from './hierarchical-row.component';
@@ -193,7 +193,8 @@ describe('IgxHierarchicalGrid Basic Navigation #hGrid', () => {
193193
const childGridContent = fixture.debugElement.queryAll(By.css(GRID_CONTENT_CLASS))[1];
194194
UIInteractions.triggerEventHandlerKeyDown('arrowdown', childGridContent, false, false, true);
195195
fixture.detectChanges();
196-
await wait(1000);
196+
// wait for parent grid to complete scroll to child cell.
197+
await waitForGridScroll(hierarchicalGrid);
197198
fixture.detectChanges();
198199

199200
const selectedCell = fixture.componentInstance.selectedCell;
@@ -368,7 +369,7 @@ describe('IgxHierarchicalGrid Basic Navigation #hGrid', () => {
368369

369370
UIInteractions.triggerEventHandlerKeyDown('end', baseHGridContent, false, false, true);
370371
fixture.detectChanges();
371-
await wait(1000);
372+
await waitForSelectionChange(hierarchicalGrid);
372373
fixture.detectChanges();
373374

374375
const lastDataCell = hierarchicalGrid.getCellByKey(19, 'childData2');

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

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -265,10 +265,6 @@ export class IgxTreeGridAPIService extends GridBaseAPIService<IgxTreeGridCompone
265265
}
266266
}
267267
} else {
268-
if (this.grid.primaryKey && this.grid.foreignKey) {
269-
const rowID = data[this.grid.foreignKey];
270-
this.grid.summaryService.clearSummaryCache({rowID: rowID});
271-
}
272268
super.addRowToData(data);
273269
}
274270
}

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,12 @@ export class IgxTreeGridRowComponent extends IgxRowDirective<IgxTreeGridComponen
5050
* @hidden
5151
*/
5252
public get isRoot(): boolean {
53-
return this.treeRow.level === 0;
53+
let treeRec = this.treeRow;
54+
const isPinnedArea = this.pinned && !this.disabled;
55+
if (isPinnedArea) {
56+
treeRec = this.grid.unpinnedRecords.find(x => x.data === this.rowData);
57+
}
58+
return treeRec.level === 0;
5459
}
5560

5661
/**

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,8 @@
8181
| treeGridNormalizeRecord:pipeTrigger
8282
| gridRowPinning:id:true:pipeTrigger
8383
| treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true
84-
| treeGridSorting:sortingExpressions:sortStrategy:id:pipeTrigger:true as pinnedData'>
84+
| treeGridSorting:sortingExpressions:sortStrategy:id:pipeTrigger:true
85+
| gridAddRow:true:pipeTrigger as pinnedData'>
8586
<div #pinContainer *ngIf='pinnedData.length > 0'
8687
[ngClass]="{
8788
'igx-grid__tr--pinned-bottom': !isRowPinningToTop,
@@ -106,7 +107,7 @@
106107
| treeGridPaging:page:perPage:id:pipeTrigger
107108
| treeGridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:showSummaryOnCollapse:id:pipeTrigger:summaryPipeTrigger
108109
| gridRowPinning:id:false:pipeTrigger
109-
| gridAddRow:pipeTrigger"
110+
| gridAddRow:false:pipeTrigger"
110111
let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll'
111112
[igxForContainerSize]='calcHeight' [igxForItemSize]="renderedRowHeight" #verticalScrollContainer>
112113
<ng-template [igxTemplateOutlet]='isSummaryRow(rowData) ? summary_template : record_template'
@@ -119,8 +120,8 @@
119120
<igx-tree-grid-row [gridID]="id" [index]="rowIndex" [treeRow]="rowData" [disabled]="disabledRow" [addRow]="isAddRow" #row>
120121
</igx-tree-grid-row>
121122
</ng-template>
122-
<ng-template #pinned_record_template let-rowIndex="index" let-rowData>
123-
<igx-tree-grid-row [gridID]="id" [index]="rowIndex" [treeRow]="rowData" #row #pinnedRow>
123+
<ng-template #pinned_record_template let-rowIndex="index" let-rowData let-isAddRow="addRow">
124+
<igx-tree-grid-row [gridID]="id" [index]="rowIndex" [treeRow]="rowData" [addRow]="isAddRow" #row #pinnedRow>
124125
</igx-tree-grid-row>
125126
</ng-template>
126127
<ng-template #summary_template let-rowIndex="index" let-rowData>

0 commit comments

Comments
 (0)