Identify the context menu opened in Angular Spreadsheet Component

29 Nov 20243 minutes to read

The Spreadsheet includes several context menus that will open and display depending on the action. When you right-click on a cell, for example, a context menu with options related to the cell element appears.

The class name returned by the contextMenuBeforeOpen event can be used to identify the context menu that is opened. The context menus and their class names are tabulated below.

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 code example shows how to identify the context menu opened.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { DropDownButtonModule } from '@syncfusion/ej2-angular-splitbuttons'
import { SpreadsheetAllModule } from '@syncfusion/ej2-angular-spreadsheet'



import { Component, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
import { closest } from '@syncfusion/ej2-base';
import { BeforeOpenCloseMenuEventArgs } from '@syncfusion/ej2-navigations';

@Component({
imports: [
        
        DropDownButtonModule,
        SpreadsheetAllModule
    ],


standalone: true,
    selector: 'app-container',
    template: "<ejs-spreadsheet #spreadsheet (contextMenuBeforeOpen)='contextMenuBeforeOpen($event)'></ejs-spreadsheet>"
})
export class AppComponent {
  @ViewChild('spreadsheet')
  public spreadsheetObj!: SpreadsheetComponent;
  contextMenuBeforeOpen(args: BeforeOpenCloseMenuEventArgs) {
    if (closest(args.event.target as Element, '.e-sheet-content')) {
      console.log('Cell Context Menu');
    } else if (closest(args.event.target as Element, '.e-colhdr-table')) {
      console.log('Column Header Context Menu');
    } else if (closest(args.event.target as Element, '.e-rowhdr-table')) {
      console.log('Row Header Context Menu');
    } else if (closest(args.event.target as Element, '.e-toolbar-item')) {
      console.log('Footer Context Menu');
    }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));