Changing the click listener for user selected rows (TableTools)

drewt

Hey all,

In my DataTables implementation we are using multi-row select to perform specific actions on inventory items. Everything is working great and there are no bugs, however, I'm using mRender to generate a column of checkboxes for the first column, i.e.:

[code]
"aoColumns": [ { "sClass": "center", "sWidth": "28px", "mRender": function (data, type, full) {
return '';}
},null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,/*null,null,null,*/],
[/code]

Then I added this line to TableTools.js within the "_fnRowSelect" context:

[code]$(data[i].nTr).closest("tr").find('input[type="checkbox"]').prop('checked', 'checked');[/code]

and this one to "_fnRowDeselect":

[code]$(data[i].nTr).closest("tr").find('input[type="checkbox"]').prop('checked', '');[/code]

to ensure that a row's checkbox always gets checked on selection, and unchecked again on de-selection. The checkbox is a nice visual mechanism to show the end user s/he can click a TR node and perform on action on that row.

So far so good right? Yup, I thought so too; however, some of the columns have hrefs and the boss (justifiably) doesn't like highlighting the whole row if the end user's action is just clicking an href to navigate to a different page - in such a case the row highlights first (very briefly) and then the page redirects.

So I've been asked to trigger row selection only by clicking the row's checkbox instead of anywhere in the . At first I thought it would be a simple task of changing an event listener's binding, but maybe it's more complex? How would this be done?

allan

Sounds like a nice way of doing row selection!

The way that I've handled this kind of situation in the past is to use the fnPreRowSelect option of TableTools: http://datatables.net/extras/tabletools/initialisation#fnPreRowSelect .

A small modification of the example in the documentation should do it:

[code]
"fnPreRowSelect": function ( e, nodes ) {
if ( e.currentTarget.nodeName.toLowerCase() === 'a' ) {
return false;
}
return true;
}
[/code]

Regards,
Allan

drewt

Hrmm.. for some reason this example and the one you linked to did not work for me although looked good at first glance.

fnPreRowSelect definitely got me on the right track. If anyone has a similar issue this code worked for me:

[code]
"fnPreRowSelect": function (e) {
var event = e || window.event;
if ($(event.srcElement).hasClass('no_select')) {
return false;
}
return true;
},
[/code]

Then I just added the 'no_select' class to any elements I didn't want triggering row selection.

allan

Thanks for posting back your findings. I'll look into that. Perhaps I should have used `e.srcElement.nodeName` ...

Either way, good to hear that you've got it working now.

Allan

drewt

Hey all,
Just realized there's some issues with running this code in FireFox:

1) FF does not support e.srcElement and prefers e.target
2) IE and Chrome both define window.event globally but in FF it's only defined in the function scope.

Can't seem to get it working in FF though using e.target. Not a huge deal as I can detect FF and skip the code block while the function will still work in every other browser. Still would be nice to have it working in FF also if anyone has a solution.

Here's my current version of the code:

[code]
"fnPreRowSelect": function (e) {
if (navigator.userAgent.indexOf("Firefox")!=-1) {
return true;
}
if( !e ) e = window.event;
var srcEl = e.target||e.srcElement;
if ($(srcEl).hasClass('no_select')){
return false;
}
return true;
},
[/code]

allan

That's interesting - you shouldn't need to handle user agent specific cases. I think there is a bug in TableTOols here - it should be passing the jQuery event, which abstractors those problems out into fnPreRowSelect . The Code in the caller is there, but it doesn't look like the event is being passed through from the source. I'll look into that.

Thanks,
Allan

drewt

Not sure how I lost half a day over this last week but I tried again today and it worked fine.

Thanks anyways Allan!

allan

Just to confirm, the above code is now working okay for you?

Allan

drewt

Everything works perfect; I'm using this code:

[code]
"fnPreRowSelect": function (e) {
if( !e ) e = window.event;
var srcEl = e.target||e.srcElement;
if ($(srcEl).hasClass('no_select')){
return false;
}
return true;
},
[/code]

Thanks again Allan!