Expand All

  Getting Started

  Reference

  Features

  Row Models

  Themes

  Components

  Examples

  Third Party

Misc

Github stars make projects look great. Please help, donate a star, it's free.
Read about ag-Grid's Partnership with webpack.
Get informed on releases and other ag-Grid news only - never spam.
Follow on Twitter

Context Menu

The user can bring up the context menu by right clicking on a cell. By default, the context menu provides the values 'copy' and 'paste'. Copy will copy the selected cells or rows to the clipboard. Paste will always, forever, be disabled.

The 'paste' operation in the context menu is not possible and hence always disabled. It is not possible because of a browser security restriction that Javascript cannot take data from the clipboard without the user explicitly doing a paste command from the browser (eg Ctrl+V or from the browser menu). If Javascript could do this, then websites could steal data from the client via grabbing from the clipboard maliciously. The reason why ag-Grid keeps the paste in the menu as disabled is to indicate to the user that paste is possible and it provides the shortcut as a hint to the user.

Configuring the Context Menu

You can customise the context menu by providing a getContextMenuItems() callback. Each time the context menu is to be shown, the callback is called to retrieve the items to include in the menu. This allows the client application to display a menu individually customised to each cell.

getContextMenuItems() takes the following object as parameters: GetContextMenuItemsParams { column: Column, // the column that was clicked node: RowNode, // the node that was clicked value: any, // the value displayed in the clicked cell api: GridApi, // the grid API columnApi: ColumnAPI, // the column API context: any, // the grid context defaultItems: string[] // names of the items that would be provided by default }

The result of getContextMenuItems() should be a list with each item either a) a string or b) a MenuItem description. Use 'string' to pick from built in menu items (currently 'copy', 'paste' or 'separator') and use MenuItem descriptions for your own menu items.

If you want to access your underlying data item, you access that through the rowNode as var dataItem = node.data.

A MenuItem description looks as follows (items with question marks are optional): MenuItemDef { name: string, // name of menu item disabled?: boolean, // if item should be enabled / disabled shortcut?: string, // shortcut (just display text, saying the shortcut here does nothing) action?: ()=>void, // function that gets executed when item is chosen checked?: boolean, // set to true to provide a check beside the option icon?: HTMLElement|string, // the icon to display beside the icon, either a DOM element or HTML string subMenu?: MenuItemDef[] // if this menu is a sub menu, contains a list of sub menu item definitions cssClasses?: string[]; //Additional CSS classes to be applied to the menu item tooltip?: string; //Optional tooltip for the menu item }

Note: If you set checked=true, then 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. Always shown.
  • expandAll: Expand all groups. Only shown if grouping by at least one column.
  • contractAll: Contract all groups. Only shown if grouping by at least one column.
  • copy: Copy selected value to clipboard
  • copyWithHeadersCopy selected value to clipboard with headers.
  • paste: Always disabled (see note in clipboard section).
  • resetColumns: Reset all columns.
  • toolPanel: Show / hide the toolpanel.
  • export: Export sub menu (containing csvExport and excelExport).
  • csvExport: Export to CSV using all default export values.
  • excelExport: Export to Excel using all default export values.

Default Context Menu

One drawback of using the ag-Grid context menu is that you may want to show the browsers context menu when debugging, for example in order to access your browsers 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.

Holding down ctrl & context menu bypasses the grids context menu. If you do want the grids context menu, even when ctrl is pressed, then set allowContextMenuWithControlKey=true.

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.
  • Country and Person are sub menu's. The country sub menu contains icons.
  • The menu item 'Always Disabled' has a tooltip.
  • The menu item has css classes applied to it.
  • The second menu item ('Always Disabled') has a tooltip.