Syncfusion AI Assistant

How can I help you?

Customize Context Menu

18 Mar 202613 minutes to read

The Syncfusion React Spreadsheet component provides an easy way to customize the context menu. You can add custom menu items, hide default items, or change what happens when a user selects a menu option. This giving access to useful actions. You can perform the following context menu customization options in the spreadsheet

  • Add Context Menu Items
  • Remove Context Menu Items
  • Enable/Disable Context Menu Items

Add Context Menu Items

You can add custom items to the context menu using the addContextMenuItems event. Since multiple context menus are available, to identify which context menu opened, you can use thecontextmenuBeforeOpen event and access the menu’s class name from its event arguments. For more information, refer to this guide: https://help.syncfusion.com/document-processing/excel/spreadsheet/react/how-to/identify-the-context-menu-opened#identify-the-context-menu-opened-in-react-spreadsheet-component

You can use the contextmenuItemSelect event to handle when a context menu item is chosen. This event is triggered when the user selects a menu item and provides the selected item’s details and the target element in its event arguments; handle it to prevent default function or adding custom functions to the context menu item.

The following code sample shows how to handle custom actions in the contextmenuItemSelect event.

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
import { BeforeOpenCloseMenuEventArgs, MenuEventArgs } from '@syncfusion/ej2-react-splitbuttons';

function App() {
  const spreadsheetRef = React.useRef(null);

  // Add a custom context menu item right before the menu opens
  const handleContextMenuBeforeOpen = (args) => {
    const spreadsheet = spreadsheetRef.current;
    if (!spreadsheet) return;

    // Only modify the Spreadsheet's own context menu
    if (args.element.id === `${spreadsheet.element.id}_contextmenu`) {
      spreadsheet.addContextMenuItems([{ text: 'Custom Item' }], 'Paste Special', false);  //To pass the items, Item before / after that the element to be inserted, Set false if the items need to be inserted before the text.
    }
  };

  // Handle clicks on context menu items (including our custom one)
  const handleContextMenuItemSelect = (args) => {
    const spreadsheet = spreadsheetRef.current;
    if (!spreadsheet) return;

    switch (args.item.text) {
      case 'Custom Item': {
        // Example action: write a note into the active cell
        const sheet = spreadsheet.getActiveSheet();
        const range = sheet.activeCell || 'A1';
        spreadsheet.updateCell({ value: 'Custom item clicked' }, range);
        break;
      }
      // You can also branch on built‑in items if you want custom behavior for them
      // case 'Paste Special':
      //   // custom logic for Paste Special (optional)
      //   break;
      default:
        break;
    }
  };

  return (
    <SpreadsheetComponent
      ref={spreadsheetRef}
      contextMenuBeforeOpen={handleContextMenuBeforeOpen}
      contextMenuItemSelect={handleContextMenuItemSelect}
    />
  );
}

export default App;

const root = createRoot(document.getElementById('root'));
root.render(<App />);
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
import { BeforeOpenCloseMenuEventArgs, MenuEventArgs } from '@syncfusion/ej2-react-splitbuttons';

function App(): React.ReactElement {
  const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);

  // Add a custom context menu item right before the menu opens
  const handleContextMenuBeforeOpen = (args: BeforeOpenCloseMenuEventArgs): void => {
    const spreadsheet = spreadsheetRef.current;
    if (!spreadsheet) return;

    // Only modify the Spreadsheet's own context menu
    if (args.element.id === `${spreadsheet.element.id}_contextmenu`) {
      spreadsheet.addContextMenuItems([{ text: 'Custom Item' }], 'Paste Special', false);  //To pass the items, Item before / after that the element to be inserted, Set false if the items need to be inserted before the text.
    }
  };

  // Handle clicks on context menu items (including our custom one)
  const handleContextMenuItemSelect = (args: MenuEventArgs): void => {
    const spreadsheet = spreadsheetRef.current;
    if (!spreadsheet) return;

    switch (args.item.text) {
      case 'Custom Item': {
        // Example action: write a note into the active cell
        const sheet: any = spreadsheet.getActiveSheet();
        const range = sheet.activeCell || 'A1';
        spreadsheet.updateCell({ value: 'Custom item clicked' } as any, range);
        break;
      }
      // You can also branch on built‑in items if you want custom behavior for them
      // case 'Paste Special':
      //   // custom logic for Paste Special (optional)
      //   break;
      default:
        break;
    }
  };

  return (
    <SpreadsheetComponent
      ref={spreadsheetRef}
      contextMenuBeforeOpen={handleContextMenuBeforeOpen}
      contextMenuItemSelect={handleContextMenuItemSelect}
    />
  );
}

