Search results

Context Menu in React Spreadsheet component

28 Oct 2021 / 5 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

Please find the table below for default context menu items and their actions.

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

Please find the table below for default context menu items and their actions.

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 Columns Insert new rows or columns into the worksheet.
Delete Columns Delete existing rows or columns from the worksheet.
Hide Columns Hide the rows and columns.
UnHide Columns Show the hidden rows and columns.

Context Menu Items in Pager

Please find the table below for default context menu items and their actions.

Context Menu items Action
Insert Insert a new worksheet in front of an existing worksheet in the spreadsheet.
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, Custom Item is added after the Paste item in the context menu.

Source
Preview
app.tsx
datasource.tsx
index.html
app.jsx
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, RowsDirective, RowDirective, CellsDirective, CellDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective} from '@syncfusion/ej2-react-spreadsheet';
import { CellStyleModel, getRangeIndexes } from '@syncfusion/ej2-react-spreadsheet';
import { ContextMenu } from './datasource';
import { addClass, removeClass } from '@syncfusion/ej2-base';

export default class App extends React.Component<{}, {}> {
public spreadsheet: SpreadsheetComponent;
public oncreated(args): void {
    if (args.element.id === this.spreadsheet.element.id + '_contextmenu') {
        this.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() {
    return  ( <div>
         <SpreadsheetComponent
                    ref={(ssObj) => { this.spreadsheet = ssObj }} contextMenuBeforeOpen={this.oncreated.bind(this)}>
                </SpreadsheetComponent> </div>);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
Copied to clipboard
/**
 * Context Menu data source
 */
export let ContextMenu: Object[] = [
    {
        'No': '1',
        'Released on': 1994,
        'Title': 'Forrest Gump',
        'Rating': '5 Stars',
        'Casts': 'Tom Hanks, Robin Wright, Gary Sinise',
        'Directed By': 'Robert Zemeckis',
        'Genre': 'Drama',
        'Comments': 'Based on the 1986 novel of the same name by Winston Groom'
    },
    {
        'No': '2',
        'Released on': 1946,
        'Title': 'It’s a Wonderful Life',
        'Rating': '2 Stars',
        'Casts': 'James Stewart, Donna Reed, Lionel Barrymore',
        'Directed By': 'Frank Capra',
        'Genre': 'Drama',
        'Comments': 'Colorized version'
    },
    {
        'No': '3',
        'Released on': 1988,
        'Title': 'Big',
        'Rating': '4 Stars',
        'Casts': 'Tom Hanks, Elizabeth Perkins, Robert Loggia',
        'Directed By': 'Penny Marshall',
        'Genre': 'Comedy',
        'Comments': 'A thirteen-year-old boy wishes to be big, and his wish comes true.'
    },
    {
        'No': '4',
        'Released on': 1954,
        'Title': 'Rear Window',
        'Rating': '4 Stars',
        'Casts': 'James Stewart, Grace Kelly, Wendell Corey',
        'Directed By': 'Alfred Hitchcock',
        'Genre': 'Suspense',
        'Comments': 'Truly suspenseful and masterfully crafted'
    }

];
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Spreadsheet</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        body {
            overflow: hidden;
        }
        .customClass.e-cell {
                        background-color: red;
                }
                
    </style>
</head>

<body>
    <div id='root'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
export default class App extends React.Component {
    oncreated(args) {
        if (args.element.id === this.spreadsheet.element.id + '_contextmenu') {
            this.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() {
        return (<div>
         <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj; }} contextMenuBeforeOpen={this.oncreated.bind(this)}>
                </SpreadsheetComponent> </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('root'));

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.

Source
Preview
app.tsx
datasource.tsx
index.html
app.jsx
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

export default class App extends React.Component<{}, {}> {
public spreadsheet: SpreadsheetComponent;
public oncreated(): void{
    // To remove existing context menu items.
    this.spreadsheet.removeContextMenuItems(["Insert Column"], false);
}
 render() {
    return  ( <div>
         <SpreadsheetComponent
                    ref={(ssObj) => { this.spreadsheet = ssObj }} contextMenuBeforeOpen={this.oncreated.bind(this)}>
                </SpreadsheetComponent> </div>);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
Copied to clipboard
/**
 * Context Menu data source
 */
export let ContextMenu: Object[] = [
    {
        'No': '1',
        'Released on': 1994,
        'Title': 'Forrest Gump',
        'Rating': '5 Stars',
        'Casts': 'Tom Hanks, Robin Wright, Gary Sinise',
        'Directed By': 'Robert Zemeckis',
        'Genre': 'Drama',
        'Comments': 'Based on the 1986 novel of the same name by Winston Groom'
    },
    {
        'No': '2',
        'Released on': 1946,
        'Title': 'It’s a Wonderful Life',
        'Rating': '2 Stars',
        'Casts': 'James Stewart, Donna Reed, Lionel Barrymore',
        'Directed By': 'Frank Capra',
        'Genre': 'Drama',
        'Comments': 'Colorized version'
    },
    {
        'No': '3',
        'Released on': 1988,
        'Title': 'Big',
        'Rating': '4 Stars',
        'Casts': 'Tom Hanks, Elizabeth Perkins, Robert Loggia',
        'Directed By': 'Penny Marshall',
        'Genre': 'Comedy',
        'Comments': 'A thirteen-year-old boy wishes to be big, and his wish comes true.'
    },
    {
        'No': '4',
        'Released on': 1954,
        'Title': 'Rear Window',
        'Rating': '4 Stars',
        'Casts': 'James Stewart, Grace Kelly, Wendell Corey',
        'Directed By': 'Alfred Hitchcock',
        'Genre': 'Suspense',
        'Comments': 'Truly suspenseful and masterfully crafted'
    }

];
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Spreadsheet</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        body {
            overflow: hidden;
        }
        .customClass.e-cell {
                        background-color: red;
                }
                
    </style>
</head>

<body>
    <div id='root'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
export default class App extends React.Component {
    oncreated() {
        // To remove existing context menu items.
        this.spreadsheet.removeContextMenuItems(["Insert Column"], false);
    }
    render() {
        return (<div>
         <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj; }} contextMenuBeforeOpen={this.oncreated.bind(this)}>
                </SpreadsheetComponent> </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('root'));

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.

Source
Preview
app.tsx
datasource.tsx
index.html
app.jsx
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, RowsDirective, RowDirective, CellsDirective, CellDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective} from '@syncfusion/ej2-react-spreadsheet';
import { ContextMenu } from './datasource';

export default class App extends React.Component<{}, {}> {
public spreadsheet: SpreadsheetComponent;
public oncreated(): void{
    //To enable / disable context menu items.
      this.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() {
    return  ( <div>
         <SpreadsheetComponent
                    ref={(ssObj) => { this.spreadsheet = ssObj }} contextMenuBeforeOpen={this.oncreated.bind(this)}>
                </SpreadsheetComponent> </div>);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
Copied to clipboard
/**
 * Context Menu data source
 */
export let ContextMenu: Object[] = [
    {
        'No': '1',
        'Released on': 1994,
        'Title': 'Forrest Gump',
        'Rating': '5 Stars',
        'Casts': 'Tom Hanks, Robin Wright, Gary Sinise',
        'Directed By': 'Robert Zemeckis',
        'Genre': 'Drama',
        'Comments': 'Based on the 1986 novel of the same name by Winston Groom'
    },
    {
        'No': '2',
        'Released on': 1946,
        'Title': 'It’s a Wonderful Life',
        'Rating': '2 Stars',
        'Casts': 'James Stewart, Donna Reed, Lionel Barrymore',
        'Directed By': 'Frank Capra',
        'Genre': 'Drama',
        'Comments': 'Colorized version'
    },
    {
        'No': '3',
        'Released on': 1988,
        'Title': 'Big',
        'Rating': '4 Stars',
        'Casts': 'Tom Hanks, Elizabeth Perkins, Robert Loggia',
        'Directed By': 'Penny Marshall',
        'Genre': 'Comedy',
        'Comments': 'A thirteen-year-old boy wishes to be big, and his wish comes true.'
    },
    {
        'No': '4',
        'Released on': 1954,
        'Title': 'Rear Window',
        'Rating': '4 Stars',
        'Casts': 'James Stewart, Grace Kelly, Wendell Corey',
        'Directed By': 'Alfred Hitchcock',
        'Genre': 'Suspense',
        'Comments': 'Truly suspenseful and masterfully crafted'
    }

];
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Spreadsheet</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        body {
            overflow: hidden;
        }
        .customClass.e-cell {
                        background-color: red;
                }
                
    </style>
</head>

<body>
    <div id='root'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
export default class App extends React.Component {
    oncreated() {
        //To enable / disable context menu items.
        this.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() {
        return (<div>
         <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj; }} contextMenuBeforeOpen={this.oncreated.bind(this)}>
                </SpreadsheetComponent> </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('root'));

Note

You can refer to our React Spreadsheet feature tour page for its groundbreaking feature representations. You can also explore our React Spreadsheet example to knows how to present and manipulate data.

See Also