Merge branch 'master' into combo-master

# Conflicts:
#	CHANGELOG.md

CHANGELOG.md

@@ -61,6 +61,7 @@ export class IgxCustomFilteringOperand extends IgxFilteringOperand {
 - `igxColumn` changes:
     - **Breaking change** filteringExpressions property is removed.
 
+- `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)
 - `igxCombo` component added
 
     ```html
@@ -106,9 +107,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**:

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

@@ -136,37 +136,43 @@ 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);
             }
         }
     }
 
     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;
+            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) as any)._pipeTrigger++;
             this.get(id).refreshSearch();
         }
     }
@@ -176,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 {

projects/igniteui-angular/src/lib/grid/cell.spec.ts

@@ -557,6 +557,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( {fieldName: 'age',  dir: 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'));

projects/igniteui-angular/src/lib/grid/column.component.ts

@@ -72,8 +72,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;

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

@@ -805,6 +805,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.onColumnMoving.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() {

projects/igniteui-angular/src/lib/grid/grid.groupby.spec.ts

@@ -1087,8 +1087,8 @@ 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',
+    async(() => {
         const fix = TestBed.createComponent(DefaultGridComponent);
         const grid = fix.componentInstance.instance;
         fix.componentInstance.enableEditing = true;
@@ -1103,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.', () => {
@@ -1899,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 {

src/app/grid-cellEditing/grid-cellEditing.component.html

@@ -1,27 +1,27 @@
-<igx-grid #grid1 [data]="data" [autoGenerate]="false" displayDensity="cosy" width="500px" height="550px" [paging]="true">
+<igx-grid #grid1 [data]="data" [autoGenerate]="false" displayDensity="cosy" width="800px" height="550px" [paging]="true">
     <igx-column field="ProductID" header="Product ID" width="200px" [headerClasses]="'prodId'" [hasSummary]="true">
         <ng-template igxCell let-cell="cell" let-val>
         <button (click)="viewRecord(grid1.data)">{{val}}</button>
         </ng-template>
     </igx-column>
-    <igx-column field="ReorderLevel" width="200px" [sortable]="true" [filterable]="true" editable="true" [dataType]="'number'" [hasSummary]="true">
+    <igx-column field="ReorderLevel" width="200px" [sortable]="true" [filterable]="true" editable="true" [dataType]="'number'" [hasSummary]="true" [movable]="true">
         <ng-template igxCell let-cell="cell" let-val let-row>
         {{val}} {{row.gridID}}
         </ng-template>
     </igx-column>
-    <igx-column field="ProductName" width="200px" header="ProductName" [sortable]="true" [dataType]="'string'" editable="true" [resizable]="true">
+    <igx-column field="ProductName" width="200px" header="ProductName" [sortable]="true" [dataType]="'string'" editable="true" [resizable]="true" [movable]="true">
     </igx-column>
-    <igx-column field="UnitsInStock" header="UnitsInStock" width="200px" [dataType]="'number'" editable="true" [sortable]="true" [hasSummary]="true" >
+    <igx-column field="UnitsInStock" header="UnitsInStock" width="200px" [dataType]="'number'" editable="true" [sortable]="true" [hasSummary]="true" [movable]="true">
         <ng-template igxCellEditor let-cell="cell">
             <input name="units" [(ngModel)]="cell.value" style="color: black"/>
         </ng-template>
     </igx-column>
-    <igx-column field="OrderDate" width="200px" [dataType]="'date'" [sortable]="true" [hasSummary]="true" editable="true" [resizable]="true">
+    <igx-column field="OrderDate" width="200px" [dataType]="'date'" [sortable]="true" [hasSummary]="true" editable="true" [resizable]="true" [hidden]="orderDateHidden" [movable]="true">
         <ng-template igxCell let-cell="cell" let-val let-row>
         {{val}}
         </ng-template>
     </igx-column>
-    <igx-column field="Discontinued" header="Discontinued" [dataType]="'boolean'" width="200px" [hasSummary]="true" editable="true" [resizable]="true">
+    <igx-column field="Discontinued" header="Discontinued" [dataType]="'boolean'" width="200px" [hasSummary]="true" editable="true" [resizable]="true" [movable]="true">
         <ng-template igxCell let-cell="cell" let-val>
         {{val}}
         </ng-template>
@@ -32,4 +32,5 @@
 <button (click)="deleteRow()">Delete Row</button>
 <button (click)="updateCell()">Update Cell</button>
 <button (click)="updateRow()">Update Row</button>
-<button (click)="pin()">Pin</button>
+<button (click)="pin()">Pin</button>
+<button (click)="hideColumn()">Hide/Show OrderDate</button>

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;
+    }
 }