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.
Configuring the Context Menu
You can customise the context menu by providing a
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:
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.
MenuItem description looks as follows (items with question marks are optional):
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
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.
export: Export sub menu (containing csvExport and excelExport).
csvExport: Export to CSV using all default export values.
excelExport: Export to Excel (.xlsx) using all default export values.
excelXmlExport: Export to Excel (.xml) using all default export values.
chartRange: Chart a range of selected cells.
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
Hiding the Context Menu
Hide the context menu with the grid API
hidePopupMenu(), which will hide
either the context menu or the 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.
- 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.
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)
The solution is to set the
popupParent element which can be set in the following ways:
popupParent: Set as a grid property.
setPopupParent(element): Set via the grid API.
- Exist in the dom.
- 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.
The example below is identical to the previous example except it sets the popup parent to the document body.