Updated Excel edit style sample to functional component (React v19) #777
+104
−112
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…o navigate correct
tishko0
changed the title
MarielaTihova
changed the title
damyanpetev
requested changes
May 14, 2025
| import ReactDOM from 'react-dom/client'; | ||
| import './index.css'; | ||
|
|
||
| import { IgrGridModule } from 'igniteui-react-grids'; | ||
| import { IgrActiveNodeChangeEventArgs, IgrGridModule } from 'igniteui-react-grids'; |
There was a problem hiding this comment.
IgrActiveNodeChangeEventArgs isn't used - either remove the import or better yet - use the type for the event handler
| @@ -1,146 +1,138 @@ | |||
| import React from 'react'; | |||
| import React, { useRef, useEffect } from 'react'; | |||
There was a problem hiding this comment.
The React import is unused and should be removed
Comment on lines
+12
to
+13
| // Register modules once | ||
| IgrGridModule.register(); |
There was a problem hiding this comment.
This is no longer needed and can be removed as visible if ran with the 19 package:
Comment on lines
+41
to
+86
| gridRef.current.markForCheck(); | ||
| } else | ||
|
|
||
| if (activeElem && activeElem.editMode && shouldAppendValue.current) { | ||
| event.preventDefault(); | ||
| activeElem.editValue = activeElem.editValue + event.key; | ||
| shouldAppendValue.current = false; | ||
| } | ||
| } | ||
|
|
||
| if ((key >= 48 && key <= 57) || (key >= 65 && key <= 90) || (key >= 97 && key <= 122)) { | ||
| var columnName = grid.getColumnByVisibleIndex(activeElem.column).field; | ||
| var cell = grid.getCellByColumn(activeElem.row, columnName); | ||
| if (code === 'Backspace') { | ||
| if(activeElem == null) { | ||
| return; | ||
| } | ||
| const rowIndex = activeElem.row.index; | ||
| const columnKey = activeElem.column.field; | ||
|
|
||
| gridRef.current.data[rowIndex][columnKey] = ''; | ||
| gridRef.current.markForCheck(); | ||
|
|
||
| if (cell && !grid.crudService.cellInEditMode) { | ||
| grid.crudService.enterEditMode(cell); | ||
| cell.editValue = key; | ||
| } | ||
| } | ||
|
|
||
| if (key == 13) { | ||
| var thisRow = activeElem.row; | ||
| var column = activeElem.column; | ||
| var rowInfo = grid.dataView; | ||
| if (code === 'Enter' || code === 'NumpadEnter') { | ||
|
|
||
| if(activeElem == null) { | ||
| return; | ||
| } | ||
|
|
||
| const thisRow = activeElem.row.index; | ||
| const dataView = gridRef.current.dataView; | ||
| const nextRowIndex = getNextEditableRowIndex(thisRow, dataView, event.shiftKey); | ||
|
|
||
| gridRef.current.navigateTo(nextRowIndex, activeElem.column.visibleIndex, (obj: any) => { | ||
|
|
||
| requestAnimationFrame(() => { | ||
| gridRef.current.endEdit(true, obj); | ||
| gridRef.current.clearCellSelection(); | ||
| obj.target.activate(); | ||
|
|
||
| }); | ||
| }); | ||
|
|
||
| var nextRow = this.getNextEditableRowIndex(thisRow, rowInfo, (args.detail.event as any).shiftKey); | ||
| } | ||
| }; | ||
|
|
||
| grid.navigateTo(nextRow, column, (obj: any) => { | ||
| obj.target.activate(); | ||
| grid.clearCellSelection(); | ||
| }); | ||
| } | ||
| } | ||
| gridElement.addEventListener("keydown", handleKeyDown); |
There was a problem hiding this comment.
Multiple points:
- Why is this stuck in
useEffect? The old sample usedgridKeydownwhich should now beonGridKeydownand should be used instead - What's with the
gridRef.current.markForCheck();,requestAnimationFrameandendEditcalls? Those aren't needed in the original source (ng) and shouldn't be here as well. If they are, we might want to investigate why. Especially the rAF since it's in the already delayednavigateTocallback
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
…o navigate correct