Disable row select event for certain columns

mdiessner

Hi Allan,

I have a working DT and have written onClick() functions for quiet a number of columns that - once cells have been clicked - open jQuery modal dialogue windows with further information or even have inline jEditable enabled to modify the cell data.

From a usability and design point of view what bothers me is that upon onClick() the whole DT row becomes selected which is something that I would like to disable but only for those columns where I have an onClick() event already.

In other words, users should only be allowed to select one or multiple rows upon clicking on the first column which shows an index id.

One work around would be to unselect the row that have the dialogue/jEditable functions but I was wondering if you have another method that does this with less code and in a smarter way.

I been looking around the forum/search/API but have not found anything in particular.

Thx,
Martin

allan

Hi Martain,

How are you doing the row selection? Is it using TableTools? If so, then you can use the fnPreRowSelected ( http://datatables.net/extras/tabletools/initialisation#fnPreRowSelect ) initialisation option to check if you want to allow the select to occur when a given cell is clicked on. For example you could have something like:

[code]
"fnPreRowSelect": function ( e, nodes ) {
if ( $(e.currentTarget).hasClass('editable') ) {
return false;
}
return true;
}
[/code]

If you aren't using TableTools, then whatever row selection code you are using would need to add something similar.

Regards,
Allan

mdiessner

Hi Allan,

Perfect - that works just fine.

I am using TableTools but was looking in the main DT API instead of TT. Stupid me!

Thanks for providing the code - helps!

thx
Martin

mdiessner

Dear Allan,

Slight revision on my previous comment. Your code works perfectly on the jEditable cells, however, when a cell with a function that opens a modal form then for whatever strange reason your fnPreRowSelect function is not working as it should.

Here is the code for the cells that have the class 'open_modal' which I am obviously using in the fnPreRowSelect function accordingly:

[code]
/*
Modified fnPreRowSelect function in the oTable from Allan:
"fnPreRowSelect": function ( e, nodes ) {
if ( $(e.currentTarget).hasClass('open_modal') ) {
return false;
}
return true;
}
*/

// Apply function to column cells with class 'open_modal' to show data via modal view
oTable.$('.open_modal').click( function() {

// If the following 'return false;' is uncommented then the the function works and the row does not get selected
// However while commented the row does get selected and the modal popup opens
// return false;

$('').html('test').dialog({
title: 'test',
});

} );
[/code]

This is really strange and I can't see why?

Even tried with a delay or timeOut function and can't seem to find out why the modal form prevents your otherwise perfect function to work?

Strange?

Thanks
Martin

allan

So when you click on that cell, the row is highlighted as well as the modal opened? What does your fnPreRowSelect function look like?

Allan

mdiessner

Hi Allan,

yes - that is correct.

the fnPreRowSelect function I copied into the above code as /*comment*/

Here we go again:

[code]
"fnPreRowSelect": function ( e, nodes ) {
if ( $(e.currentTarget).hasClass('open_modal') ) {
return false;
}
return true;
}
[/code]

Thx a lot
Martin

allan

Try using e.srcElement rather than e.currentTarget - I suspect e.currentTarget in the pre-row-select is the TR element, not the TD, hence the issue.

Allan

mdiessner

Hi Allan - thanks - that works. Would not have figured that out myself - thanks!
Martin