JQGrid dynamic context-menu - jqgrid

Question

Using JQGrid-4.3.3 with jquery.contextmenu.js plugin.
I'm using onContextMenu inorder to dynamically show the menu according to a specific cell value inside the selected row. (return true or false).
The problem is after the menu is shown, when I right click another row the menu that was open for the previous row is not closed. If I don't want to show the menu for a row and the menu was opened before , it can't be closed until I show the menu again in another row, or when I left click anywhere in my page.
How can I close the old menu once a onContextMenu returns false ?
UPDATE:
this is my code:
function createGridContextMenu(grid_)
{
$("tr.jqgrow" , grid_).contextMenu('grid_contextmenu' , {
bindings: {
'item1': function(trigger)
{
}
},
menuStyle: { font:'11px Arial, Verdana, Helvetica',
border: '1px solid #000' ,
width: '130px'
},
itemStyle: { border: 'none', padding: '4px' },
itemHoverStyle: { backgroundColor: '#C0C0C0', border: 'none'},
onContextMenu : function(event, menu)
{
var selected_row_id = $(event.target).parent("tr").attr("id");
var row = grid_.jqGrid('getRowData',selected_row_id);
if(row.status == 1)
{
return false;
}
else
{
grid_.setSelection(selected_row_id, true);
return true;
}
},
onShowMenu: function(event, menu)
{
return menu;
}
});
}
I'm calling createGridContextMenu
inside
loadComplete: function()
{
createGridContextMenu($(this));
},
Thank's In Advance.

Answer 1

I suppose that the reason of the problem is the wrong place where you create context menu. The second problem is setting separate context menus on different rows of the grid.
The callback loadComplete will be executed every time on loading of the grid, paging, sorting and so on. The current implementation uses $("tr.jqgrow" , grid_).('grid_contextmenu' , {...});. On the other side you can set the context menu of the whole <table> instead of setting on every <tr> of the body of the table. Because <table> will be not recreated on every filling of the grid you can do the following
// create the grid
$("#grid").jqGrid({
...
});
// set context menu immediately after creating of the grid
// you need remove calling of createGridContextMenu from loadComplete
$("#grid").contextMenu('grid_contextmenu', {
...
});
I hope that such changes will solve your current problem. I would recommend you additionally to update jqGrid which you use to the current version 4.6.0 which you can download from trirand.
UPDATED: You can hide context menu on leaving it. To do this you can modify the lines 57-59 of the code of jquery.contextmenu.js from
.bind('click', function(e) {
e.stopPropagation();
});
to
.bind('click', function(e) {
e.stopPropagation();
}).mouseleave(function (e) {
if (e.pageX === -1 && e.pageY === -1) {
return; // over tooltip
}
hide();
});
Alternatively you can do the same without modification of jquery.contextmenu.js. You need just to do the same after calling of contextMenu. The final code will be
// create the grid
$("#grid").jqGrid({
...
});
// set context menu immediately after creating of the grid
// you need remove calling of createGridContextMenu from loadComplete
$("#grid").contextMenu('grid_contextmenu', {
...
});
// register mouseleave handler which close the menu
$("#jqContextMenu").mouseleave(function (e) {
if (e.pageX === -1 && e.pageY === -1) {
return; // over tooltip
}
$(this).hide().next().hide();
});