Having trouble getting help?
Contact Support
Contact Support
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));