Context Menu in JavaScript Spreadsheet

23 Jun 20203 minutes to read

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

Default Context Menu items

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

Section
Context Menu items
Action
Row Cell
Cut
Cut the selected cells content to the clipboard, so that you can paste it somewhere else.
Copy
Copy the selected cells content to the clipboard, so that you can paste it to somewhere else.
Paste
Paste the content from clipboard to spreadsheet.
Insert
Insert new cells or rows or columns to worksheet.
Delete
Delete existing cells or rows or columns from worksheet.
Sort
Perform sorting to the selected range of cells by ascending or descending.
Filter
Perform filtering to the selected cells based an active cell's value or active cell's color.
Hyperlink
Create a link in the spreadsheet for quick access to webpages or worksheet reference.
Comment
Add a note or extra information about the active cell.
Format Cells
Apply number format to the selected cells.
Clear Contents
Delete the contents in the selected cells.
Row Header / Column Header
Cut
Cut the selected cells content to the clipboard, so that you can paste it to somewhere else.
Copy
Copy the selected cells content to the clipboard, so that you can paste it to somewhere else.
Paste
Paste the content from clipboard to spreadsheet.
Clear Contents
Delete the contents in the selected cells.
Insert
Insert new cells or rows or columns to worksheet.
Delete
Delete existing cells or rows or columns from worksheet.
Hide
Hide the selected columns / rows.
Unhide
Unhide the selected columns / rows.
Pager
Insert
Insert new worksheet to spreadsheet.
Delete
Delete the selected worksheet from spreadsheet.
Move or copy
Opens move or copy dialog to move worksheet or to create duplicate worksheet.
Rename
Rename the selected worksheet.
Protect Sheet
Prevent unwanted changes from others by limiting their ability to edit.
Hide
Hide the selected worksheet.
Unhide
Opens unhide dialog to unhide worksheet.

The following code example describes the above behavior.

  • HTML
  • <div id="Spreadsheet"></div>
  • JAVASCRIPT
  • $(function () {
        $("#Spreadsheet").ejSpreadsheet({                                            
            enableContextMenu: true,
        });
    });

    Context Menu Customization

    You can perform the following context menu customization options in spreadsheet.

    1) Add Item

    2) Change Data Source

    3) Disable Item

    4) Enable Item

    5) Remove Item

    6) Hide Item

    7) Show Item

    Add Item

    To dynamically add items in the context menu. Use addItem method to add items in context menu via code.

    Change Data Source

    To change data source in the context menu. Use changeDataSource method to change data source in context menu via code.

    Disable Item

    To disable the items in the context menu. Use disableItem method to disable items in context menu via code.

    Enable Item

    To enable the items in the context menu. Use enableItem method to enable items in context menu via code.

    Remove Item

    To remove the items in the context menu. Use removeItem method to remove items in context menu via code.

    Hide Item

    To hide the items in the context menu. Use hideItem method to hide the items in context menu via code.

    Show Item

    To show the items in the context menu. Use showItem method to show the items in context menu via code.

    Contextmenu at Cell using Spreadsheet in JavaScript

    Contextmenu at Cell

    Contextmenu at Column Header using Spreadsheet in JavaScript

    Contextmenu at Column Header

    Contextmenu at Row Header using Spreadsheet in JavaScript

    Contextmenu at Row Header

    Contextmenu at Pager using Spreadsheet in JavaScript

    Contextmenu at Pager