In jqGrid, Is there a "built-in" way to know what mouse button was clicked, before row selection?
Currently we have jqGrid with some actions bind on "onSelectRow" event of jqGrid. The problem is that when user right click on that row, onSelectRow event raised to and action performed. What I need, is to ignore "onSelectRow" when user right click on a row.
EDIT: I know there exists onRightClickRow event, but it raised after onSelectRow and action already performed.
I found that I can know what button clicked by "type" of event object. When it's click, the type is "click" when it's right click, the type is "contextmenu"....Does exists the additional way, or I must check type to know what button is clicked?
Thanks
It's good question! The reason of such behavior is the following. jqGrid register an event handler for the event contextmenu
on the whole grid <table>
element with the following code (see here)
.bind('contextmenu', function(e) {
td = e.target;
ptr = $(td,ts.rows).closest("tr.jqgrow");
if($(ptr).length === 0 ){return;}
if(!ts.p.multiselect) { $(ts).jqGrid("setSelection",ptr[0].id,true,e); }
ri = ptr[0].rowIndex;
ci = $.jgrid.getCellIndex(td);
$(ts).triggerHandler("jqGridRightClickRow", [$(ptr).attr("id"),ri,ci,e]);
if ($.isFunction(this.p.onRightClickRow)) {
ts.p.onRightClickRow.call(ts,$(ptr).attr("id"),ri,ci, e);
}
});
How one can see from the code it calls setSelection
method and calls onRightClickRow
callback and trigger jqGridRightClickRow
event. So if you don't need the selection of rows and if you don't use onRightClickRow
and jqGridRightClickRow
you can just unbind the event handler:
$("#list").unbind("contextmenu");
If you do want use onRightClickRow
callback or if you don't sure whether you need to use jqGridRightClickRow
somewhere you can "subclass" the event handler. The implementation is depend a little from the version of jQuery which you use. Starting with jQuery 1.8 one should use a little another call to get the current events registered on the DOM element. The corresponding code could be about the following:
//$grid.unbind('contextmenu');
var getEvents = $._data($grid[0], "events"); // $grid.data("events") in jQuery ver<1.8
if (getEvents && getEvents.contextmenu && getEvents.contextmenu.length === 1) {
var orgContextmenu = getEvents.contextmenu[0].handler;
$grid.unbind('contextmenu', orgContextmenu);
$grid.bind('contextmenu', function(e) {
var oldmultiselect = this.p.multiselect, result;
this.p.multiselect = true; // set multiselect to prevent selection
result = orgContextmenu.call(this, e);
this.p.multiselect = oldmultiselect; // restore multiselect
return result;
});
}
The demo demonstrate the above code live.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With