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:

Related API:

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'));

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:

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"