How to monitor keyboard shortcuts like Ctrl+S in React Spreadsheet?

This knowledge base article explains how to monitor keyboard shortcuts like Ctrl + S in the React Spreadsheet. This can be done by binding the onKeyDownand onKeyUp events to the Spreadsheet component. By checking if the ctrlKey property is set to true and verifying if the keyCode is 83 in the event handling functions, you can successfully monitor the save action triggered by Ctrl + S in the Spreadsheet.

By monitoring the Ctrl + S keyboard shortcut using these events, you can implement a custom save function that fits your requirements by preventing the default save action behavior.

[index.js]

import { createRoot } from 'react-dom/client';
import './index.css';
import * as React from 'react';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, ColumnsDirective, RangesDirective, RangeDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { defaultData } from './data';

function Default() {
   let spreadsheet;
   const handleKeyDown = (event) => {
       //Triggered for keyDown event.
       //Condition to check for Ctrl+S.
       if (event.ctrlKey && event.keyCode == 83) {
           console.log('Key down:', event);
       }
   };
   const handleKeyUp = (event) => {
       //Triggered for keyUp event.
       console.log('Key up:', event);
   };
   return (<div className='control-pane'>
           <div className='control-section spreadsheet-control'>
               <SpreadsheetComponent openUrl='https://services.syncfusion.com/react/production/api/spreadsheet/open' saveUrl='https://services.syncfusion.com/react/production/api/spreadsheet/save' ref={(ssObj) => { spreadsheet = ssObj; }} onKeyDown={handleKeyDown} onKeyUp={handleKeyUp}>
                   <SheetsDirective>
                       <SheetDirective name="Car Sales Report">
                           <RangesDirective>
                               <RangeDirective dataSource={defaultData}></RangeDirective>
                           </RangesDirective>
                           <ColumnsDirective>
                               <ColumnDirective width={180}></ColumnDirective>
                               <ColumnDirective width={130}></ColumnDirective>
                               <ColumnDirective width={130}></ColumnDirective>
                               <ColumnDirective width={180}></ColumnDirective>
                               <ColumnDirective width={130}></ColumnDirective>
                               <ColumnDirective width={120}></ColumnDirective>
                           </ColumnsDirective>
                       </SheetDirective>
                   </SheetsDirective>
               </SpreadsheetComponent>
           </div>
       </div>);
}
export default Default;

const root = createRoot(document.getElementById('sample'));
root.render(<Default />); 

Sample link: https://stackblitz.com/edit/react-adfhs2-myvviw?file=index.js

Output: