From 041bcc0a126739c976e533fb287bbc98184db184 Mon Sep 17 00:00:00 2001 From: ddincheva Date: Thu, 21 Jun 2018 11:34:55 +0300 Subject: [PATCH 01/11] feat(CellEditing): exit editMode on movingStart and hiding #1629 --- projects/igniteui-angular/src/lib/grid/api.service.ts | 10 +++++----- .../igniteui-angular/src/lib/grid/column.component.ts | 7 ++++++- .../igniteui-angular/src/lib/grid/grid.component.ts | 7 +++++++ 3 files changed, 18 insertions(+), 6 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grid/api.service.ts b/projects/igniteui-angular/src/lib/grid/api.service.ts index 08ac4259288..c4763e7d7a8 100644 --- a/projects/igniteui-angular/src/lib/grid/api.service.ts +++ b/projects/igniteui-angular/src/lib/grid/api.service.ts @@ -149,22 +149,22 @@ export class IgxGridAPIService { public update_cell(id: string, rowSelector, columnID, editValue) { let cellObj; - let rowIndex; + let rowID; const row = this.get_row_by_key(id, rowSelector); const editableCell = this.get_cell_inEditMode(id); if (editableCell) { cellObj = editableCell.cell; - rowIndex = rowSelector; + rowID = editableCell.cellID.rowID; } else if (row) { - rowIndex = row.index; - cellObj = this.get(id).columnList.toArray()[columnID].cells[rowIndex]; + rowID = row.rowID; + cellObj = this.get(id).columnList.toArray()[columnID].cells[row.index]; } if (cellObj) { const args: IGridEditEventArgs = { row: cellObj.row, cell: cellObj, currentValue: cellObj.value, newValue: editValue }; this.get(id).onEditDone.emit(args); const column = this.get(id).columnList.toArray()[columnID]; - this.get(id).data[rowIndex][column.field] = args.newValue; + this.get(id).data[this.get(id).data.indexOf(rowID)][column.field] = args.newValue; this.get(id).refreshSearch(); } } diff --git a/projects/igniteui-angular/src/lib/grid/column.component.ts b/projects/igniteui-angular/src/lib/grid/column.component.ts index 8cae2f8866c..28cd795f6d4 100644 --- a/projects/igniteui-angular/src/lib/grid/column.component.ts +++ b/projects/igniteui-angular/src/lib/grid/column.component.ts @@ -69,8 +69,13 @@ export class IgxColumnComponent implements AfterContentInit { set hidden(value: boolean) { if (this._hidden !== value) { this._hidden = value; + const cellInEditMode = this.gridAPI.get_cell_inEditMode(this.gridID); + if (cellInEditMode) { + if (cellInEditMode.cell.column.field === this.field) { + this.gridAPI.escape_editMode(this.gridID, cellInEditMode.cellID); + } + } this.check(); - if (this.grid) { const activeInfo = IgxTextHighlightDirective.highlightGroupsMap.get(this.grid.id); const oldIndex = activeInfo.columnIndex; diff --git a/projects/igniteui-angular/src/lib/grid/grid.component.ts b/projects/igniteui-angular/src/lib/grid/grid.component.ts index 8539c72c69e..3bd7c6c1e83 100644 --- a/projects/igniteui-angular/src/lib/grid/grid.component.ts +++ b/projects/igniteui-angular/src/lib/grid/grid.component.ts @@ -724,6 +724,13 @@ export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, Af this.onRowDeleted.pipe(takeUntil(this.destroy$)).subscribe(() => this.clearSummaryCache()); this.onFilteringDone.pipe(takeUntil(this.destroy$)).subscribe(() => this.clearSummaryCache()); this.onEditDone.pipe(takeUntil(this.destroy$)).subscribe((editCell) => this.clearSummaryCache(editCell)); + this.onColumnMovingStart.pipe(takeUntil(this.destroy$)).subscribe((source) => { + const editableCell = this.gridAPI.get_cell_inEditMode(this.id); + if (editableCell) { + this.gridAPI.submit_value(this.id); + this.gridAPI.escape_editMode(this.id, editableCell.cellID); + } + }); } public ngAfterContentInit() { From b2d5f317487094d583ecbf7d91a43bdde82e4cf7 Mon Sep 17 00:00:00 2001 From: ddincheva Date: Thu, 21 Jun 2018 11:37:18 +0300 Subject: [PATCH 02/11] chore(CellEditingSample): added moving and hiding on editing sample --- .../grid-cellEditing.component.html | 15 ++++++++------- .../grid-cellEditing.component.ts | 5 +++++ 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/src/app/grid-cellEditing/grid-cellEditing.component.html b/src/app/grid-cellEditing/grid-cellEditing.component.html index 939b7ca3266..2f959e28122 100644 --- a/src/app/grid-cellEditing/grid-cellEditing.component.html +++ b/src/app/grid-cellEditing/grid-cellEditing.component.html @@ -1,27 +1,27 @@ - + - + {{val}} {{row.gridID}} - + - + - + {{val}} - + {{val}} @@ -32,4 +32,5 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/src/app/grid-cellEditing/grid-cellEditing.component.ts b/src/app/grid-cellEditing/grid-cellEditing.component.ts index 0061f7bb852..d8f0b597e6a 100644 --- a/src/app/grid-cellEditing/grid-cellEditing.component.ts +++ b/src/app/grid-cellEditing/grid-cellEditing.component.ts @@ -12,6 +12,7 @@ import { }) export class GridCellEditingComponent { + orderDateHidden = false; @ViewChild('grid1', { read: IgxGridComponent }) public grid1: IgxGridComponent; @@ -1351,4 +1352,8 @@ export class GridCellEditingComponent { } } } + + hideColumn() { + this.orderDateHidden = !this.orderDateHidden; + } } From f43c843f211549b1d1325f84d3be44ccc0803601 Mon Sep 17 00:00:00 2001 From: ddincheva Date: Thu, 21 Jun 2018 14:17:12 +0300 Subject: [PATCH 03/11] fix(CellEditing): update cell when primaryKey is defined #1634 --- projects/igniteui-angular/src/lib/grid/api.service.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grid/api.service.ts b/projects/igniteui-angular/src/lib/grid/api.service.ts index c4763e7d7a8..dd19ad50fed 100644 --- a/projects/igniteui-angular/src/lib/grid/api.service.ts +++ b/projects/igniteui-angular/src/lib/grid/api.service.ts @@ -164,7 +164,12 @@ export class IgxGridAPIService { currentValue: cellObj.value, newValue: editValue }; this.get(id).onEditDone.emit(args); const column = this.get(id).columnList.toArray()[columnID]; - this.get(id).data[this.get(id).data.indexOf(rowID)][column.field] = args.newValue; + if (this.get(id).primaryKey) { + const index = this.get(id).data.map((record) => record[this.get(id).primaryKey]).indexOf(rowSelector); + this.get(id).data[index][column.field] = args.newValue; + } else { + this.get(id).data[this.get(id).data.indexOf(rowID)][column.field] = args.newValue; + } this.get(id).refreshSearch(); } } From 25f59431dd35497f3394cc3568761b20c88f8d11 Mon Sep 17 00:00:00 2001 From: ddincheva Date: Thu, 21 Jun 2018 14:47:03 +0300 Subject: [PATCH 04/11] test(CellEditing): update cell when sorting is applied #1634 --- .../src/lib/grid/cell.spec.ts | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/projects/igniteui-angular/src/lib/grid/cell.spec.ts b/projects/igniteui-angular/src/lib/grid/cell.spec.ts index 635882df08e..72af2449645 100644 --- a/projects/igniteui-angular/src/lib/grid/cell.spec.ts +++ b/projects/igniteui-angular/src/lib/grid/cell.spec.ts @@ -549,6 +549,41 @@ describe('IgxGrid - Cell component', () => { }); })); + it('edit mode - update correct cell when sorting is applied', async(() => { + const fixture = TestBed.createComponent(CellEditingTestComponent); + fixture.detectChanges(); + + const grid = fixture.componentInstance.grid; + grid.sort('age', SortingDirection.Desc); + fixture.detectChanges(); + const cell = grid.getCellByColumn(0, 'fullName'); + const cellDom = fixture.debugElement.queryAll(By.css(CELL_CSS_CLASS))[0]; + let editTemplate; + + fixture.whenStable().then(() => { + fixture.detectChanges(); + + cellDom.triggerEventHandler('dblclick', {}); + return fixture.whenStable(); + }).then(() => { + fixture.detectChanges(); + editTemplate = cellDom.query(By.css('input')); + expect(cell.inEditMode).toBe(true); + expect(cell.editValue).toBe('Tom Riddle'); + sendInput(editTemplate, 'Rick Gilmore', fixture); + return fixture.whenStable(); + }).then(() => { + fixture.detectChanges(); + expect(cell.gridAPI.get_cell_inEditMode(cell.gridID).cell.editValue).toBe('Rick Gilmore'); + cellDom.triggerEventHandler('keydown.enter', {}); + return fixture.whenStable(); + }).then(() => { + fixture.detectChanges(); + expect(cell.value).toBe('Rick Gilmore'); + expect(cell.gridAPI.get_cell_inEditMode(cell.gridID)).toBeNull(); + }); + })); + function sendInput(element, text, fix) { element.nativeElement.value = text; element.nativeElement.dispatchEvent(new Event('input')); From e7f3ffa9d3beb0073393de67a2ed2542c2f47fc0 Mon Sep 17 00:00:00 2001 From: ddincheva Date: Thu, 21 Jun 2018 15:01:02 +0300 Subject: [PATCH 05/11] chore(CellEditing): changelog update with cell editing --- CHANGELOG.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7781897ca6a..17f6eaf8462 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -59,6 +59,8 @@ export class IgxCustomFilteringOperand extends IgxFilteringOperand { - `igxColumn` changes: - **Breaking change** filteringExpressions property is removed. +- `igxCell` default editing template is changed acording column data type. For more information you can read the [specification](https://github.com/IgniteUI/igniteui-angular/wiki/Cell-Editing) or the [official documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid_editing.html) + - `igxToggle` changes - `onOpening` event added. - `onClosing` event added. @@ -78,9 +80,9 @@ export class IgxCustomFilteringOperand extends IgxFilteringOperand { ## 6.0.1 - Introduced migration schematics to integrate with the Angular CLI update command. You can now run - + `ng update igniteui-angular` - + in existing projects to both update the package and apply any migrations needed to your project. Make sure to commit project state before proceeding. Currently these cover converting submodule imports as well as the deprecation of `igxForRemote` and rename of `igx-tab-bar` to `igx-bottom-nav` from 6.0.0. - **Breaking changes**: From 347d42b49141dc167b961c219ff2f5546d364782 Mon Sep 17 00:00:00 2001 From: ddincheva Date: Thu, 21 Jun 2018 15:13:51 +0300 Subject: [PATCH 06/11] chore(cellEditing): reoder params of sort method --- projects/igniteui-angular/src/lib/grid/cell.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grid/cell.spec.ts b/projects/igniteui-angular/src/lib/grid/cell.spec.ts index 75e5074030f..29fe633cee1 100644 --- a/projects/igniteui-angular/src/lib/grid/cell.spec.ts +++ b/projects/igniteui-angular/src/lib/grid/cell.spec.ts @@ -562,7 +562,7 @@ describe('IgxGrid - Cell component', () => { fixture.detectChanges(); const grid = fixture.componentInstance.grid; - grid.sort('age', SortingDirection.Desc); + grid.sort( {fieldName: 'age', dir: SortingDirection.Desc}); fixture.detectChanges(); const cell = grid.getCellByColumn(0, 'fullName'); const cellDom = fixture.debugElement.queryAll(By.css(CELL_CSS_CLASS))[0]; From 4f4303ff6443e537ebe15279cf0c1a9c7dbf3cad Mon Sep 17 00:00:00 2001 From: Martin Pavlov Date: Thu, 21 Jun 2018 15:42:58 +0300 Subject: [PATCH 07/11] Fixing typo in Changelog.md --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 17f6eaf8462..07c5164780b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -59,7 +59,7 @@ export class IgxCustomFilteringOperand extends IgxFilteringOperand { - `igxColumn` changes: - **Breaking change** filteringExpressions property is removed. -- `igxCell` default editing template is changed acording column data type. For more information you can read the [specification](https://github.com/IgniteUI/igniteui-angular/wiki/Cell-Editing) or the [official documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid_editing.html) +- `igxCell` default editing template is changed according column data type. For more information you can read the [specification](https://github.com/IgniteUI/igniteui-angular/wiki/Cell-Editing) or the [official documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid_editing.html) - `igxToggle` changes - `onOpening` event added. From 8b0e105a8a1aec3680b03dbad91ea7ce42bb6a25 Mon Sep 17 00:00:00 2001 From: Stamen Stoychev Date: Thu, 21 Jun 2018 16:07:33 +0300 Subject: [PATCH 08/11] test(groupby): reenabling test after fix is applied #1634 --- projects/igniteui-angular/src/lib/grid/grid.groupby.spec.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grid/grid.groupby.spec.ts b/projects/igniteui-angular/src/lib/grid/grid.groupby.spec.ts index 75aa82ab93d..f78631196ed 100644 --- a/projects/igniteui-angular/src/lib/grid/grid.groupby.spec.ts +++ b/projects/igniteui-angular/src/lib/grid/grid.groupby.spec.ts @@ -1087,8 +1087,7 @@ describe('IgxGrid - GroupBy', () => { expect(dataRows.length).toEqual(6); }); - /* reenable after #1634 */ - xit('should update the UI when updating records via the UI after grouping is re-applied so that they more to the correct group', () => { + it('should update the UI when updating records via the UI after grouping is re-applied so that they more to the correct group', () => { const fix = TestBed.createComponent(DefaultGridComponent); const grid = fix.componentInstance.instance; fix.componentInstance.enableEditing = true; From 2dd0ee91a1fecd5b9f434c04de9fd58dd2352612 Mon Sep 17 00:00:00 2001 From: ddincheva Date: Fri, 22 Jun 2018 09:26:37 +0300 Subject: [PATCH 09/11] fix(CellEditing): cell editing with PK #1634 --- projects/igniteui-angular/src/lib/grid/api.service.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grid/api.service.ts b/projects/igniteui-angular/src/lib/grid/api.service.ts index c2c4bb71022..6a5e7c181b7 100644 --- a/projects/igniteui-angular/src/lib/grid/api.service.ts +++ b/projects/igniteui-angular/src/lib/grid/api.service.ts @@ -136,15 +136,15 @@ export class IgxGridAPIService { if (editableCell) { if (!editableCell.cell.column.inlineEditorTemplate && editableCell.cell.column.dataType === 'number') { if (!this.get_cell_inEditMode(gridId).cell.editValue) { - this.update_cell(gridId, editableCell.cellID.rowIndex, editableCell.cellID.columnID, 0); + this.update_cell(gridId, editableCell.cellID.rowID, editableCell.cellID.columnID, 0); } else { const val = parseFloat(this.get_cell_inEditMode(gridId).cell.editValue); if (!isNaN(val) || isFinite(val)) { - this.update_cell(gridId, editableCell.cellID.rowIndex, editableCell.cellID.columnID, val); + this.update_cell(gridId, editableCell.cellID.rowID, editableCell.cellID.columnID, val); } } } else { - this.update_cell(gridId, editableCell.cellID.rowIndex, editableCell.cellID.columnID, editableCell.cell.editValue); + this.update_cell(gridId, editableCell.cellID.rowID, editableCell.cellID.columnID, editableCell.cell.editValue); } } } @@ -172,6 +172,7 @@ export class IgxGridAPIService { } else { this.get(id).data[this.get(id).data.indexOf(rowID)][column.field] = args.newValue; } + (this.get(id) as any)._pipeTrigger++; this.get(id).refreshSearch(); } } @@ -181,6 +182,7 @@ export class IgxGridAPIService { const args: IGridEditEventArgs = { row, cell: null, currentValue: this.get(id).data[index], newValue: value }; this.get(id).onEditDone.emit(args); this.get(id).data[index] = args.newValue; + (this.get(id) as any)._pipeTrigger++; } public sort(id: string, fieldName: string, dir: SortingDirection, ignoreCase: boolean): void { From ce05b577f1fe350a702fe7640282f27fd56f33d8 Mon Sep 17 00:00:00 2001 From: ddincheva Date: Fri, 22 Jun 2018 09:28:26 +0300 Subject: [PATCH 10/11] test(GroupBy): refactored test grouby with cell editing #1634 --- .../src/lib/grid/grid.groupby.spec.ts | 56 ++++++++++--------- 1 file changed, 29 insertions(+), 27 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grid/grid.groupby.spec.ts b/projects/igniteui-angular/src/lib/grid/grid.groupby.spec.ts index f78631196ed..bb61c46b976 100644 --- a/projects/igniteui-angular/src/lib/grid/grid.groupby.spec.ts +++ b/projects/igniteui-angular/src/lib/grid/grid.groupby.spec.ts @@ -1087,7 +1087,8 @@ describe('IgxGrid - GroupBy', () => { expect(dataRows.length).toEqual(6); }); - it('should update the UI when updating records via the UI after grouping is re-applied so that they more to the correct group', () => { + it('should update the UI when updating records via the UI after grouping is re-applied so that they more to the correct group', + async(() => { const fix = TestBed.createComponent(DefaultGridComponent); const grid = fix.componentInstance.instance; fix.componentInstance.enableEditing = true; @@ -1102,38 +1103,32 @@ describe('IgxGrid - GroupBy', () => { const cell = grid.getCellByColumn(5, 'ProductName'); cell.column.editable = true; - rv.dispatchEvent(new Event('focus')); - - fix.detectChanges(); rv.dispatchEvent(new Event('dblclick')); + fix.detectChanges(); expect(cell.inEditMode).toBe(true); - const inputElem = cell.nativeElement.querySelector('.igx-input-group__input'); - inputElem.value = 'NetAdvantage'; + const editCellDom = fix.debugElement.query(By.css('.igx-grid__td--editing')); + const input = editCellDom.query(By.css('input')); + sendInput(input, 'NetAdvantage', fix); + fix.whenStable().then(() => { + editCellDom.triggerEventHandler('keydown.enter', {}); + return fix.whenStable(); + }).then(() => { + let groupRows = grid.groupsRowList.toArray(); + let dataRows = grid.dataRowList.toArray(); - const keyboardEvent = new KeyboardEvent('keydown', { - code: 'enter', - key: 'enter' + expect(groupRows.length).toEqual(5); + expect(dataRows.length).toEqual(8); + // re-apply grouping + grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false }); + fix.detectChanges(); + groupRows = grid.groupsRowList.toArray(); + dataRows = grid.dataRowList.toArray(); + expect(groupRows.length).toEqual(4); + expect(dataRows.length).toEqual(8); }); - inputElem.dispatchEvent(keyboardEvent); - fix.detectChanges(); - - let groupRows = grid.groupsRowList.toArray(); - let dataRows = grid.dataRowList.toArray(); - - expect(groupRows.length).toEqual(5); - expect(dataRows.length).toEqual(8); - - // re-apply grouping - grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false }); - fix.detectChanges(); - - groupRows = grid.groupsRowList.toArray(); - dataRows = grid.dataRowList.toArray(); - expect(groupRows.length).toEqual(4); - expect(dataRows.length).toEqual(8); - }); + })); // GroupBy + Paging integration it('should apply paging on data records only.', () => { @@ -1898,6 +1893,13 @@ describe('IgxGrid - GroupBy', () => { const sortingIcon = fix.debugElement.query(By.css('.sort-icon')); expect(sortingIcon.nativeElement.textContent.trim()).toEqual(SORTING_ICON_ASC_CONTENT); }); + + function sendInput(element, text, fix) { + element.nativeElement.value = text; + element.nativeElement.dispatchEvent(new Event('input')); + fix.detectChanges(); + return fix.whenStable(); + } }); export class DataParent { From 84e6884fe9fa3ef4fd37601a746a2fd9ce0aef78 Mon Sep 17 00:00:00 2001 From: ddincheva Date: Fri, 22 Jun 2018 11:31:34 +0300 Subject: [PATCH 11/11] refactor(CellEditing): escape editMode onColumnMoving --- projects/igniteui-angular/src/lib/grid/grid.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grid/grid.component.ts b/projects/igniteui-angular/src/lib/grid/grid.component.ts index cade1d01e67..98d2084a398 100644 --- a/projects/igniteui-angular/src/lib/grid/grid.component.ts +++ b/projects/igniteui-angular/src/lib/grid/grid.component.ts @@ -805,7 +805,7 @@ export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, Af this.onRowDeleted.pipe(takeUntil(this.destroy$)).subscribe(() => this.clearSummaryCache()); this.onFilteringDone.pipe(takeUntil(this.destroy$)).subscribe(() => this.clearSummaryCache()); this.onEditDone.pipe(takeUntil(this.destroy$)).subscribe((editCell) => this.clearSummaryCache(editCell)); - this.onColumnMovingStart.pipe(takeUntil(this.destroy$)).subscribe((source) => { + this.onColumnMoving.pipe(takeUntil(this.destroy$)).subscribe((source) => { const editableCell = this.gridAPI.get_cell_inEditMode(this.id); if (editableCell) { this.gridAPI.submit_value(this.id);