SpreadJS already supports many of Excel's shortcut keys for quickly navigating through the spreadsheet data. However, there may be times you would like to customize your keyboard shortcut combination keys or implement a new Excel shortcut combination. Fortunately, SpreadJS makes this easy to do!
This blog will show you how to implement keyboard shortcut combinations of CTRL and an arrow key to allow the user to fast travel to the end of a data region of a worksheet.
To do this, you will first overwrite the default SpreadJS keyboard shortcut for CTRL and an arrow key as Null and then create custom commands to mimic Excel’s fast navigation. You can also refer to the SpreadJS’s Keyboard Navigation Shortcuts for the current key combinations.
Project Set-Up:
- We will first set up our project by including the required SpreadJS release files and css
- gc.spread.sheets.all
- gc.spread.sheets.charts
- gc.spread.excelio
- gc.spread.sheets.excel2016colorful
- FileSaver
These can be included in you project like so:
- Next, include a DOM element as the container
- Initialize the SpreadJS Component
Create Custom Command Functions:
We must write a new custom command that will be fired when hitting specified key combinations so SpreadJS will mimic Excel’s Fast Navigation.
Adjust Selection:
This function is used by the custom commands to adjust the selection of the SpreadJS cells:
Right:
Left:
Up:
Down:
Set SpreadJS’s Default Keyboard Shortcut to Null
Before we can apply these custom commands, we must set SpreadJS’s Keyboard Navigation Shortcuts to null.
Right
Left
Up
Down
Set the Custom Command Shortcut Keys
We will now set the keyboard shortcuts with new custom command name for each arrow and CTRL keyboard pressing combination. Below we broke down the custom commands for the keyboard combination of arrow keys: right, left, up, down.
Here is a link to SpreadJS’s documentation for more information on setting a shortcut key.
Right
Left
Up
Down
Bind Custom Commands to Keyboard Shortcuts
Finally, we will bind our custom command functions to command name of the new keyboard shortcuts.
We will first need to get the command manager using the commandManager method:
Then, we will register the new keyboard shortcut to the custom command functions using the register method:
Call to Action:
Using the code shared here in this tutorial, the keyboard combination of CTRL + Arrow key will move to the end of the current data region in the row or column based on the Arrow key direction.
Users can use this logic to add other Excel Keyboard shortcuts that is not included by default.
You can learn more about SpreadJS and download a 30-day evaluation here.