Goto to cell and open it for editing
Hi Frank,
Thank you for reaching out.
We would like to inform you that, in the current Blazor Spreadsheet behavior, when a user edits a cell and presses Enter, the edited value is saved, and the focus moves down to the next row in the same column. Similarly, pressing Tab after editing moves focus to the next column in the same row, allowing users to continue entering data horizontally.
Please note these actions only change the cell focus; the spreadsheet does not automatically enter edit mode in the newly focused cell unless the user starts typing or explicitly triggers editing.
For your reference, we have attached the output screenshot/GIF illustrating this default behavior
Before proceeding further, we would need the following additional details from your side to help us validate the issue more accurately:
1. Are you expecting the spreadsheet to automatically focus/select a specific cell based on your custom logic in code‑behind?
2. Do you want to read the value entered in the current cell and then programmatically move the focus to a different row or column depending on that value? If yes, could you share an example scenario of the expected behavior, so we understand the expected behavior?
3. When a user selects a cell that already has a value, whether we need to prevent cell editing? Please confirm on this.
4. If possible, please share the live time example along with the video demonstration to better understand your requirement.
Kindly share the above requested details from your end. Based on that, we will validate and update you with further details.
Please feel free to reach out if you have any further questions or concerns - we’re happy to assist.
Regards,
Adithyan.
Hi Frank,
Thank you for sharing the details.
We validated the information you provided and understand that your requirement is to move the cell focus to the next row after updating a cell value. We also reviewed the MoveCurrentCell function in the UWP Spreadsheet, which changes the active cell based on the specified row and column indexes. Currently, our Blazor Spreadsheet does not have built-in API to programmatically move the active cell from code-behind.
However, to achieve the desired navigation behavior, we prepared a simple workaround at the sample level that programmatically moves focus to the next row after a cell is edited. In the sample application,
- We binded the CellSaved event in the Spreadsheet, which fires after a cell’s value is edited and saved.
- From the event args (Address), we identify the edited cell and compute the next-row target.
- We then use a lightweight JavaScript interop call to simulate a click (via mousedown and mouseup) on the target cell.
- This allows the Spreadsheet to shift the active cell focus to the next row automatically without requiring any manual mouse interaction.
For your convenience, we have attached the code snippet, output below along with the prepared sample for your reference.
Code Snippet:
@rendermode InteractiveServer @using Syncfusion.Blazor.Spreadsheet @inject IJSRuntime RunTime
<SfSpreadsheet ID="SfSpreadsheet" CellSaved="OnCellSaved" > <SpreadsheetRibbon></SpreadsheetRibbon> </SfSpreadsheet>
@code {
private async void OnCellSaved(CellSavedEventArgs args) { await SelectRangeFromCellAddressAsync(args.Address); }
/// <summary> /// Selects and focuses on the next row after a cell is saved. /// </summary> /// <param name="cellAddress">The cell address in format "SheetName!CellReference" (e.g., "Sheet1!A3").</param> /// <returns>A task representing the asynchronous operation.</returns> private async Task SelectRangeFromCellAddressAsync(string cellAddress) { try { const char SheetSeparator = '!'; var addressParts = cellAddress.Split(SheetSeparator);
if (addressParts.Length != 2) { return; }
int currentRowNumber = ExtractRowNumber(addressParts[1]); int nextRowNumber = currentRowNumber + 1; string nextCellAddress = $"A{nextRowNumber}";
// Invoke JavaScript to focus on the next row await RunTime.InvokeVoidAsync("findCellElementAndMoveActiveCell", "SfSpreadsheet", nextCellAddress); } catch (Exception ex) { Console.WriteLine($"Error in SelectRangeFromCellAddressAsync: {ex.Message}"); } }
/// <summary> /// Extracts the numeric row number from a cell reference. /// </summary> /// <param name="cellReference">The cell reference (e.g., "A3", "B10").</param> /// <returns>The row number, or 0 if extraction fails.</returns> private static int ExtractRowNumber(string cellReference) { var numberMatch = System.Text.RegularExpressions.Regex.Match(cellReference, @"\d+"); return int.TryParse(numberMatch.Value, out int rowNumber) ? rowNumber : 0; } } |
JavaScript Code:
function findCellElementAndMoveActiveCell(spreadsheetId, cellAddress) { const spreadsheetElement = document.getElementById(spreadsheetId); if (!spreadsheetElement) return;
// Find the cell element with the matching data-uid attribute const cellElement = spreadsheetElement.querySelector(`td[data-uid="${cellAddress}"]`); if (cellElement) {
// Trigger mousedown event with preventDefault and stopPropagation const mousedownEvent = new MouseEvent('mousedown', { bubbles: true, cancelable: true, view: window }); cellElement.dispatchEvent(mousedownEvent);
// Immediately trigger mouseup event to complete the click and prevent drag behavior const mouseupEvent = new MouseEvent('mouseup', { bubbles: true, cancelable: true, view: window }); cellElement.dispatchEvent(mouseupEvent);
} else { console.log(`Cell with address "${cellAddress}" not found in the spreadsheet.`); } } |
Output screenshot:
Sample project: Please refer the attachment
However, we would also like to highlight limitation regarding the above workaround. In our Blazor Spreadsheet, we uses row/column virtualization by default which renders only the cells visible in the current viewport in the DOM. Because of this:
- The workaround will move focus only if the target cell is currently visible.
- If the next cell is outside the viewport (e.g., moving several rows down), the DOM element does not yet exist, and focus cannot be moved using this approach.
This limitation is due to the internal virtualization mechanism and cannot be overridden at this time.
Kindly review the above shared details and let us know if you have any further questions or concerns.
Regards,
Adithyan
Attachment: SfSpreadsheet_48f6e4c3.zip
