Context menu when right clicking a row

rustyhann

I am trying to add a right click context menu for each row in a table. I'll need to pull the data from the clicked row after selecting an action in the context menu, but I can't even get the context menu to appear. If I change the selector when intializing the table to '#example tbody' I can get the menu to appear but that won't work for this scenario.

The rest of the table is working perfectly. Per some of the posts in this forum I've tried adding the contextmenu code to the fnDrawCallback section and to the fnRowCallback section, but when I do the table data fails to load (it sticks on Loading ...).

This is an ASP page and I'm getting JSON data from AJAX calls to static web methods (C#). I'm using the contextmenu plugin from this site (I had to download it from the archives):

http://labs.abeautifulsite.net/archived/jquery-contextMenu/demo/

At the moment I can't run the debugger on the table because the table is pulling sensitive customer data. I also can't link to an external site because the site and data are isolated. If needed, I can create a temporary dataset and post to jsFiddle but I'm hoping I'm missing something easy. Any help would be greatly appreciated.

This is the HTML table for the context menu:

[code]


Edit
Cut
Copy
Paste
Delete


[/code]

Here is the code for my table:

[code]




A1 <!-- 0 -->
A2 <!-- 1 -->
A3 <!-- 2 -->
A4 <!-- 3 -->
A5 <!-- 4 -->
A6 <!-- 5 -->
A7 <!-- 6 -->
A8 <!-- 7 -->
A8 <!-- 8 -->
A9 <!-- 9 -->
A10 <!-- 10 -->
A11 <!-- 11 -->
A12 <!-- 12 -->
A13 <!-- 13 -->
A14 <!-- 14 -->
A15 <!-- 15 -->
A16 <!-- 16 -->
A17 <!-- 17 -->
A18 <!-- 18 -->






[/code]

Here is how I'm initializing my table:

[code]

$('#example').dataTable({
"bPaginate": false,
"bLengthChange": false,
"bFilter": true,
"bSort": true,
"bInfo": false,
"bAutoWidth": false,
"bJQueryUI": true,
"sDom": 'C<"clear">lfrtip',
"oColVis": {
"sAlign": "right",
"buttonText": "View / Hide Columns",
"bRestore": true,
"iOverlayFade": 100,
"sRestore": "Restore"
},
"aoColumnDefs": [
{ "aTargets": [0], "bVisible": false },
{ "aTargets": [2], "bVisible": false },
{ "aTargets": [3], "bVisible": false },
{ "aTargets": [4], "bVisible": false },
{ "aTargets": [5], "bVisible": false },
{ "aTargets": [6], "bVisible": false },
{ "aTargets": [9], "bVisible": false },
{ "aTargets": [10], "bVisible": false },
{ "aTargets": [11], "bVisible": false },
{ "aTargets": [14], "bVisible": false },
{ "aTargets": [15], "bVisible": false },
{ "aTargets": [16], "bVisible": false },
{ "aTargets": [17], "bVisible": false },
{ "aTargets": [18], "bVisible": false }
],
"sAjaxSource": "default.aspx/jsonData",
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
dataType: 'json',
contentType: "application/json; charset=utf-8",
type: "Get",
url: sSource,
data: aoData,
success: function (msg) {
var json = jQuery.parseJSON(msg.d);
fnCallback(json);
}
});
},
"fnDrawCallback": function (oSettings) {
$('table#example tr').bind('mouseenter', function () { $(this).addClass('datatablerowhighlight'); });
$('table#example tr').bind('mouseleave', function () { $(this).removeClass('datatablerowhighlight'); });
},
"fnInitComplete": function ( oSettings ) {
$('#example tbody tr').contextMenu({ menu: 'myMenu' },
function (action, el, pos) {
alert(
'Action: ' + action + '\n\n' +
'Element text: ' + $(el).attr('id') + '\n\n' +
'X: ' + pos.x + ' Y: ' + pos.y + ' (relative to element)\n\n' +
'X: ' + pos.docX + ' Y: ' + pos.docY + ' (relative to document)'
);
});
}
});

[/code]

rustyhann

I've got this working with the following code:

[code]

"fnDrawCallback": function () {
$('table#example tr').on('mouseenter', function () {
$(this).contextMenu({
menu: 'productionRightClickMenu'
},
function (action, el, pos) {
alert(
'Action: ' + action + '\n\n' +
'Element ID: ' + $(el).attr('id') + '\n\n' +
'X: ' + pos.x + ' Y: ' + pos.y + ' (relative to element)\n\n' +
'X: ' + pos.docX + ' Y: ' + pos.docY + ' (relative to document)\n\n' +
);
});
});
}

[/code]

It works but I would like to find a better solution than binding to the mouse enter event because it needs to bound to all rows in the table.

allan

Sounds like the contextMenu plug-in could do with the ability to apply a delegated event. Otherwise perhaps fnGetNodes in fnInitComplete will do for you?

Allan