Context menu in Angular Grid component

25 Aug 202524 minutes to read

The Syncfusion Angular Grid component provides a context menu feature that appears when users right-click anywhere within the grid. This feature enhances user experience by providing quick access to relevant actions and operations for the displayed data.

To enable the context menu, configure the grid’s contextMenuItems property. This property accepts either an array of predefined context menu item names or an array of contextMenuItemModel objects for custom items.

To use the context menu, inject the ContextMenuService in the provider section of AppModule.

import { ContextMenuService } from '@syncfusion/ej2-angular-grids';

@NgModule({
  providers: [ContextMenuService]
})

The context menu appears when right-clicking on different grid areas:

Header: Right-click on column headers
Content: Right-click on data rows and cells
Pager: Right-click on pagination controls

Header area items

The default context menu items available in the grid header are:

Items	Description
`AutoFit`	Automatically adjust the column width to fit the content.
`AutoFitAll`	Automatically adjust all column widths to fit their content.
`Group`	Group the data based on the current column.
`Ungroup`	Remove grouping for the current column.
`SortAscending`	Sort the current column in ascending order.
`SortDescending`	Sort the current column in descending order.

Content area items

The default context menu items available in the grid content area are:

Items	Description
`Edit`	Edit the currently selected record in the grid.
`Delete`	Delete the currently selected record.
`Save`	Save the changes made to the edited record.
`Cancel`	Cancel the edit state and revert changes made to the edited record.
`Copy`	Copy the selected records to the clipboard.
`PdfExport`	Export the grid data as a PDF document.
`ExcelExport`	Export the grid data as an Excel document.
`CsvExport`	Export the grid data as a CSV document.

The default context menu items available in the grid pager area are:

Items	Description
`FirstPage`	Navigate to the first page of the grid.
`PrevPage`	Navigate to the previous page of the grid.
`LastPage`	Navigate to the last page of the grid.
`NextPage`	Navigate to the next page of the grid.

The following example demonstrates how to enable the context menu feature in the grid:

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule } from '@syncfusion/ej2-angular-grids'
import {
    ContextMenuService, PageService, ResizeService, SortService, GroupService, EditService,
    PdfExportService, ExcelExportService
} from '@syncfusion/ej2-angular-grids'




import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import { EditSettingsModel, ContextMenuItem, } from '@syncfusion/ej2-angular-grids';

@Component({
imports: [
        
        GridModule
    ],

providers: [ContextMenuService,
        PageService,
        ResizeService,
        SortService,
        GroupService,
        EditService,
        PdfExportService,
        ExcelExportService],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' id="gridcomp" allowPaging='true' [allowExcelExport]='true'
    [allowPdfExport]='true' height='220px' [allowSorting]='true' [allowGrouping]='true' [contextMenuItems]="contextMenuItems" 
    [editSettings]='editing'>
        <e-columns>
            <e-column field='OrderID' headerText='Order ID' width='90' textAlign="Right" isPrimaryKey='true'></e-column>
            <e-column field='CustomerID' headerText='Customer Name' width='100'></e-column>
            <e-column field='Freight' headerText='Freight' format='C2' textAlign="Right" editType='numericedit' width='80'></e-column>
            <e-column field='ShipCity' headerText='Ship City' width='100'></e-column>
        </e-columns>
    </ejs-grid>`,
})
export class AppComponent implements OnInit {

    public data?: object[];
    public contextMenuItems?: ContextMenuItem[];
    public editing?: EditSettingsModel;

    ngOnInit(): void {
        this.data = data;
        this.editing = { allowEditing: true, allowDeleting: true };
        this.contextMenuItems = ['AutoFit',
            'AutoFitAll',
            'SortAscending',
            'SortDescending',
            'Copy',
            'Edit',
            'Delete',
            'Save',
            'Cancel',
            'PdfExport',
            'ExcelExport',
            'CsvExport',
            'FirstPage',
            'PrevPage',
            'LastPage',
            'NextPage',
            'Group',
            'Ungroup'
        ]
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

The Syncfusion Angular Grid allows you to add custom context menu items to the default context menu. These customized options enable you to tailor the context menu to meet your application’s specific requirements.

To add custom context menu items, configure the contextMenuItems property with an array of contextMenuItemModel objects. This allows you to define the appearance and behavior of additional context menu items.

Handle user interactions with custom items using the contextMenuClick event. This event provides access to the clicked menu item and enables you to execute specific actions when custom items are selected.

The following example demonstrates how to add custom context menu items in the Grid component:

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule } from '@syncfusion/ej2-angular-grids'
import { PageService, ContextMenuService,  } from '@syncfusion/ej2-angular-grids'



import { Component, OnInit, ViewChild } from '@angular/core';
import { employeeData } from './datasource';
import { GridComponent, ContextMenuItemModel } from '@syncfusion/ej2-angular-grids';
import { MenuEventArgs } from '@syncfusion/ej2-navigations';

@Component({
imports: [
        
        GridModule
    ],

providers: [ContextMenuService, PageService],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid id='grid' [dataSource]='data' [allowSelection]='true' 
                [allowPaging]='true'height='265px' [contextMenuItems]='contextMenuItems' 
                (contextMenuClick)='contextMenuClick($event)'>
                    <e-columns>
                        <e-column field='EmployeeID' [isPrimaryKey]='true' headerText='Employee ID' textAlign='Right' width=120></e-column>
                        <e-column field='FirstName' headerText='FirstName' width=150></e-column>
                        <e-column field='LastName' headerText='Last Name' width=150></e-column>
                        <e-column field='City' headerText='City' width=150></e-column>
                    </e-columns>
                </ejs-grid>`,
})
export class AppComponent implements OnInit {

