Show Hidden Row Details on Row Click

laura

I've tried to figure this out but I'm just not smart enough ;)

I have re-created the example for showing/hiding row details when clicking on the image details_open.png and details_close.png.

However, I would like the hidden row to show when clicking anywhere on the entire row.

I've also used the example for adding a class to the selected row, and I'd like to keep that. So essentially, I'd like to combine the examples for adding a class to the selected row, and the show hidden row...

This is the code I have, and they do work independent of each other. I want to combine them and get rid of the image, if that makes sense?

[code]
/* Highlight selected row */

$("#inventory tbody").click(function(event) {
$(oTable.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
});


/* Add event listener for opening and closing details
*/

$('td img', oTable.fnGetNodes() ).each( function () {
$(this).click( function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
/* This row is already open - close it */
this.src = "/assets/img/icons/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "/assets/img/icons/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
}
} );
} );
[/code]

allan

Hi laura,

So you want it that when you click on a row, it will "open" that row, deselect any other row which might already be selected and select that one?

[code]
$(oTable.fnGetNodes() ).each( function () {
$(this).click( function () {
/* deselect and close all currently open rows */
$(oTable.fnGetNodes()).each( function () {
$(this).removeClass('row_selected');
oTable.fnClose( this );
});

/* Open this row */
$(this).addClass('row_selected');
oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
} );
} );
[/code]
There are a couple of quirks which can come up from this, such as if you click on a row which is already open, then this code will actually close it and then re-open it (so you can't close an open row). But it should be fairly easy to change that.

Something you might be interested in to see what nodes have what events applied is Visual Event: http://sprymedia.co.uk/article/Visual+Event

Allan

laura

Thanks for your help Allan :)
I am getting an error (nTr is not defined) and this is my code. I can't see where I've missed anything.

[code]

var oTable;

/* Formating function for row details */
function fnFormatDetails ( nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'Description: '+aData[3]+'
Services: '+aData[4]+'';
sOut += 'Locations: '+aData[5]+'';
sOut += '';

return sOut;
}

$(document).ready(function() {

/* Initialse DataTables */
oTable = $('#inventory').dataTable( {
"aoColumns": [
{ "sWidth": "550px" },
{ "sWidth": "370px" },
{ "bVisible": false },
{ "bVisible": false },
{ "bVisible": false }
],
"aaSorting": [[1, 'asc']]
});


$(oTable.fnGetNodes() ).each( function () {
$(this).click( function () {
/* deselect and close all currently open rows */
$(oTable.fnGetNodes()).each( function () {
$(this).removeClass('row_selected');
oTable.fnClose( this );
});

/* Open this row */
$(this).addClass('row_selected');
oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
} );
} );
} );

[/code]

laura

Hi all, in case someone is working with this same type of functionality, I was able to get it working with the following code:
[code]

var oTable;

/* Formating function for row details */
function fnFormatDetails ( nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'Description: '+aData[3]+'
Services: '+aData[4]+'';
sOut += 'Locations: '+aData[5]+'';
sOut += '';
return sOut;
}


$(document).ready(function() {

/* Initialse DataTables */
oTable = $('#inventory').dataTable( {
"aoColumns": [
{ "sWidth": "520px" },
{ "sWidth": "400px", "sType": "html" },
{ "bVisible": false },
{ "bVisible": false },
{ "bVisible": false }
],
"aaSorting": [[0, 'asc']]
});

$(oTable.fnGetNodes() ).each( function () {
$(this).click( function () {
var nTr = this;
/* deselect and close all currently open rows */
$(oTable.fnGetNodes()).each( function () {
$(this).removeClass('row_selected');
oTable.fnClose( this );
});

/* Open this row */
$(this).addClass('row_selected');
oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
} );
} );

} );

[/code]

*Note the following addition removes the nTr is not defined error
[code]var nTr = this;[/code]

Thanks!

laura

So I took this in a bit of a different direction, and tried to initalize the behavior of show/hide on each individual row.

