HelpBot Assistant

How can I help you?

Context Menu in Angular Grid Component

19 Mar 202624 minutes to read

The Syncfusion® Angular Grid component includes a context menu that appears on right-click anywhere within the grid. The context menu provides quick access to actions such as sorting, filtering, and editing without navigating away from the grid.

Enable the context menu by configuring the grid’s contextMenuItems property. The property accepts the default set of menu items or a custom collection of objects.

To use the context menu, inject the ContextMenuService to the providers array.

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

@Component({
  providers: [ContextMenuService]
})

The context menu appears when right-clicking different areas of the grid, including:

  • Header: the grid header section.
  • Content: the main grid content area.
  • Pager: the pager section.

Context menu items vary by the clicked area; header items differ from content or pager items.

Default context menu items

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.

Pager area items

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 enabling the context menu feature in the grid:

import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { ContextMenuItem, EditSettingsModel, GridModule,  ContextMenuService, PageService, ResizeService, SortService, GroupService, EditService, PdfExportService, ExcelExportService } 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));

Custom context menu items

The Syncfusion® Angular Grid supports adding custom context menu items to the default menu.

Custom items are defined by setting the contextMenuItems property to a collection of contextMenuItemModel objects. Menu item actions are handled through the contextMenuClick event.

The following example demonstrates adding custom context menu items in the Grid component:

import { employeeData } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ContextMenuItemModel, ContextMenuService, GridComponent, GridModule, PageService } 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));

Show context menu on left click

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 Grid’s onclick event listener, the clicked position values are captured through the ngAfterViewInit method, which is ideal for DOM related interactions and operations requiring access to rendered elements. These captured positions are then passed to the context menu’s open method within the onclick event. Additionally, the default right-click behavior is prevented using the Grid’s created event.

The following example demonstrates showing the context menu on left click using the created event:

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ContextMenuItem, ContextMenuService, ExcelExportService, GridComponent, GridModule, PageService, PageSettingsModel, PdfExportService, SortService } 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));

Control the visibility of a context menu item for a particular grid area by setting the target property.

Enable or disable context menu items

The Syncfusion® Angular Grid supports enabling or disabling default and custom context menu items via the context menu’s enableItems method. Call enableItems with true to enable items or false to disable them.

The example below uses the EJ2 Toggle Switch Button component to toggle a menu item. When the switch changes state, the change event updates the Copy item by calling enableItems.

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ChangeEventArgs, ButtonModule, CheckBoxModule, RadioButtonModule, SwitchModule, } from '@syncfusion/ej2-angular-buttons';
import { ContextMenuItem, ContextMenuService, EditService, EditSettingsModel, GridComponent, GridModule, PageService } from '@syncfusion/ej2-angular-grids';

@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: 5px 5px" [dataSource]='data' id="grid" allowPaging='true' height='260px' [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));

Show or hide context menu items

The Syncfusion® Angular Grid supports showing or hiding default and custom context menu items using the context menu’s showItems and hideItems methods. Pass the target items as an argument to these methods.

The example below demonstrates the use of the EJ2 Toggle Switch Button component. Its change event triggers either showItems or hideItems to modify the Edit Record and Delete Record items accordingly.

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ChangeEventArgs , ButtonModule, CheckBoxModule, RadioButtonModule, SwitchModule,} from '@syncfusion/ej2-angular-buttons';
import { ContextMenuItem, ContextMenuService, EditService, EditSettingsModel, GridComponent, GridModule, PageService } from '@syncfusion/ej2-angular-grids';

@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: 5px 5px" [dataSource]='data' id="grid" allowPaging='true' height='260px' [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));