    public data?: object[];
    public contextMenuItems?: ContextMenuItemModel[];
    @ViewChild('grid')
    public grid?: GridComponent;

    ngOnInit(): void {
        this.data = employeeData;
        this.contextMenuItems=[{ text: 'Copy with headers', target: '.e-content', id: 'copywithheader' }];
    }

    contextMenuClick(args: MenuEventArgs): void {
        if (args.item.id === 'copywithheader') {
            (this.grid as GridComponent).copy(true);
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

The Syncfusion Angular Grid provides the ability to display context menu items on a left mouse click instead of the default right mouse click action.

This functionality can be implemented using the created event and the context menu’s beforeOpen event.

Using the onclick event listener of the Grid, you can capture clicked position values through the ngAfterViewInit method. This method is suitable for DOM interactions and operations requiring access to rendered elements. The captured positions are then passed to the open method of the context menu within the onclick event. Additionally, the default right-click behavior is prevented using the created event of the Grid.

The following example demonstrates how to show the context menu on left click using the created event:

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule } from '@syncfusion/ej2-angular-grids'
import { ContextMenuService, PageService, SortService, ExcelExportService, PdfExportService } from '@syncfusion/ej2-angular-grids'

import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent, ContextMenuItem, PageSettingsModel } from '@syncfusion/ej2-angular-grids';
import { BeforeOpenCloseMenuEventArgs } from '@syncfusion/ej2-navigations';

@Component({
imports: [
        
        GridModule
    ],

providers: [ContextMenuService, PageService, SortService, ExcelExportService, PdfExportService],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' #grid id="Grid" [allowPaging]='true' [pageSettings]='pageSettings' [allowExcelExport]='true' [allowPdfExport]='true' 
                [allowSorting]='true' [contextMenuItems]="contextMenuItems" (created)="created()">
                    <e-columns>
                        <e-column field='OrderID' headerText='Order ID' width='90' textAlign="Right" isPrimaryKey='true'></e-column>
                        <e-column field='CustomerID' headerText='Customer Name' width='100'></e-column>
                        <e-column field='ShipCountry' headerText='Ship Country' width='100'></e-column>
                        <e-column field='ShipCity' headerText='Ship City' width='100'></e-column>
                    </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public values?: any;
    public data?: object[];
    public contextMenuItems?: ContextMenuItem[];
    public pageSettings?: PageSettingsModel;
    @ViewChild('grid')
    public grid?: GridComponent;

    ngOnInit(): void {
        this.data = data;
        this.contextMenuItems = [
            'SortAscending',
            'SortDescending',
            'FirstPage',
            'PrevPage',
            'LastPage',
            'NextPage',
            'PdfExport',
            'ExcelExport',
        ];
        this.pageSettings = { pageSize: 8 };
    }

    ngAfterViewInit(): void {
        const gridElement = document.getElementById('Grid');
            (gridElement as HTMLElement).onclick = (event: MouseEvent) => {
                this.values = event;
                (this.grid as GridComponent).contextMenuModule.contextMenu.open(
                    this.values.pageY + pageYOffset,
                    this.values.pageX + pageXOffset
                );
        }
        
    }

    created(): void {
        (this.grid as GridComponent).contextMenuModule.contextMenu.beforeOpen = (
            args: BeforeOpenCloseMenuEventArgs
          ) => {
            if (args.event instanceof MouseEvent && args.event.which === 3) {
              args.cancel = true;
            }
            args.event = this.values;
            (this.grid as any).contextMenuModule.contextMenuBeforeOpen(
                args
              );
          };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

You can hide or show an item in the context menu for specific areas inside the grid by defining the target property.

The Syncfusion Angular Grid allows you to dynamically enable or disable both default and custom context menu items. This feature provides flexibility to control the behavior of context menu items based on specific conditions or user interactions within your application.

This functionality is achieved using the enableItems method of the context menu. Set the enable parameter to true to enable context menu items, or false to disable them. You can conditionally enable or disable context menu items using the enableItems method based on your specific requirements.

In the following example, the EJ2 Toggle Switch Button component is added to enable and disable context menu items using the enableItems method. When the switch is toggled, the change event is triggered, and the Copy item is updated accordingly.

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule } from '@syncfusion/ej2-angular-grids'
import { ContextMenuService, PageService, EditService } from '@syncfusion/ej2-angular-grids'
import {
    ButtonModule,
    CheckBoxModule,
    RadioButtonModule,
    SwitchModule,
} from '@syncfusion/ej2-angular-buttons'

import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent, EditSettingsModel, ContextMenuItem } from '@syncfusion/ej2-angular-grids';
import { ChangeEventArgs } from '@syncfusion/ej2-angular-buttons';

@Component({
imports: [
        
        GridModule,
        ButtonModule,
        CheckBoxModule,
        RadioButtonModule,
        SwitchModule,
    ],

providers: [ContextMenuService, PageService, EditService],
standalone: true,
    selector: 'app-root',
    template: `
    <div>
    <label style="padding: 10px 10px">
    Enable or disable context menu items
    </label>
    <ejs-switch id="switch" (change)="switchChange($event)"></ejs-switch>
    </div>
    <ejs-grid  #grid style="padding: 10px 10px" [dataSource]='data' id="grid" allowPaging='true' height='265px'
            [contextMenuItems]="contextMenuItems" [editSettings]='editing' >
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' width='90' textAlign="Right" isPrimaryKey='true'></e-column>
                    <e-column field='CustomerID' headerText='Customer Name' width='100'></e-column>
                    <e-column field='Freight' headerText='Freight' format='C2' textAlign="Right" editType='numericedit' width='90'></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width='150'></e-column>
                </e-columns>
            </ejs-grid>`,
})
export class AppComponent implements OnInit {

    public data?: object[];
    public contextMenuItems?: ContextMenuItem[];
    @ViewChild('grid')
    public grid?: GridComponent;
    public editing?: EditSettingsModel;

    ngOnInit(): void {
        this.data = data;
        this.contextMenuItems = ['Copy', 'Edit', 'Delete'];
        this.editing = { allowAdding: true, allowDeleting: true, allowEditing: true };
    }

    switchChange(args: ChangeEventArgs) {
        if (args.checked) {
            (this.grid as GridComponent).contextMenuModule.contextMenu.enableItems(['Copy'], false);
        } else {
            (this.grid as GridComponent).contextMenuModule.contextMenu.enableItems(['Copy'], true);
        }
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

The Syncfusion Angular Grid provides the flexibility to dynamically show or hide both default and custom context menu items. This feature allows you to customize the context menu items based on various conditions or user interactions.

This functionality is achieved using the showItems and hideItems methods of the context menu. Specify the item you want to show or hide as an argument to these methods.

In the following example, the EJ2 Toggle Switch Button component is added to show or hide context menu items using the showItems and hideItems methods. When the switch is toggled, the change event is triggered, and the Edit and Delete items are updated accordingly.

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule } from '@syncfusion/ej2-angular-grids'
import { ContextMenuService, PageService, EditService } from '@syncfusion/ej2-angular-grids'
import {
    ButtonModule,
    CheckBoxModule,
    RadioButtonModule,
    SwitchModule,
} from '@syncfusion/ej2-angular-buttons'

import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent, EditSettingsModel, ContextMenuItem } from '@syncfusion/ej2-angular-grids';
import { ChangeEventArgs } from '@syncfusion/ej2-angular-buttons';

@Component({
imports: [
        
        GridModule,
        ButtonModule,
        CheckBoxModule,
        RadioButtonModule,
        SwitchModule,
    ],

providers: [ContextMenuService, PageService, EditService],
standalone: true,
  selector: 'app-root',
  template: `
    <div>
    <label style="padding: 10px 10px">
    Show or hide context menu items
    </label>
    <ejs-switch id="switch" (change)="switchChange($event)"></ejs-switch>
    </div>
    <ejs-grid  #grid style="padding: 10px 10px" [dataSource]='data' id="grid" allowPaging='true' height='265px'
            [contextMenuItems]="contextMenuItems" [editSettings]='editing' >
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' width='90' textAlign="Right" isPrimaryKey='true'></e-column>
                    <e-column field='CustomerID' headerText='Customer Name' width='100'></e-column>
                    <e-column field='Freight' headerText='Freight' format='C2' textAlign="Right" editType='numericedit' width='90'></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width='150'></e-column>
                </e-columns>
            </ejs-grid>`,
})
export class AppComponent implements OnInit {

  public data?: object[];
  public contextMenuItems?: ContextMenuItem[];
  @ViewChild('grid')
  public grid?: GridComponent;
  public editing?: EditSettingsModel;

  ngOnInit(): void {
    this.data = data;
    this.contextMenuItems = ['Copy', 'Edit', 'Delete'];
    this.editing = { allowAdding: true, allowDeleting: true, allowEditing: true };
  }

  switchChange(args: ChangeEventArgs) {
    if (args.checked) {
      (this.grid as GridComponent).contextMenuModule.contextMenu.hideItems([
        'Edit Record',
        'Delete Record',
      ]);
    } else {
      (this.grid as GridComponent).contextMenuModule.contextMenu.showItems([
        'Edit Record',
        'Delete Record',
      ]);
    }
  }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Context menu in Angular Grid component

Context menu areas

Default context menu items

Header area items

Content area items

Custom context menu items

Show context menu on left click

Enable or disable context menu items

Show or hide context menu items

Context menu in Angular Grid component

Context menu areas

Default context menu items

Header area items

Content area items

Pager area items

Custom context menu items

Show context menu on left click

Enable or disable context menu items

Show or hide context menu items