---
title: "Context Menu"
enterprise: true
framework: angular
version: "36.1.0"
---

# Context Menu

The user can bring up the context menu by right clicking on a cell. By default, the context menu shows [Clipboard](https://www.ag-grid.com/angular-data-grid/clipboard/), [CSV Export](https://www.ag-grid.com/angular-data-grid/csv-export/), [Excel Export](https://www.ag-grid.com/angular-data-grid/excel-export/) and [Integrated Charts](https://www.ag-grid.com/angular-data-grid/integrated-charts/) menu items (if the relevant [Modules](https://www.ag-grid.com/angular-data-grid/modules/) are loaded).

#### Default Context Menu

```ts
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  CellSelectionOptions,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import {
  CellSelectionModule,
  ClipboardModule,
  ColumnMenuModule,
  ContextMenuModule,
  ExcelExportModule,
  IntegratedChartsModule,
} from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  ClipboardModule,
  ExcelExportModule,
  ColumnMenuModule,
  ContextMenuModule,
  CellSelectionModule,
  IntegratedChartsModule.with(AgChartsEnterpriseModule),
]);
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [cellSelection]="true"
    [enableCharts]="true"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    { field: "athlete", minWidth: 200 },
    { field: "age" },
    { field: "country", minWidth: 200 },
    { field: "year" },
    { field: "date", minWidth: 180 },
    { field: "sport", minWidth: 200 },
    { field: "gold" },
    { field: "silver" },
    { field: "bronze" },
    { field: "total" },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
  };
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.http
      .get<
        IOlympicData[]
      >("https://www.ag-grid.com/example-assets/olympic-winners.json")
      .subscribe((data) => (this.rowData = data));
  }
}
```

[Live example: Default Context Menu](https://www.ag-grid.com/examples/context-menu/default-context-menu/angular)

## Configuring the Context Menu

You can customise the context menu in one of two ways:

1. Set `colDef.contextMenuItems`. This can either be a list of menu items, or a callback which is passed the list of default menu items.
2. Set the grid option `getContextMenuItems()`. This callback will be passed the list of default menu items as well as the column.

Note that `colDef.contextMenuItems` will take priority over `getContextMenuItems()`.

The menu item list should be a list with each item either a) a string or b) a `MenuItemDef` description. Use 'string' to pick from built-in menu items (listed below) and use `MenuItemDef` descriptions for your own menu items.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `contextMenuItems` | `(DefaultMenuItem \| MenuItemDef)[] \| GetContextMenuItems` |  |  | Customise the list of menu items available in the context menu. Module: [`ContextMenuModule`](https://www.ag-grid.com/angular-data-grid/modules/). |

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `getContextMenuItems` | `GetContextMenuItems` |  |  | For customising the context menu. Module: [`ContextMenuModule`](https://www.ag-grid.com/angular-data-grid/modules/). |

You can also provide your own [Custom Menu Item Components](https://www.ag-grid.com/angular-data-grid/component-menu-item/).

If you want to access your underlying data item, you can access that through the rowNode as `node.data`.

Note: if you set `checked=true`, then the icon will be ignored - these options are mutually exclusive.

If you want to turn off the context menu completely, set the grid property `suppressContextMenu=true`.

## Built In Menu Items

The following is a list of all the default built in menu items with the rules about when they are shown.

- `autoSizeAll`: Auto-size all columns. Not shown by default.
- `expandAll`: When set, it's only shown if grouping by at least one column. Not shown by default.
- `contractAll`: Collapse all groups. When set, it's only shown if grouping by at least one column. Not shown by default.
- `copy`: Copy selected value to clipboard. Shown by default.
- `copyWithHeaders`: Copy selected value to clipboard with headers. Shown by default.
- `copyWithGroupHeaders`: Copy selected value to clipboard with headers and header groups. Shown by default.
- `cut`: Cut the selected value to clipboard. Not shown by default.
- `paste`: Paste the clipboard value into the selected cell (see note below). Shown by default.
- `note`: Notes actions for the current cell. Expands to `Add Note`, `Edit Note`, `View Note` and `Remove Note` depending on the current cell state. Shown when [Notes](https://www.ag-grid.com/angular-data-grid/notes/) is enabled.
- `resetColumns`: Reset all columns. Not shown by default.
- `export`: Export sub menu (containing csvExport and excelExport). Shown by default.
- `csvExport`: Export to CSV using all default export values. Shown by default.
- `excelExport`: Export to Excel (.xlsx) using all default export values. Shown by default.
- `chartRange`: Chart a range of selected cells. Only shown if charting is enabled. Configured via [chartToolPanelsDef](https://www.ag-grid.com/angular-data-grid/integrated-charts-chart-tool-panels/).
- `pivotChart`: Chart all grouped and pivoted data from the grid. Only shown if charting is enabled and in [Pivot Mode](https://www.ag-grid.com/angular-data-grid/integrated-charts-pivot-chart/). Configured via [chartToolPanelsDef](https://www.ag-grid.com/angular-data-grid/integrated-charts-chart-tool-panels/).
- `pinRowSubMenu`: Row pinning sub menu (containing `pinTop`, `pinBottom` and `unpinRow`). Shown when [Row Pinning](https://www.ag-grid.com/angular-data-grid/row-pinning/) is enabled.
- `pinTop`: Pin a row to the top of the grid. Shown when [Row Pinning](https://www.ag-grid.com/angular-data-grid/row-pinning/) is enabled.
- `pinBottom`: Pin a row to the botom of the grid. Shown when [Row Pinning](https://www.ag-grid.com/angular-data-grid/row-pinning/) is enabled.
- `unpinRow`: Unpin a row from the top or bottom of the grid. Shown for pinned rows when [Row Pinning](https://www.ag-grid.com/angular-data-grid/row-pinning/) is enabled.

Menu items also require the relevant [Module](https://www.ag-grid.com/angular-data-grid/modules/) to be loaded in order to be displayed.

> **Note**
>
> The 'paste' operation in the context menu uses the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API). This means that if your app is running inside an iframe, or if the Clipboard API is blocked, only **blank data** will be pasted into the cell.
>
> When the Clipboard API is not available, browser security restrictions prevent JavaScript from reading clipboard data without the user explicitly performing a paste action (e.g. `^ Ctrl`+`V` or selecting Paste from the browser menu). These restrictions exist to prevent malicious websites from stealing clipboard data.
>
> This paste option will be disabled if suppressClipboardApi={true} or if the target cell is not editable.

## Default Context Menu

One drawback of using the AG Grid context menu is that you may want to show the browser's context menu when debugging, for example in order to access your browser's dev tools. If you want the grid to do nothing (and hence allow the browser to display its context menu) then hold down the `^ Ctrl` key while clicking for the context menu. If you always want the grid's context menu, even when `^ Ctrl` is pressed, then set `allowContextMenuWithControlKey=true`.

## Hiding the Context Menu

Hide the context menu with the grid API `hidePopupMenu()`, which will hide either the context menu or the [Column Menu](https://www.ag-grid.com/angular-data-grid/column-menu/), whichever is showing.

## Context Menu Example

Below shows a configured context menu in action demonstrating a customised menu with a mix of custom items. You should notice the following:

- A mix of built in items and custom items are used.
- The first item uses the contents of the cell to display its value. Clicking on it logs the cell data to the developer console.
- The **Country** column uses a Promise to return the menu items asynchronously.
- Country and Person are sub menus. The country sub menu contains icons.
- The top menu item has CSS classes applied to it.
- The 'Always Disabled' menu item has a tooltip.

#### Context Menu Example

```ts
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import "./style.css";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  CellSelectionOptions,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  DefaultMenuItem,
  GetContextMenuItems,
  GetContextMenuItemsParams,
  GridApi,
  GridOptions,
  GridReadyEvent,
  MenuItemDef,
  ModuleRegistry,
  TooltipModule,
  enableDevValidations,
} from "ag-grid-community";
import {
  CellSelectionModule,
  ClipboardModule,
  ColumnMenuModule,
  ContextMenuModule,
  ExcelExportModule,
  IntegratedChartsModule,
} from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  ClipboardModule,
  ExcelExportModule,
  ColumnMenuModule,
  ContextMenuModule,
  CellSelectionModule,
  TooltipModule,
  IntegratedChartsModule.with(AgChartsEnterpriseModule),
]);
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [cellSelection]="true"
    [allowContextMenuWithControlKey]="true"
    [getContextMenuItems]="getContextMenuItems"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    { field: "athlete", minWidth: 200 },
    { field: "age" },
    { field: "country", minWidth: 200 },
    { field: "year" },
    { field: "date", minWidth: 180 },
    { field: "sport", minWidth: 200 },
    { field: "gold" },
    { field: "silver" },
    { field: "bronze" },
    { field: "total" },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
  };
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.http
      .get<
        IOlympicData[]
      >("https://www.ag-grid.com/example-assets/olympic-winners.json")
      .subscribe((data) => (this.rowData = data));
  }

  getContextMenuItems = (
    params: GetContextMenuItemsParams,
  ):
    | (DefaultMenuItem | MenuItemDef)[]
    | Promise<(DefaultMenuItem | MenuItemDef)[]> => {
    const result: (DefaultMenuItem | MenuItemDef)[] = [
      {
        // custom item
        name: "Log " + params.value,
        action: () => {
          console.log("Logging about " + params.value);
        },
        cssClasses: ["red", "bold"],
      },
      {
        // custom item
        name: "Always Disabled",
        disabled: true,
        tooltip:
          "Very long tooltip, did I mention that I am very long, well I am! Long!  Very Long!",
      },
      {
        name: "Country",
        subMenu: [
          {
            name: "Ireland",
            action: () => {
              console.log("Ireland was pressed");
            },
            icon: createFlagImg("ie"),
          },
          {
            name: "UK",
            action: () => {
              console.log("UK was pressed");
            },
            icon: createFlagImg("gb"),
          },
          {
            name: "France",
            action: () => {
              console.log("France was pressed");
            },
            icon: createFlagImg("fr"),
          },
        ],
      },
      {
        name: "Person",
        subMenu: [
          {
            name: "Niall",
            action: () => {
              console.log("Niall was pressed");
            },
          },
          {
            name: "Sean",
            action: () => {
              console.log("Sean was pressed");
            },
          },
          {
            name: "John",
            action: () => {
              console.log("John was pressed");
            },
          },
          {
            name: "Alberto",
            action: () => {
              console.log("Alberto was pressed");
            },
          },
          {
            name: "Tony",
            action: () => {
              console.log("Tony was pressed");
            },
          },
          {
            name: "Andrew",
            action: () => {
              console.log("Andrew was pressed");
            },
          },
          {
            name: "Kev",
            action: () => {
              console.log("Kev was pressed");
            },
          },
          {
            name: "Will",
            action: () => {
              console.log("Will was pressed");
            },
          },
          {
            name: "Armaan",
            action: () => {
              console.log("Armaan was pressed");
            },
          },
        ],
      }, // built in separator
      "separator",
      {
        // custom item
        name: "Windows",
        shortcut: "Alt + W",
        action: () => {
          console.log("Windows Item Selected");
        },
        icon: '<img src="https://www.ag-grid.com/example-assets/skills/windows.png" />',
      },
      {
        // custom item
        name: "Mac",
        shortcut: "Alt + M",
        action: () => {
          console.log("Mac Item Selected");
        },
        icon: '<img src="https://www.ag-grid.com/example-assets/skills/mac.png"/>',
      }, // built in separator
      "separator",
      {
        // custom item
        name: "Checked",
        checked: true,
        action: () => {
          console.log("Checked Selected");
        },
        icon: '<img src="https://www.ag-grid.com/example-assets/skills/mac.png"/>',
      }, // built in copy item
      "copy",
      "separator",
      "chartRange",
    ];
    if (params.column?.getColId() === "country") {
      return new Promise((res) => setTimeout(() => res(result), 150));
    }
    return result;
  };
}

function createFlagImg(flag: string) {
  return (
    '<img border="0" width="15" height="10" src="https://flags.fmcdn.net/data/flags/mini/' +
    flag +
    '.png"/>'
  );
}
```

[Live example: Context Menu Example](https://www.ag-grid.com/examples/context-menu/context-menu/angular)

## Popup Parent

Under most scenarios, the menu will fit inside the grid. However if the grid is small and / or the menu is very large, then the menu will not fit inside the grid and it will be clipped.

This will lead to a bad user experience which is demonstrated in the following example:

- Open the context menu or the column menu in the grid
- Notice the menu will not be fully visible (i.e. clipped)

#### Small Grid Problem

```ts
import { Component } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import {
  ClipboardModule,
  ColumnMenuModule,
  ContextMenuModule,
  ExcelExportModule,
} from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  ClipboardModule,
  ExcelExportModule,
  ColumnMenuModule,
  ContextMenuModule,
]);

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
      style="width: 100%; height: 100px;"
      [rowData]="rowData"
      [columnDefs]="columnDefs"
    />

    <div style="padding: 10px">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc posuere
      lobortis est, sit amet molestie justo mattis et. Suspendisse congue
      condimentum tristique. Cras et purus vehicula, rhoncus ante sit amet,
      tempus nulla. Morbi vitae turpis id diam tincidunt luctus aliquet non
      ante. Ut elementum odio risus, eu condimentum lectus varius vitae.
      Praesent faucibus id ex commodo mattis. Duis egestas nibh ut libero
      accumsan blandit. Nunc mollis elit non sem tempor, sit amet posuere velit
      commodo. Cras convallis sem mattis, scelerisque turpis sed, scelerisque
      arcu. Mauris ac nunc purus. Aenean sit amet dapibus augue.
    </div>

    <div style="padding: 10px">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc posuere
      lobortis est, sit amet molestie justo mattis et. Suspendisse congue
      condimentum tristique. Cras et purus vehicula, rhoncus ante sit amet,
      tempus nulla. Morbi vitae turpis id diam tincidunt luctus aliquet non
      ante. Ut elementum odio risus, eu condimentum lectus varius vitae.
      Praesent faucibus id ex commodo mattis. Duis egestas nibh ut libero
      accumsan blandit. Nunc mollis elit non sem tempor, sit amet posuere velit
      commodo. Cras convallis sem mattis, scelerisque turpis sed, scelerisque
      arcu. Mauris ac nunc purus. Aenean sit amet dapibus augue.
    </div> `,
})
export class AppComponent {
  rowData: any[] | null = [
    { a: 1, b: 1, c: 1, d: 1, e: 1 },
    { a: 2, b: 2, c: 2, d: 2, e: 2 },
  ];
  columnDefs: ColDef[] = [
    { field: "a" },
    { field: "b" },
    { field: "c" },
    { field: "d" },
    { field: "e" },
  ];
}
```

[Live example: Small Grid Problem](https://www.ag-grid.com/examples/context-menu/popup-parent-problem/angular)

The solution is to set the `popupParent` element:

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `popupParent` | [`HTMLElement \| null`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) |  |  | DOM element to use as the popup parent for grid popups (context menu, column menu etc). |

Each mechanism allows you to set the popup parent to any HTML DOM element. The element must:

1. Exist in the DOM.
2. Cover the same area as the grid (or simply be a parent of the grid), so that when the popup is positioned, it can be positioned over the grid.

Most of the time, you will simply set the popup parent to the document body.

The example below is identical to the previous example except it sets the popup parent to the document body.

#### Small Grid Solution

```ts
import { Component } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import {
  ClipboardModule,
  ColumnMenuModule,
  ContextMenuModule,
  ExcelExportModule,
} from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  ClipboardModule,
  ExcelExportModule,
  ColumnMenuModule,
  ContextMenuModule,
]);

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
      style="width: 100%; height: 100px;"
      [rowData]="rowData"
      [columnDefs]="columnDefs"
      [popupParent]="popupParent"
    />

    <div style="padding: 10px">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc posuere
      lobortis est, sit amet molestie justo mattis et. Suspendisse congue
      condimentum tristique. Cras et purus vehicula, rhoncus ante sit amet,
      tempus nulla. Morbi vitae turpis id diam tincidunt luctus aliquet non
      ante. Ut elementum odio risus, eu condimentum lectus varius vitae.
      Praesent faucibus id ex commodo mattis. Duis egestas nibh ut libero
      accumsan blandit. Nunc mollis elit non sem tempor, sit amet posuere velit
      commodo. Cras convallis sem mattis, scelerisque turpis sed, scelerisque
      arcu. Mauris ac nunc purus. Aenean sit amet dapibus augue.
    </div>

    <div style="padding: 10px">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc posuere
      lobortis est, sit amet molestie justo mattis et. Suspendisse congue
      condimentum tristique. Cras et purus vehicula, rhoncus ante sit amet,
      tempus nulla. Morbi vitae turpis id diam tincidunt luctus aliquet non
      ante. Ut elementum odio risus, eu condimentum lectus varius vitae.
      Praesent faucibus id ex commodo mattis. Duis egestas nibh ut libero
      accumsan blandit. Nunc mollis elit non sem tempor, sit amet posuere velit
      commodo. Cras convallis sem mattis, scelerisque turpis sed, scelerisque
      arcu. Mauris ac nunc purus. Aenean sit amet dapibus augue.
    </div> `,
})
export class AppComponent {
  rowData: any[] | null = [
    { a: 1, b: 1, c: 1, d: 1, e: 1 },
    { a: 2, b: 2, c: 2, d: 2, e: 2 },
  ];
  columnDefs: ColDef[] = [
    { field: "a" },
    { field: "b" },
    { field: "c" },
    { field: "d" },
    { field: "e" },
  ];
  popupParent: HTMLElement | null = document.querySelector("body");
}
```

[Live example: Small Grid Solution](https://www.ag-grid.com/examples/context-menu/popup-parent-solution/angular)

## Context Menu API / Events

The `gridApi` has the following methods that can be used to interact with the context menu:

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `showContextMenu` | `Function` |  |  | Displays the AG Grid context menu Module: [`ContextMenuModule`](https://www.ag-grid.com/angular-data-grid/modules/). |
| `hidePopupMenu` | `Function` |  |  | Hides any visible [Context Menu](https://www.ag-grid.com/angular-data-grid/context-menu/) or [Column Menu](https://www.ag-grid.com/angular-data-grid/column-menu/). |

The following context menu event is emitted by the grid:

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `contextMenuVisibleChanged` | `ContextMenuVisibleChangedEvent` |  |  | The context menu visibility has changed (opened or closed). |