export default App;

const root = createRoot(document.getElementById('root')!);
root.render(<App />);

Remove Context Menu Items

You can remove the items in context menu using the removeContextMenuItems in contextmenuBeforeOpen event

The following code sample removes the Insert Column item from the row/column header context menu.

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

function App() {
    const spreadsheetRef = React.useRef(null);
    const onContextMenuBeforeOpen = () => {
        let spreadsheet = spreadsheetRef.current;
        // To remove existing context menu items.
        if (spreadsheet) {
            spreadsheet.removeContextMenuItems(['Insert Column'], false);
        }
    };

    return (<SpreadsheetComponent ref={spreadsheetRef} contextMenuBeforeOpen={onContextMenuBeforeOpen} />);
};
export default App;

const root = createRoot(document.getElementById('root'));
root.render(<App />);
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

function App() {
    const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
    const onContextMenuBeforeOpen = (): void => {
        let spreadsheet = spreadsheetRef.current;
        // To remove existing context menu items.
        if (spreadsheet) {
            spreadsheet.removeContextMenuItems(['Insert Column'], false);
        }  
    };

    return (<SpreadsheetComponent ref={spreadsheetRef} contextMenuBeforeOpen={onContextMenuBeforeOpen} />);
};
export default App;

const root = createRoot(document.getElementById('root')!);
root.render(<App />);

Enable/Disable Context Menu Items

You can enable/disable the items in context menu using the enableContextMenuItems in contextmenuBeforeOpen event

The following code sample disables the Rename item in the pager context menu.

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

function App() {
    const spreadsheetRef = React.useRef(null);
    const onContextMenuBeforeOpen = (args) => {
        let spreadsheet = spreadsheetRef.current;
        //To enable / disable context menu items.
        if (spreadsheet && args.element.id === spreadsheet.element.id + '_contextmenu') {
            spreadsheet.enableContextMenuItems(['Rename'], false, false); // Contextmenu Items that needs to be enabled / disabled, Set true / false to enable / disable the menu items, Set true if the given text is a unique id.
        }
    };

    return (<SpreadsheetComponent ref={spreadsheetRef} contextMenuBeforeOpen={onContextMenuBeforeOpen} />);
};
export default App;

const root = createRoot(document.getElementById('root'));
root.render(<App />);
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
import { BeforeOpenCloseMenuEventArgs } from '@syncfusion/ej2-react-splitbuttons';

function App() {
    const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
    const onContextMenuBeforeOpen = (args: BeforeOpenCloseMenuEventArgs) => {
        let spreadsheet = spreadsheetRef.current;
        //To enable / disable context menu items.
        if (spreadsheet && args.element.id === spreadsheet.element.id + '_contextmenu') {
            spreadsheet.enableContextMenuItems(['Rename'], false, false); // Contextmenu Items that needs to be enabled / disabled, Set true / false to enable / disable the menu items, Set true if the given text is a unique id.
        }
    };

    return (<SpreadsheetComponent ref={spreadsheetRef} contextMenuBeforeOpen={onContextMenuBeforeOpen} />);
};
export default App;

const root = createRoot(document.getElementById('root')!);
root.render(<App />);