Skip to content

Commit 4d713f5

Browse files
zdrawkuzdrawku
authored
Merge pull request #1648 from IgniteUI/ddincheva-cellEditing
Cell editing
2 parents ebcbadb + f513854 commit 4d713f5

File tree

8 files changed

+109
-46
lines changed

8 files changed

+109
-46
lines changed

‎CHANGELOG.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,8 @@ export class IgxCustomFilteringOperand extends IgxFilteringOperand {
6161
- `igxColumn` changes:
6262
- **Breaking change** filteringExpressions property is removed.
6363

64+
- `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)
65+
6466
- `igxToggle` changes
6567
- `onOpening` event added.
6668
- `onClosing` event added.
@@ -83,9 +85,9 @@ export class IgxCustomFilteringOperand extends IgxFilteringOperand {
8385

8486
## 6.0.1
8587
- Introduced migration schematics to integrate with the Angular CLI update command. You can now run
86-
88+
8789
`ng update igniteui-angular`
88-
90+
8991
in existing projects to both update the package and apply any migrations needed to your project. Make sure to commit project state before proceeding.
9092
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.
9193
- **Breaking changes**:

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

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -136,37 +136,43 @@ export class IgxGridAPIService {
136136
if (editableCell) {
137137
if (!editableCell.cell.column.inlineEditorTemplate && editableCell.cell.column.dataType === 'number') {
138138
if (!this.get_cell_inEditMode(gridId).cell.editValue) {
139-
this.update_cell(gridId, editableCell.cellID.rowIndex, editableCell.cellID.columnID, 0);
139+
this.update_cell(gridId, editableCell.cellID.rowID, editableCell.cellID.columnID, 0);
140140
} else {
141141
const val = parseFloat(this.get_cell_inEditMode(gridId).cell.editValue);
142142
if (!isNaN(val) || isFinite(val)) {
143-
this.update_cell(gridId, editableCell.cellID.rowIndex, editableCell.cellID.columnID, val);
143+
this.update_cell(gridId, editableCell.cellID.rowID, editableCell.cellID.columnID, val);
144144
}
145145
}
146146
} else {
147-
this.update_cell(gridId, editableCell.cellID.rowIndex, editableCell.cellID.columnID, editableCell.cell.editValue);
147+
this.update_cell(gridId, editableCell.cellID.rowID, editableCell.cellID.columnID, editableCell.cell.editValue);
148148
}
149149
}
150150
}
151151

152152
public update_cell(id: string, rowSelector, columnID, editValue) {
153153
let cellObj;
154-
let rowIndex;
154+
let rowID;
155155
const row = this.get_row_by_key(id, rowSelector);
156156
const editableCell = this.get_cell_inEditMode(id);
157157
if (editableCell) {
158158
cellObj = editableCell.cell;
159-
rowIndex = rowSelector;
159+
rowID = editableCell.cellID.rowID;
160160
} else if (row) {
161-
rowIndex = row.index;
162-
cellObj = this.get(id).columnList.toArray()[columnID].cells[rowIndex];
161+
rowID = row.rowID;
162+
cellObj = this.get(id).columnList.toArray()[columnID].cells[row.index];
163163
}
164164
if (cellObj) {
165165
const args: IGridEditEventArgs = { row: cellObj.row, cell: cellObj,
166166
currentValue: cellObj.value, newValue: editValue };
167167
this.get(id).onEditDone.emit(args);
168168
const column = this.get(id).columnList.toArray()[columnID];
169-
this.get(id).data[rowIndex][column.field] = args.newValue;
169+
if (this.get(id).primaryKey) {
170+
const index = this.get(id).data.map((record) => record[this.get(id).primaryKey]).indexOf(rowSelector);
171+
this.get(id).data[index][column.field] = args.newValue;
172+
} else {
173+
this.get(id).data[this.get(id).data.indexOf(rowID)][column.field] = args.newValue;
174+
}
175+
(this.get(id) as any)._pipeTrigger++;
170176
this.get(id).refreshSearch();
171177
}
172178
}
@@ -176,6 +182,7 @@ export class IgxGridAPIService {
176182
const args: IGridEditEventArgs = { row, cell: null, currentValue: this.get(id).data[index], newValue: value };
177183
this.get(id).onEditDone.emit(args);
178184
this.get(id).data[index] = args.newValue;
185+
(this.get(id) as any)._pipeTrigger++;
179186
}
180187

181188
public sort(id: string, fieldName: string, dir: SortingDirection, ignoreCase: boolean): void {

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

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -557,6 +557,41 @@ describe('IgxGrid - Cell component', () => {
557557
});
558558
}));
559559

560+
it('edit mode - update correct cell when sorting is applied', async(() => {
561+
const fixture = TestBed.createComponent(CellEditingTestComponent);
562+
fixture.detectChanges();
563+
564+
const grid = fixture.componentInstance.grid;
565+
grid.sort( {fieldName: 'age', dir: SortingDirection.Desc});
566+
fixture.detectChanges();
567+
const cell = grid.getCellByColumn(0, 'fullName');
568+
const cellDom = fixture.debugElement.queryAll(By.css(CELL_CSS_CLASS))[0];
569+
let editTemplate;
570+
571+
fixture.whenStable().then(() => {
572+
fixture.detectChanges();
573+
574+
cellDom.triggerEventHandler('dblclick', {});
575+
return fixture.whenStable();
576+
}).then(() => {
577+
fixture.detectChanges();
578+
editTemplate = cellDom.query(By.css('input'));
579+
expect(cell.inEditMode).toBe(true);
580+
expect(cell.editValue).toBe('Tom Riddle');
581+
sendInput(editTemplate, 'Rick Gilmore', fixture);
582+
return fixture.whenStable();
583+
}).then(() => {
584+
fixture.detectChanges();
585+
expect(cell.gridAPI.get_cell_inEditMode(cell.gridID).cell.editValue).toBe('Rick Gilmore');
586+
cellDom.triggerEventHandler('keydown.enter', {});
587+
return fixture.whenStable();
588+
}).then(() => {
589+
fixture.detectChanges();
590+
expect(cell.value).toBe('Rick Gilmore');
591+
expect(cell.gridAPI.get_cell_inEditMode(cell.gridID)).toBeNull();
592+
});
593+
}));
594+
560595
function sendInput(element, text, fix) {
561596
element.nativeElement.value = text;
562597
element.nativeElement.dispatchEvent(new Event('input'));

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,8 +72,13 @@ export class IgxColumnComponent implements AfterContentInit {
7272
set hidden(value: boolean) {
7373
if (this._hidden !== value) {
7474
this._hidden = value;
75+
const cellInEditMode = this.gridAPI.get_cell_inEditMode(this.gridID);
76+
if (cellInEditMode) {
77+
if (cellInEditMode.cell.column.field === this.field) {
78+
this.gridAPI.escape_editMode(this.gridID, cellInEditMode.cellID);
79+
}
80+
}
7581
this.check();
76-
7782
if (this.grid) {
7883
const activeInfo = IgxTextHighlightDirective.highlightGroupsMap.get(this.grid.id);
7984
const oldIndex = activeInfo.columnIndex;

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -805,6 +805,13 @@ export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, Af
805805
this.onRowDeleted.pipe(takeUntil(this.destroy$)).subscribe(() => this.clearSummaryCache());
806806
this.onFilteringDone.pipe(takeUntil(this.destroy$)).subscribe(() => this.clearSummaryCache());
807807
this.onEditDone.pipe(takeUntil(this.destroy$)).subscribe((editCell) => this.clearSummaryCache(editCell));
808+
this.onColumnMoving.pipe(takeUntil(this.destroy$)).subscribe((source) => {
809+
const editableCell = this.gridAPI.get_cell_inEditMode(this.id);
810+
if (editableCell) {
811+
this.gridAPI.submit_value(this.id);
812+
this.gridAPI.escape_editMode(this.id, editableCell.cellID);
813+
}
814+
});
808815
}
809816

810817
public ngAfterContentInit() {

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

Lines changed: 29 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1087,8 +1087,8 @@ describe('IgxGrid - GroupBy', () => {
10871087
expect(dataRows.length).toEqual(6);
10881088
});
10891089

1090-
/* reenable after #1634 */
1091-
xit('should update the UI when updating records via the UI after grouping is re-applied so that they more to the correct group', () => {
1090+
it('should update the UI when updating records via the UI after grouping is re-applied so that they more to the correct group',
1091+
async(() => {
10921092
const fix = TestBed.createComponent(DefaultGridComponent);
10931093
const grid = fix.componentInstance.instance;
10941094
fix.componentInstance.enableEditing = true;
@@ -1103,38 +1103,32 @@ describe('IgxGrid - GroupBy', () => {
11031103
const cell = grid.getCellByColumn(5, 'ProductName');
11041104

11051105
cell.column.editable = true;
1106-
rv.dispatchEvent(new Event('focus'));
1107-
1108-
fix.detectChanges();
11091106
rv.dispatchEvent(new Event('dblclick'));
1107+
11101108
fix.detectChanges();
11111109
expect(cell.inEditMode).toBe(true);
11121110

1113-
const inputElem = cell.nativeElement.querySelector('.igx-input-group__input');
1114-
inputElem.value = 'NetAdvantage';
1111+
const editCellDom = fix.debugElement.query(By.css('.igx-grid__td--editing'));
1112+
const input = editCellDom.query(By.css('input'));
1113+
sendInput(input, 'NetAdvantage', fix);
1114+
fix.whenStable().then(() => {
1115+
editCellDom.triggerEventHandler('keydown.enter', {});
1116+
return fix.whenStable();
1117+
}).then(() => {
1118+
let groupRows = grid.groupsRowList.toArray();
1119+
let dataRows = grid.dataRowList.toArray();
11151120

1116-
const keyboardEvent = new KeyboardEvent('keydown', {
1117-
code: 'enter',
1118-
key: 'enter'
1121+
expect(groupRows.length).toEqual(5);
1122+
expect(dataRows.length).toEqual(8);
1123+
// re-apply grouping
1124+
grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false });
1125+
fix.detectChanges();
1126+
groupRows = grid.groupsRowList.toArray();
1127+
dataRows = grid.dataRowList.toArray();
1128+
expect(groupRows.length).toEqual(4);
1129+
expect(dataRows.length).toEqual(8);
11191130
});
1120-
inputElem.dispatchEvent(keyboardEvent);
1121-
fix.detectChanges();
1122-
1123-
let groupRows = grid.groupsRowList.toArray();
1124-
let dataRows = grid.dataRowList.toArray();
1125-
1126-
expect(groupRows.length).toEqual(5);
1127-
expect(dataRows.length).toEqual(8);
1128-
1129-
// re-apply grouping
1130-
grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false });
1131-
fix.detectChanges();
1132-
1133-
groupRows = grid.groupsRowList.toArray();
1134-
dataRows = grid.dataRowList.toArray();
1135-
expect(groupRows.length).toEqual(4);
1136-
expect(dataRows.length).toEqual(8);
1137-
});
1131+
}));
11381132

11391133
// GroupBy + Paging integration
11401134
it('should apply paging on data records only.', () => {
@@ -1899,6 +1893,13 @@ describe('IgxGrid - GroupBy', () => {
18991893
const sortingIcon = fix.debugElement.query(By.css('.sort-icon'));
19001894
expect(sortingIcon.nativeElement.textContent.trim()).toEqual(SORTING_ICON_ASC_CONTENT);
19011895
});
1896+
1897+
function sendInput(element, text, fix) {
1898+
element.nativeElement.value = text;
1899+
element.nativeElement.dispatchEvent(new Event('input'));
1900+
fix.detectChanges();
1901+
return fix.whenStable();
1902+
}
19021903
});
19031904

19041905
export class DataParent {

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

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,27 @@
1-
<igx-grid #grid1 [data]="data" [autoGenerate]="false" displayDensity="cosy" width="500px" height="550px" [paging]="true">
1+
<igx-grid #grid1 [data]="data" [autoGenerate]="false" displayDensity="cosy" width="800px" height="550px" [paging]="true">
22
<igx-column field="ProductID" header="Product ID" width="200px" [headerClasses]="'prodId'" [hasSummary]="true">
33
<ng-template igxCell let-cell="cell" let-val>
44
<button (click)="viewRecord(grid1.data)">{{val}}</button>
55
</ng-template>
66
</igx-column>
7-
<igx-column field="ReorderLevel" width="200px" [sortable]="true" [filterable]="true" editable="true" [dataType]="'number'" [hasSummary]="true">
7+
<igx-column field="ReorderLevel" width="200px" [sortable]="true" [filterable]="true" editable="true" [dataType]="'number'" [hasSummary]="true" [movable]="true">
88
<ng-template igxCell let-cell="cell" let-val let-row>
99
{{val}} {{row.gridID}}
1010
</ng-template>
1111
</igx-column>
12-
<igx-column field="ProductName" width="200px" header="ProductName" [sortable]="true" [dataType]="'string'" editable="true" [resizable]="true">
12+
<igx-column field="ProductName" width="200px" header="ProductName" [sortable]="true" [dataType]="'string'" editable="true" [resizable]="true" [movable]="true">
1313
</igx-column>
14-
<igx-column field="UnitsInStock" header="UnitsInStock" width="200px" [dataType]="'number'" editable="true" [sortable]="true" [hasSummary]="true" >
14+
<igx-column field="UnitsInStock" header="UnitsInStock" width="200px" [dataType]="'number'" editable="true" [sortable]="true" [hasSummary]="true" [movable]="true">
1515
<ng-template igxCellEditor let-cell="cell">
1616
<input name="units" [(ngModel)]="cell.value" style="color: black"/>
1717
</ng-template>
1818
</igx-column>
19-
<igx-column field="OrderDate" width="200px" [dataType]="'date'" [sortable]="true" [hasSummary]="true" editable="true" [resizable]="true">
19+
<igx-column field="OrderDate" width="200px" [dataType]="'date'" [sortable]="true" [hasSummary]="true" editable="true" [resizable]="true" [hidden]="orderDateHidden" [movable]="true">
2020
<ng-template igxCell let-cell="cell" let-val let-row>
2121
{{val}}
2222
</ng-template>
2323
</igx-column>
24-
<igx-column field="Discontinued" header="Discontinued" [dataType]="'boolean'" width="200px" [hasSummary]="true" editable="true" [resizable]="true">
24+
<igx-column field="Discontinued" header="Discontinued" [dataType]="'boolean'" width="200px" [hasSummary]="true" editable="true" [resizable]="true" [movable]="true">
2525
<ng-template igxCell let-cell="cell" let-val>
2626
{{val}}
2727
</ng-template>
@@ -32,4 +32,5 @@
3232
<button (click)="deleteRow()">Delete Row</button>
3333
<button (click)="updateCell()">Update Cell</button>
3434
<button (click)="updateRow()">Update Row</button>
35-
<button (click)="pin()">Pin</button>
35+
<button (click)="pin()">Pin</button>
36+
<button (click)="hideColumn()">Hide/Show OrderDate</button>

‎src/app/grid-cellEditing/grid-cellEditing.component.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
})
1313
export class GridCellEditingComponent {
1414

15+
orderDateHidden = false;
1516
@ViewChild('grid1', { read: IgxGridComponent })
1617
public grid1: IgxGridComponent;
1718

@@ -1351,4 +1352,8 @@ export class GridCellEditingComponent {
13511352
}
13521353
}
13531354
}
1355+
1356+
hideColumn() {
1357+
this.orderDateHidden = !this.orderDateHidden;
1358+
}
13541359
}

0 commit comments

Comments
 (0)