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

24 Jul 20262 minutes to read

The Spreadsheet provides different context menus depending on the user action. For example, right-clicking a cell displays a context menu with options related to the selected cell.

Use the class name available in the contextMenuBeforeOpen event arguments to identify which context menu is being opened. 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

The following example demonstrates how to identify which context menu is being opened.

@Html.EJS().Spreadsheet("spreadsheet").ContextMenuBeforeOpen("contextMenuBeforeOpen").Render()

<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-sheet-tabs-items')) {
            console.log('Footer Context Menu');
        }
    }

</script>