diff --git a/samples/grids/grid/editing-excel-style-custom/sandbox.config.json b/samples/grids/grid/editing-excel-style-custom/sandbox.config.json index 5c5b54fe21..13f76c3c4c 100644 --- a/samples/grids/grid/editing-excel-style-custom/sandbox.config.json +++ b/samples/grids/grid/editing-excel-style-custom/sandbox.config.json @@ -4,4 +4,4 @@ "view": "browser", "template": "parcel" } - \ No newline at end of file + diff --git a/samples/grids/grid/editing-excel-style-custom/src/index.css b/samples/grids/grid/editing-excel-style-custom/src/index.css index 0fe9368715..8b42ec3ed2 100644 --- a/samples/grids/grid/editing-excel-style-custom/src/index.css +++ b/samples/grids/grid/editing-excel-style-custom/src/index.css @@ -1,2 +1,3 @@ /* shared styles are loaded from: */ -/* https://static.infragistics.com/xplatform/css/samples */ \ No newline at end of file +/* https://static.infragistics.com/xplatform/css/samples */ + diff --git a/samples/grids/grid/editing-excel-style-custom/src/index.ts b/samples/grids/grid/editing-excel-style-custom/src/index.ts index 9ab87422bd..36c210e3fa 100644 --- a/samples/grids/grid/editing-excel-style-custom/src/index.ts +++ b/samples/grids/grid/editing-excel-style-custom/src/index.ts @@ -15,30 +15,29 @@ export class Sample { constructor() { var grid1 = this.grid1 = document.getElementById('grid1') as IgcGridComponent; - + this._bind = () => { grid1.data = this.nwindData; grid1.addEventListener('activeNodeChange', (event: any) => { grid1.endEdit(); - (grid1.getElementsByClassName("igx-grid__tbody-content")[0] as any).focus(); }); grid1.addEventListener('keydown', (event: KeyboardEvent) => { var code = event.code; var activeElem = grid1.selectedCells[0]; - if ((event.code >= 'Digit0' && event.code <= 'Digit9') || + if ((event.code >= 'Digit0' && event.code <= 'Digit9') || (event.code >= 'KeyA' && event.code <= 'KeyZ') || - (event.code >= 'Numpad0' && event.code <= 'Numpad9') && + (event.code >= 'Numpad0' && event.code <= 'Numpad9') && event.code !== 'Enter' && event.code !== 'NumpadEnter') { - + if (activeElem && activeElem.editMode === false) { activeElem.editMode = true; activeElem.editValue = event.key; this.shouldAppendValue = true; grid1.markForCheck(); } else - + if (activeElem && activeElem.editMode && this.shouldAppendValue) { event.preventDefault(); activeElem.editValue = activeElem.editValue + event.key; @@ -51,26 +50,31 @@ export class Sample { return; } const rowIndex = activeElem.row.index; - const columnKey = activeElem.column.field; - + const columnKey = activeElem.column.field; + grid1.data[rowIndex][columnKey] = ''; grid1.markForCheck(); - } - - if (code === 'Enter') { + } + + if (code === 'Enter' || code === 'NumpadEnter') { + if(activeElem == null) { return; } const thisRow = activeElem.row.index; const dataView = this.grid1.dataView; - const nextRowIndex = this.getNextEditableRowIndex(thisRow, dataView, event.shiftKey); + const nextRowIndex = this.getNextEditableRowIndex(thisRow, dataView, event.shiftKey); grid1.navigateTo(nextRowIndex, activeElem.column.visibleIndex, (obj: any) => { grid1.clearCellSelection(); - obj.target.activate(); + + requestAnimationFrame(() => { + obj.target.activate(); + }); }); + } }); } @@ -110,6 +114,7 @@ export class Sample { } return dataView.findIndex((rec, index) => index > currentRowIndex && this.isEditableDataRecordAtIndex(index, dataView)); } + private isEditableDataRecordAtIndex(rowIndex: number, dataView: any[]): boolean { const rec = dataView[rowIndex];