silevis / reactgrid

Add spreadsheet-like behavior to your React app

Home Page:https://reactgrid.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Focus next row when pressing Enter at the last row cell

merabtenei opened this issue · comments

First of all, I really appreciate the efforts you put into building this library, it's a great tool for us as developers.

When setting moveRightOnEnter to true in ReactGrid, the focus will stay on the same cell when hitting Enter on the last cell of the current row. Is there any possibility to make it move to the first cell of the next row ?
Is that possible right now by using onFocusLocationChanged or onFocusLocationChanging ?

Edit: After digging a bit deeper, I think this can only be done using customCellTemplates and the handleKeyDown. My question is there a way to override the default handleKeyDown behavior for all Cell Templates without redefining a class for every built in Class Template (CheckboxCell, DataCell, TextCell, NumberCell ...) ?

At this moment I am working on v5-alpha, and my knowledge on v4-topics is very limited, but im pretty sure there is no way to change this behavior without completing the process you've described.

In v5 programmer will be able to fully redefine behaviors and related to handleKey functions related to them.

@Michota Thanks for the quick answer, I did that and I faced another problem. The DataGrid ref offers no utilities to focus on a specific cell, We can use the focusLocation prop but in that case, pointer and keyboard default beahvior will no longer work. Another possible way is to use setState directly and override the focusLocation there but it wasn't straight forward as CellLocation need { row, column } which have many props to provide rather than the simple let's say focus(colIndex, rowIndex).

When looking further at the code, I found these utilities :

{
  moveFocusLeft,
  moveFocusUp,
  moveFocusDown,
  moveFocusRight,
  moveFocusPageDown,
  moveFocusPageUp,
  moveFocusHome,
  moveFocusEnd,
} from "./focuses";

But can't import them as they are not exported from the library.

My last resort is to create a fork and hope to get what I need by making changes to the code maybe by overriding this part :
https://github.com/silevis/reactgrid/blob/5c09f366ca6d077a78bbf46892633c47e278b568/src/lib/Functions/handleKeyDown.ts#L41C10-L41C31