Context menu in grid

A context menu is a pop-up menu that appears when the user right-clicks on a mouse or touchpad-enabled device or long-taps on a touch-enabled device like Android or iOS. It is a useful tool for providing quick access to common actions.

To add a context menu to your grid, follow these steps:

• Set the contextMenu.on to true.
• Use contextMenu.cellItems to build static or dynamic items on body cells.
• Use contextMenu.bodyItems to build static or dynamic items on empty region in grid. (new in v8.7.0)
• Use contextMenu.headItems to build static or dynamic items on header cells.
• Use contextMenu.numItems to build static or dynamic items on number cells.
• Use contextMenu.imgItems to build static or dynamic items on images.
• Use contextMenu.tabItems to build static or dynamic items on tabs.
• Use contextMenu.miscItems to build static or dynamic items on any other elements in the grid.
• Implement the item.action callback to provide custom action upon clicking on the context menu item.

Related API:

• Options: contextMenu
• Methods: Context

Bypass grid context menu

To bypass the grid's context menu and use the browser's built-in menu instead, simply press the Ctrl or Meta key (depending on your operating system) along with the usual gesture for bringing up the context menu. If you want to customize this behavior further, you can use the contextMenu.preInit function, which allows you to modify the context menu before it is displayed. For more information, please refer to the documentation for contextMenu.preInit.

Dynamic Context menu on cells

You can also use the callback variant of all contextMenu.(*)Items options to decide menu items at runtime. Use the ui argument of the callback to get the coordinates and type of the body or head cell upon which the menu is activated. You can build different context items based on this information or skip items altogether by returning an empty array.

For example, you can add a "Show filter row" item in the header menu, sub-menu items of the header color menu item, or the disabled property of Undo and Redo items in the body context menu.

{
    name: this.option('filterModel.header') ? 'Hide filter row' : 'Show filter row',
    action: function(){
        this.option('filterModel.header', !this.option('filterModel.header'));
        this.refresh();
    }
},

Updating Context Menu Items Dynamically

You can also update the contextMenu.items dynamically. For example, you can change the name of the first item in the image context menu upon clicking a button.

$("#change_img_menu").click(function () {
    var items = grid.option('contextMenu').imgItems;
    items[0].name = "Delete " + counter++;
})

Context menu outside grid

Context menu is not limited to grid but also can be displayed outside the grid. You can display the context menu outside the grid by following these steps:

• Declare any new [ type ]Items or use existing [ type ]Items in the contextMenu option.
• Call grid.Context().showMenu(evt, ui) method by passing {type: type} as the second parameter.

For example, you can declare new customItems in the contextMenu definition and pass type: 'custom' to the method invoked upon click on an external button:

grid.Context().showMenu(this, {
    type: 'custom',
    my: "right top",
    at: "right bottom"
})