Context Menu in TypeScript Spreadsheet

14 Aug 202616 minutes to read

Context Menu is used to improve user interaction with Spreadsheet using the popup menu. This will open when right-clicking on Cell/Column Header/Row Header/ Pager in the Spreadsheet. You can use enableContextMenu property to enable/disable context menu.

The default value for the enableContextMenu property is true.

Context Menu Items in Row Cell

The following table lists the default context menu items and their actions when right-clicking a cell.

Context Menu items Action
Cut Cut the selected cells data to the clipboard, you can select a cell where you want to move the data.
Copy Copy the selected cells data to the clipboard, so that you can paste it to somewhere else.
Paste Paste the data from clipboard to spreadsheet.
Paste Special Values - Paste the data values from clipboard to spreadsheet. Formats - Paste the data formats from clipboard to spreadsheet.
Filter Perform filtering to the selected cells based on an active cell’s value.
Sort Perform sorting to the selected range of cells by ascending or descending.
Hyperlink Create a link in the spreadsheet to navigate to web links or cell reference within the sheet or other sheets in the Spreadsheet.

Context Menu Items in Row Header / Column Header

The following table lists the default context menu items and their actions when right-clicking a row/column header.

Context Menu items Action
Cut Cut the selected row/column header data to the clipboard, you can select a cell where you want to move the data.
Copy Copy the selected row/column header data to the clipboard, so that you can paste it to somewhere else.
Paste Paste the data from clipboard to spreadsheet.
Paste Special Values - Paste the data values from clipboard to spreadsheet. Formats - Paste the data formats from clipboard to spreadsheet.
Insert Rows / Insert Columns Insert new rows or columns into the worksheet.
Delete Rows / Delete Columns Delete existing rows or columns from the worksheet.
Hide Rows / Hide Columns Hide the rows or columns.
UnHide Rows / UnHide Columns Show the hidden rows or columns.

Context Menu Items in Pager

The following table lists the default context menu items and their actions when right-clicking the Pager (sheet tab area).

Context Menu items Action
Insert Insert a new worksheet in front of the existing worksheet.
Delete Delete the selected worksheet from the Spreadsheet.
Rename Rename the selected worksheet.
Protect Sheet Prevent unwanted changes from others by limiting their ability to edit.
Hide Hide the selected worksheet.

Context Menu Customization

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 the custom items in context menu using the addContextMenuItems in contextmenuBeforeOpen event

In this demo, a Custom Item is added after the Paste item in the context menu.

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';

    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
        contextMenuBeforeOpen: (args): void => {
            if (args.element.id === spreadsheet.element.id + '_contextmenu') {
           // To add context menu items.
             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.
          }
        }
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');
<!DOCTYPE html>
<html lang="en">

<head>
        <title>EJ2 SpreadSheet</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="Typescript UI Controls" />
        <meta name="author" content="Syncfusion" />
        <link rel="shortcut icon" href="resources/favicon.ico" />
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-grids/styles/tailwind3.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-spreadsheet/styles/tailwind3.css" rel="stylesheet" />
        <link href="styles.css" rel="stylesheet" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/shim.min.js"></script>
        <script src="system.config.js"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <!--Element which is going to render-->
        <div id='loader'>Loading....</div>
        <div id='container'>
                <div id="spreadsheet"></div>
        </div>
</body>

</html>

Remove Context Menu Items

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

In this demo, Insert Column item has been removed from the row/column header context menu.

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';

    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
        // To remove existing context menu items.
        contextMenuBeforeOpen: (): void => {
            spreadsheet.removeContextMenuItems(["Insert Column"], false); //Items that needs to be removed, Set `true` if the given `text` is a unique id.
        }
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');
<!DOCTYPE html>
<html lang="en">

<head>
        <title>EJ2 SpreadSheet</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="Typescript UI Controls" />
        <meta name="author" content="Syncfusion" />
        <link rel="shortcut icon" href="resources/favicon.ico" />
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-spreadsheet/styles/tailwind3.css" rel="stylesheet" />
        <link href="styles.css" rel="stylesheet" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/shim.min.js"></script>
        <script src="system.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
       <!--Element which is going to render-->
       <div id='loader'>Loading....</div>
       <div id='container'>
       <div id="spreadsheet"></div>
       </div>
</body>

</html>

Enable/Disable Context Menu Items

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

In this demo, Rename item is disabled in the pager context menu.

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';

    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
        contextMenuBeforeOpen: (): void => {
            //To enable / disable context menu items.
          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.
        }
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');
<!DOCTYPE html>
<html lang="en">

<head>
        <title>EJ2 SpreadSheet</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="Typescript UI Controls" />
        <meta name="author" content="Syncfusion" />
        <link rel="shortcut icon" href="resources/favicon.ico" />
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-spreadsheet/styles/tailwind3.css" rel="stylesheet" />
        <link href="styles.css" rel="stylesheet" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/shim.min.js"></script>
        <script src="system.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
       <!--Element which is going to render-->
       <div id='loader'>Loading....</div>
       <div id='container'>
       <div id="spreadsheet"></div>
       </div>
</body>

</html>

See Also