I got it working, except for it only works once... if I click on a row, it shows the extra details. If I click it again, it hides. BUT if I click it again, it does not open :( I've inspected the source and everything looks ok, but clearly isn't.

Any help is appreciated - here is my code. Thank you!

[code]

var oTable;

/* Formating function for row details */
function fnFormatDetails ( nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'Description'+aData[2]+'';
sOut += 'Services'+aData[3]+'';
sOut += 'Locations'+aData[4]+'';
sOut += '';
return sOut;
}


$(document).ready(function() {

/* Initialse DataTables */
oTable = $('#inventory').dataTable( {
"aoColumns": [
{ "sWidth": "520px" },
{ "sWidth": "400px", "sType": "html" },
{ "bVisible": false },
{ "bVisible": false },
{ "bVisible": false }
],
"aaSorting": [[0, 'asc']]
});


$('#inventory tbody tr').click( function () {
var nTr = this;
$(this).addClass('row_selected');
oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );

$('#inventory tbody tr.row_selected').click( function () {
$(this).removeClass('row_selected');
oTable.fnClose( this );
});

});

} );

[/code]

allan

Hi Laura,

I would guess that this is due to the interaction between the two click event handlers. If you fire up Visual Event, which I linked to before, you should see two click event handles attached to rows which are currently 'selected'. I think this is going to cause unexpected behaviour. So either you could remove the live event handler on that row, which might be a bit of hassle, or you could simply look for the 'row_selected' class on a row (using hasClass) - if it isn't there, then open the row - if it is then close it (which is rather like what my example currently does). This way you can do away with the second click event.

Regards,
Allan

laura

Of course! Thank you!!

If anyone is in need of this here is the code that works for me:

[code]
/* Add event listener for opening and closing details*/
$(oTable.fnGetNodes() ).each( function () {
$(this).click( function () {
var nTr = this;
if ( $(this).hasClass('row_selected') )
{
/* This row is already open - close it */
$(this).removeClass('row_selected');
oTable.fnClose( nTr );
}
else
{
/* Open this row */
$(this).addClass('row_selected');
oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
}
} );
} );
[/code]

Blalien

Could someone help me to implement this feature?
I think it's a bit more user friendly with clickable rows.
I tried a lot but can't get it to work.

Thanks,
Blalien


[code]
function fnFormatDetails ( nTr )
{
var aData = oTable.fnGetData( nTr );

var details = aData[5];
details = details.split("±");

var sOut = '';

sOut += 'Klachtnummer'+aData[1]+'';
sOut += 'Ordernummer'+details[0]+'';

sOut += 'Klantnaam'+aData[2]+'';
sOut += 'Artikelnummer'+details[1]+'';

sOut += 'Contactpersoon'+details[2]+'';
sOut += 'Product'+details[3]+'';

sOut += 'Datum klacht'+aData[3]+'';
sOut += 'Aantal geleverd'+details[4]+' '+details[5]+'';

sOut += 'Onderwerp klacht'+details[6]+'';
sOut += 'Orderwaarde'+details[7]+'';

sOut += 'Klacht waarde'+details[8]+'';
sOut += 'Ingevuld door'+details[9]+'';

sOut += '';

sOut += 'Productienummers'+details[10]+'';
sOut += 'Rubriek'+details[11]+', '+details[12]+'';

sOut += 'Retour & bevindingen'+details[13]+'';
sOut += 'Datum'+details[14]+'';

sOut += '';
sOut += 'Ingevuld door'+details[15]+'';

sOut += 'Qualitynummer'+details[16]+'';
sOut += 'Geïnitieerd door'+details[17]+'';

sOut += '';

sOut += 'Eventuele Credit nr.'+details[18]+'';
sOut += 'Datum'+details[21]+'';

sOut += 'Creditwaarde'+details[20]+'';
sOut += 'Ingevuld door'+details[19]+'';

sOut += 'Opmerkingen'+details[22]+'';
sOut += 'Akkoord'+details[23]+'';


sOut += '';

return sOut;
}


$(document).ready(function() {

oTable = $('#klachten').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "server_processing.php",
"aaSorting": [[1, 'asc']],
"sPaginationType": "full_numbers",
"bJQueryUI": true,
"bStateSave": true,
"aoColumns": [
//{ "sClass": "center", "bSortable": false },
null,
null,
null,
null,
{ "bVisible": false }
]
} );



/* Add event listener for opening and closing details*/
$(oTable.fnGetNodes() ).each( function () {
$(this).click( function () {
var nTr = this;
if ( $(this).hasClass('row_selected') )
{
/* This row is already open - close it */
$(this).removeClass('row_selected');
oTable.fnClose( nTr );
}
else
{
/* Open this row */
$(this).addClass('row_selected');
oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
}
} );
} );


$('#klachten tbody tr').click( function () {
var nTr = this;
$(this).addClass('row_selected');
oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );

$('#klachten tbody tr.row_selected').click( function () {
$(this).removeClass('row_selected');
oTable.fnClose( this );
});
});

} );
[/code]