Category / Section
How to customize the keyboard shortcuts in Spreadsheet
2 mins read
Description
This knowledge base explains how to customize the keyboard shortcuts in Spreadsheet.
Solution
In the below code example, you can perform enter and delete keyboard shortcuts functionality when allowKeyboardNavigation property is set to false. It can be achieved by using “onEnterKeyDown()” and “onDeleteKeyDown()” extension method which is provided in the extension script (ejSpreadsheet-keyboard-extention.min.js).
HTML
<div id="Spreadsheet"></div>
JS
$("#Spreadsheet").ejSpreadsheet({
allowKeyboardNavigation: false,
loadComplete: "loadComplete",
keyDown: "onKeyDown"
});
<script>
function loadComplete(args) {
//Here extend the ejSpreadsheet.Extension
$.extend(this, ej.spreadsheetFeatures.extension);
}
function onKeyDown(args) {
var ssObj = $("#Spreadsheet").data("ejSpreadsheet");
if (args.event.key == "Enter")
ssObj.onEnterKeyDown(args);
else if (args.event.key == "Delete")
ssObj.onDeleteKeyDown(args);
}
</script>
Razor
@(Html.EJ().Spreadsheet<object>("Spreadsheet")
.AllowKeyboardNavigation(false)
.ClientSideEvents(
events => events.LoadComplete("loadComplete").KeyDown("onKeyDown")
)
)
<script>
function loadComplete(args) {
//Here extend the ejSpreadsheet.Extension
$.extend(this, ej.spreadsheetFeatures.extension);
}
function onKeyDown(args) {
var ssObj = $("#Spreadsheet").data("ejSpreadsheet");
if (args.event.key == "Enter")
ssObj.onEnterKeyDown(args);
else if (args.event.key == "Delete")
ssObj.onDeleteKeyDown(args);
}
</script>
ASPX
<ej:Spreadsheet ID="Spreadsheet" AllowKeyboardNavigation="false" runat="server">
<ClientSideEvents LoadComplete="loadComplete" KeyDown= "onKeyDown"/>
</ej:Spreadsheet>
<script>
function loadComplete(args) {
//Here extend the ejSpreadsheet.Extension
$.extend(this, ej.spreadsheetFeatures.extension);
}
function onKeyDown(args) {
var ssObj = $("#Spreadsheet").data("ejSpreadsheet");
if (args.event.key == "Enter")
ssObj.onEnterKeyDown(args);
else if (args.event.key == "Delete")
ssObj.onDeleteKeyDown(args);
}
</script>
You can download the custom script ‘ejSpreadsheet-keyboard-extention.min.js’ from below link,
ejSpreadsheet-keyboard-extention
The list of available keyboard shortcuts in Spreadsheet can be found in the below documentation.
https://help.syncfusion.com/js/spreadsheet/keyboard-shortcuts
