After invoking ContextMenu, the click event bound to datatable cell does not work.

Shant

Hi,

I am have been using DataTable since last few months and have found it to be a great tool. I congratulate Allan and the whole team involved in the development of this wonderful tool.

I have recently implemented ContextMenu plugin on datatable to enable user to right click on any row of the datatable and select the context options such as editing row, deleting row and many more. To implement the ContextMenu, I have used fnRowCallback API. Along with this I have also implemented the drill down on DataTable using the following link:

http://datatables.net/blog/Drill-down_rows

The drill down functionality works very well as explained in the above blog. Now, the issue gets started once I invoke ContextMenu and I don't select any option but just click outside the ContextMenu to close it. Once I have done it, the drill-down functionality stops working. On debugging, I found out that the click event on the TD does not fire at all.

Have tried searching on DataTable forum as well as Google but nothing helpful. Am sure, I am missing something. Request you to kindly help me as I have already spent more than 4 days and still no success. Thank you all in advance.


Environment: jQuery 1.7.2, ASP.NET 4.0, jQuery ContextMenu (http://www.abeautifulsite.net)

Code for reference:

HTML:

[code]
$('#dtPOL').dataTable({
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
$(nRow).contextMenu({
menu: 'cntxtmnuDataTable'
},
function (action, el, pos) {
if (action != '') {
var l_otxtId = document.getElementById("ctl00_MainContent_hftbPOID");
var l_otxtAction = document.getElementById("ctl00_MainContent_hftbMode");
var l_oBtn = document.getElementById("ctl00_MainContent_btnViewRow");

if (l_otxtId != null) {
l_otxtId.value = aData[0];
l_otxtAction.value = action;
if (action == 'e')
l_oBtn = document.getElementById("ctl00_MainContent_btnEditRow");

if (l_oBtn != null)
l_oBtn.click();
}
}
return true;
});
}
});


$('#dtPOL tbody td').live('click', function () {
var nTr = this.parentNode;
var i = $.inArray(nTr, anOpen);

if (i === -1) {
$('img', this).attr('src', gImageURL + "b-qv-hide.png");
var nDetailsRow = oTable.fnOpen(nTr, fnQuickView(oTable, nTr), 'quickView');
$('div.innerDetails', nDetailsRow).slideDown();
anOpen.push(nTr);
}
else {
$('img', this).attr('src', gImageURL + "b-qv-show.png");
$('div.innerDetails', $(nTr).next()[0]).slideUp(function () {
oTable.fnClose(nTr);
anOpen.splice(i, 1);
});
}
});
[/code]

wjackson

Well, this might not be the comment you are looking for, but I was just trying to get contextMenu working with datatables, and your example code allowed me to figure it out. Thanks!

Sorry I can't help with issue with drill down.

WoPr

Hi!

I have the same issue, and I think it's related to this http://datatables.net/faqs :

My events don't work on the second page (events in general)
A. When attaching events to cells in a table controlled by DataTables, you need to be careful how it is done. Because DataTables removes nodes from the DOM, event's might not be applied. To over come this, is quite simple, as shown in these examples: pre-initialisation, post-initialisation. $().live() events can also help. Finally you use my Visual Event bookmarklet to help debug event issues.

Have you resolve it? I'm not be able to make it work...

Regards,
WoPr

allan

And you'd be correct :-). The way to resolve it is indicated in the FAQ - use fnDrawCallback most likely in this case.

Allan