Context menu

Context menu is invoked by right click on mouse/touchpad enabled devices and long tap on the screen of touch devices ( i.e., Android, iOS, etc )

It can be activated on any element of grid i.e, body cells, header cells, images, footer, toolbar, number cells, etc since v7.2.0

Items in context menu can have sub items and so on upto any number of levels.

It is added to grid by:

• set 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.
• item.action callback implementation provides custom action upon click on the context menu item.

Related API:

• Options: contextMenu

Bypass grid context menu

Browser inbuilt menu can be invoked by pressing Ctrl / Meta key along with usual gesture for contextmenu. See contextMenu.preInit for more details.

Dynamic Context menu on cells

• Callback variant

  Menu items can be decided in run time by using callback variant of all contextMenu.(*)Items options.

  ui argument of the callback provides coordinates and type of body or head cell upon which the menu is activated, based on which different context items can be built or items can be skipped altogether by returning empty array.

  Some examples are 'Show filter row' item in header menu, sub-menu items of header color menu item, disabled property of Undo, Redo items in 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();
      }
  },

• option

  contextMenu.items can be updated dynamically as shown in this example for image context menu by click of buttons.

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