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 powerful tool for providing quick access to common actions.

Configuration Steps

To integrate a context menu into your grid, configure the following properties in your grid options:

• Enable: Set contextMenu.on to true.
• Define Targets: Use the following properties to build static or dynamic menu items for specific regions:
  • cellItems: For body cells.
  • headItems: For header cells.
  • bodyItems: For the empty region in the grid (New in v8.7.0).
  • numItems: For row number cells.
  • imgItems: For image elements.
  • tabItems: For tabs.
  • miscItems: For any other grid elements.
• Handle Actions: Implement the item.action callback to define custom logic when a menu item is clicked.

Dynamic Context Menus

You can use a callback function for any contextMenu.*Items property to decide menu items at runtime. The ui argument provides the coordinates, data index, and cell type to customize items contextually.

Example: Dynamic toggle for the filter row

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

Bypassing the Menu

To access the browser's native context menu, hold the Ctrl or Meta key during the right-click gesture. To customize this behavior programmatically, utilize the contextMenu.preInit function.

Inbuilt Formatting (v11.2.0+)

Use pq.formatMenu.items to quickly inject standard formatting menu items into your custom menus:

{
    name: 'Format',
    subItems() {
        return pq.formatMenu.items(this);
    }
}

Menu Outside Grid

The context menu can be triggered by external events or buttons using the showMenu method:

grid.Context().showMenu(event, {
    type: 'customItems', // Defined in contextMenu option
    my: "right top",
    at: "right bottom"
});