Identify the context menu opened in ASP.NET Core Spreadsheet control

24 Jul 20262 minutes to read

The Spreadsheet includes several context menus that open depending on the action performed. For example, when you right-click a cell, a context menu displays options related to that cell.

Use the class name available in the contextMenuBeforeOpen event arguments to identify which context menu is opening.

To identify which context menu is opening:

1. Bind the contextMenuBeforeOpen event to the Spreadsheet.
2. In the event handler, obtain the class name from the event arguments.
3. Compare the class name with the CSS selectors listed in the following table.
4. Perform the required operation based on the identified context menu.

Context menu selectors

The following table lists the CSS selectors associated with each context menu:

Class name	Context menu name
.e-sheet-content	Cell context menu
.e-toolbar-item	Footer context menu
.e-rowhdr-table	Row header context menu
.e-colhdr-table	Column header context menu

Example

The following code example demonstrates how to identify which context menu is opening.

CSHTML

<ejs-spreadsheet id="spreadsheet" contextMenuBeforeOpen="contextMenuBeforeOpen">

</ejs-spreadsheet>

<script>

    function contextMenuBeforeOpen(args) {
        if (ejs.base.closest(args.event.target, '.e-sheet-content')) {
            console.log('Cell Context Menu');
        } else if (ejs.base.closest(args.event.target, '.e-colhdr-table')) {
            console.log('Column Header Context Menu');
        } else if (ejs.base.closest(args.event.target, '.e-rowhdr-table')) {
            console.log('Row Header Context Menu');
        } else if (ejs.base.closest(args.event.target, '.e-toolbar-item')) {
            console.log('Footer Context Menu');
        }
    }

</script>