Enter key navigation across sheet cells.

[franks1]

Hi Team,
Please, can we have enter key navigation across sheet cells when enter is pressed.
So when the user presses the enter key in an active cell the focus moves to the next adjacent cell.
Also, can this feature come with background color highlight once cell gains focus. Thank you.

[anmcgrath]

Hi @franks1 there is already this capability:

Or would you like it to start editing the cell that it moves to?

[Inox]

Hi everyone,
I downloaded the code and made a few changes to make it work.

1. I created the classes for the items listed in BlazorDatasheet.Core.Selecting folder.

EnterDirection.cs

namespace BlazorDatasheet.Core.Selecting;

public enum EnterDirection : short
{
    NextRow = 0,
    NextCol = 1
}

ActionNextColInLast.cs

namespace BlazorDatasheet.Core.Selecting;

public enum ActionNextColInLast : short
{
    None = 0,
    NextRow = 1,
    NextRowAndAddRow = 2
}

2. I added these small changes.

• In DataSheet.razor.cs - in RegisterDefaultShortcuts()

if (EnterDirection.Equals(EnterDirection.NextRow))
{
    ShortcutManager
        .Register(["Enter"], KeyboardModifiers.None, _ => AcceptEditAndMoveActiveSelection(Axis.Row, 1));
    ShortcutManager
        .Register(["Enter"], KeyboardModifiers.Shift, _ => AcceptEditAndMoveActiveSelection(Axis.Row, -1));
}
else
{
    ShortcutManager
        .Register(["Enter"], KeyboardModifiers.None, _ => AcceptEditAndMoveActiveSelection(Axis.Col, 1));
    ShortcutManager
        .Register(["Enter"], KeyboardModifiers.Shift, _ => AcceptEditAndMoveActiveSelection(Axis.Col, -1));
}

• In Selection.cs - In MoveActivePositionByCol()
  This is just part of the code, I haven't modified the rest.

var currRow = ActiveCellPosition.row;
var currCol = ActiveCellPosition.col;
//***Add***
bool lastCol = false;

// If it's currently inside a merged cell, find where it should next move to
var merge = _sheet.Cells.GetMerge(ActiveCellPosition.row, ActiveCellPosition.col);
if (merge != null)
{
    // move the active row position to the edge of the current merged cell
    if (colDir == -1)
        currCol = merge.Left;
    else
        currCol = merge.Right;
}

currCol = _sheet.Columns.GetNextVisible(currCol, colDir);
//***Add***
if (currCol==-1)
    lastCol=true;

if (currCol == -1)
    currCol = colDir == 1 ? ActiveRegion.Right + 1 : ActiveRegion.Left - 1;

// Fix the active region to surrounds of the sheet
var activeRegionFixed = ActiveRegion.GetIntersection(_sheet.Region);
if (activeRegionFixed == null)
    return;

// If the active region is only one cell and there are no other regions,
// clear the regions and move the whole thing down
if (_regions.Count == 1 && (activeRegionFixed.Area == 1 || activeRegionFixed.Equals(merge)))
{
    // We end up with a new region of area 1 (or the size of the merged cell it is not on)
    _regions.Clear();

    //***Add***    
    if (lastCol && (_sheet.ActionNextColInLast==ActionNextColInLast.NextRow ||
                    _sheet.ActionNextColInLast==ActionNextColInLast.NextRowAndAddRow)
        )
    {
        currRow++;
        currCol = _sheet.Columns.GetNextVisible(-1,1);
        if (_sheet.ActionNextColInLast==ActionNextColInLast.NextRowAndAddRow)
        { 
            if (currRow>_sheet.Region.GetTrailingEdgeOffset(Axis.Row))
            {
                _sheet.Rows.InsertAt(_sheet.Region.GetTrailingEdgeOffset(Axis.Row)+1);
            }
        }
    }

    var offsetPosn = new CellPosition(currRow, currCol);
    offsetPosn = _sheet.Region.GetConstrained(offsetPosn);
    var newRegion = new Region(offsetPosn.row, offsetPosn.col);
    newRegion = _sheet.ExpandRegionOverMerges(newRegion) as Region;
    SetActiveCellPosition(offsetPosn.row, offsetPosn.col);
    if (newRegion != null)
        this.Add(newRegion);

    EmitSelectionChange(oldRegions);
    return;
}

• In Sheet.cs - Add 2 vars

 public EnterDirection EnterDirection { get; set; } = EnterDirection.NextRow;

 public ActionNextColInLast ActionNextColInLast { get; set; } = ActionNextColInLast.None;

• In Datasheet.razor.cs - Add 2 parameters

/// <summary>
/// Enter direction, by default it is set to NextRow.
/// </summary>
[Parameter]
public EnterDirection EnterDirection { get; set; } = EnterDirection.NextRow;

/// <summary>
/// Action in last Col when go to next Col
/// </summary>
[Parameter]
public ActionNextColInLast ActionNextColInLast { get; set; } = ActionNextColInLast.None;

To test it in Home.razor I added the component with the parameters

<div style="width: 600px; height: 400px; overflow-y: scroll;">
    <Datasheet EnterDirection="EnterDirection.NextCol" 
               ActionNextColInLast="ActionNextColInLast.NextRow"
               Sheet="_sheet2" @ref="_datasheet2" />
</div>

In OnInitialized()

_sheet2 = new Sheet(25, 4);
_sheet2.EnterDirection = EnterDirection.NextCol;
_sheet2.ActionNextColInLast = ActionNextColInLast.NextRow;

Grabacion.2025-04-27.202230.mp4

With

_sheet2.ActionNextColInLast = ActionNextColInLast.NextRowAndAddRow;

Grabacion.2025-04-27.202632.mp4

[Inox]

@anmcgrath, the code is very clear, and it was very easy to find where to make the changes.
I'm not sure if the names used for the enums are appropriate.
I have a problem with the parameter ActionNextColInLast; it doesn't save it. I have to pass it to the parameter via _sheet2.ActionNextColInLast = ActionNextColInLast.NextRowAndAddRow;

[franks1]

Thank you. This is what i was looking for. Can you suggest a way to change background color once the cell gains focus. Thank you.

[anmcgrath]

Hi @franks1 currently this isn't customizable. Do you mean when the cell is edited or when it is active (e.g press enter and the active cell moves to a new position).

[franks1]

Can the above additions by @Inox be added or integrated into the main branch?