Context menu when right clicking a row
Context menu when right clicking a row
rustyhann
Posts: 2Questions: 0Answers: 0
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]
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]
This discussion has been closed.
Replies
[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