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:
contextMenu.on
to true.contextMenu.cellItems
to build static or dynamic items on body cells.contextMenu.bodyItems
to build static or dynamic items on empty region in grid. (new in v8.7.0)contextMenu.headItems
to build static or dynamic items on header cells.contextMenu.numItems
to build static or dynamic items on number cells.contextMenu.imgItems
to build static or dynamic items on images.contextMenu.tabItems
to build static or dynamic items on tabs.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.Browser inbuilt menu can be invoked by pressing Ctrl / Meta
key along with usual gesture for contextmenu.
See contextMenu.preInit
for more details.
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(); } },
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++; })