Make entire row expand – Extension: Row Details?

makeObleed asked: “Is there any way to make the entire row expandable and not by only clicking the “+” sign? Thanks.”
I do not need.
makeObleed asked: “One more question. How to expand only one row at a time? That would be my final question.”
I need it.
How to make a second piece of advice, without making the first advice. What would open and close “row_details” cell using “row-details-toggle div”, and “expand only one row at a time?”

Hi,

ah, ok. Thanks for the clarification.
I think the best way to achieve this would be to not perform the change from my very first reply, but only the other ones.

Regards,
Tobias

Tobias.
For two your advice I got this:

200: {$name}.find('tbody').on( 'click', 'tr', function() {
201:		var open_row = $('.row-details-row-open').find('.row-details-toggle div').toggleClass('row-details-open').toggleClass('row-details-close').parents('tr').toggleClass('row-details-row-open')[0];
202:		if ( open_row && {$datatables_name}.fnIsOpen( open_row ) ) {
203:			{$datatables_name}.fnClose( open_row );
204:}
205:		var	row = $(this).find('.row-details-toggle div').toggleClass('row-details-open').toggleClass('row-details-close').parents('tr').toggleClass('row-details-row-open')[0];
206:		if ( {$datatables_name}.fnIsOpen( row ) ) {
207:			{$datatables_name}.fnClose( row );
208:		} else {
209:			{$datatables_name}.fnOpen( row, {$datatables_name}_row_details( {$datatables_name}.fnGetData( row ), {$datatables_name}_titles ), 'row-details' );
210:		}
211:	} );
212: JS;

It works like makeObleed.
I tried to line 200 and 201 to change back to:

200: {$name}.find('tbody').on( 'click', '.row-details-toggle div', function() {
201:	var	row = $(this).toggleClass('row-details-open').toggleClass('row-details-close').parents('tr').toggleClass('row-details-row-open')[0];

tried, and more, but in the end nothing works.

Hi,

please try to change only line 200 from

{$name}.find('tbody').on( 'click', 'tr', function() {

back to

{$name}.find('tbody').on( 'click', '.row-details-toggle div', function() {

and change line 205 from

var	row = $(this).find('.row-details-toggle div').toggleClass('row-details-open').toggleClass('row-details-close').parents('tr').toggleClass('row-details-row-open')[0];

to

var	row = $(this).toggleClass('row-details-open').toggleClass('row-details-close').parents('tr').toggleClass('row-details-row-open')[0];

Regards,
Tobias

Ok, Tobias! Thank U.
It turned out almost as expected.
Click on the plus – cell open
Push another plus – other cell opens, and closes the first cell.
You press the minus – nothing happens. How to do that would be minus worked and can be neatly close all cells?

Hi,

yes, I noticed that as well.
I think it’s caused by the general structure of how the change for having just one open row was implemented.

Reversing this would require to completely rewrite this code, but unfortunately, I don’t have the time to do this at the moment ?? Sorry.

Regards,
Tobias

Thank U!
Yes, very sorry. “Datatables Row Details” – very promising and beautiful project. That could replace several plugins on our sites WordPress.
But what to do. As one of our movie stars: “We will search.”
Excuse me for my persistence. I wanted to make better.
Regards, Arkona.

Hi,

yeah, it’s a very cool idea, indeed.
I hope that I can make it better in the future.

Regards,
Tobias