You can intercept contextmenu event of the browser and display the context menu for the grid.
First, call GridBase.setContextMenu and set Grid Context Menu which will be displayed instead of Browser Context Menu. And, you can use GridBase.setDefaultContextMenu and set the menu just registered as a main menu. The main menu will run if a menu is not specified when call setContextMenu.
var menu = grdMain.setContextMenu([{
label: "Add Row",
callback: function () {
grdMain.insert();
}
},
...
]);
grdMain.setDefaultContextMenu(menu);
Please refer to Menu Overview help about how to define a menu.
You can use onContextMenuPopup event to display different menu sets or not to display them based on mouse clicked location. If explicitly return false within this event handler, Browser Context Menu will be displayed rather than the menu.
In addition, you can also call GridBase.setContextMenu within the handler to change the menu to be displayed. At this point, you can specify the menu registered through GridBase.registerPopupMenu.
grdMain.onContextMenuPopup = function (grid, x, y) {
var index = grid.pointToIndex(x, y);
if (index && index.column && index.column.name() == "LoanNumber") {
// Run a temporary menu.
grid.setContextMenu(menu2);
} else if (index && index.column && index.column.name() == "Country") {
// If return false, Browser Menu will run instead of Grid Menu.
return false;
} else if (index && index.column && index.column.name() == "Currency") {
// Run the registered menu through registerPopupMenu().
return grid.setContextMenu('menu1');
} else {
// Run the default context menu.
grid.setContextMenu(null);
}
};
When the menu item is clicked, if callback has been set in it, it will run callback, else will run GridBase.onContextMenuClicked event.