We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Enter key behavior in Spreadsheet

After editing a cell in a spreadsheet, the user presses Enter and the active cell is moved down the the next row.  In other words, if the user presses Enter in cell F7, then cell F8 will be selected.  This is the same behavior as Excel.  

However, suppose I want to move the cell to the right, instead of moving down, such that G7 would be selected after pressing enter on F7.  How can I handle the SS events to implement this behavior?


1 Reply

VR Vasanth Ravi Syncfusion Team March 16, 2023 12:33 PM UTC

Hi John,


Your requirement can be achieved through keyDownHandler(). We have prepared a sample that prompts you to navigate through cells on right. We have fetched the address on the nearby cell to the active cell and make it to navigate.


Please find the code block and sample for your kind reference.


CODE BLOCK:


// Binding a listener function.

    document.getElementById("spreadsheet").addEventListener("keydown", navigateCell);

 

    function navigateCell () {

        if (event.keyCode === 13) { // for Enter key

            event.stopImmediatePropagation(); 

            spreadsheet.endEdit(); // Use `endEdit` method if you want to save the changes.

            var sheet = spreadsheet.getActiveSheet();

            let cellIdx = getRangeIndexes(sheet.activeCell);

            var nextCell = getRangeAddress([

                cellIdx[0],

                cellIdx[1] + 1,

                cellIdx[2],

                cellIdx[3] + 1

            ]);

            spreadsheet.selectRange(nextCell);

        }

    }


Stackblitz Sample: https://stackblitz.com/edit/ivvdh2-te2pmu?file=index.ts


Note: If this post is helpful, please mark it as an answer so that other members can locate it more quickly.


Loader.
Live Chat Icon For mobile
Up arrow icon