child row addtional close buttons
child row addtional close buttons
![BrunoB](https://secure.gravatar.com/avatar/70ea8fe3379cec09e20660f8e0c0a9fc/?default=https%3A%2F%2Fvanillicon.com%2F70ea8fe3379cec09e20660f8e0c0a9fc_200.png&rating=g&size=120)
The child row in use works as expected.
Additionally, I would like to close the child row over the td pages (left and right) -> please see screenshot
The reason for this request is that the text content in the child row is quite too long. For saving some time and instead of scrolling up or down to close it over the td sides.
The reason for this request is that the iframe text content in the child row often quite long. To save some time and instead of scrolling up or down, close this directly over the td pages.
Any suggestions, hope you can help me and provide me some hints of the solution. Many thx in advance!
This is the code I’m using:
$(document).ready( function () {
function format ( d ) {
return '<div class="closebut"> </div><table cellpadding="0" cellspacing="0" border="0" width="100%">'+
'<tr ><td>'+
'<table width="100%"><tr><td><iframe id="frm_'+d[11]+'" src="http://xxxxxxxxxx='+d[11]+'" class="detFrame" scrolling="no"></iframe></td></tr></table>'+
'</td></tr>'+
'</table>'
};
$('#<cfoutput>#mytable#</cfoutput> tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
} );
$('detTable').removeClass('display');
$('detTable').removeClass('dataTable');
$('detTable').removeClass('cell-border');
});
columnDefs: [
{
targets: 0,
className: 'details-control',
orderable: false,
data: null,
defaultContent: ''
},
td.details-control {
background: url('https://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
background: url('https://www.datatables.net/examples/resources/details_close.png') no-repeat center center;
}
.closebutton {
background: url('https://www.datatables.net/examples/resources/details_close.png') no-repeat center center;
}
Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
This question has accepted answers - jump to:
Answers
sorry correcting the code above (missing information)
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
@colin enclosed the test case link: http://live.datatables.net/widuwoba/1/edit
Please refer to the screen shot:![](https://datatables.net/forums/uploads/editor/hx/kt3skt4r3j2n.jpg)
thx everyone for the support
Hi,
All I've done here is add an extra column in the table and duplicated the configuration for the first column: http://live.datatables.net/widuwoba/2/edit .
Because the events are setup to work on the class names of the cells, but the operation is on the row, that seems to work nicely.
Allan
@allan , thank you for the reply and support.
the goal /reason for this request is to have the button inside the child row itself
as the text content inside the iframe is quite too long. For saving some times and instead of scrolling up and down to close the child row I wanted to have the button inside the child row and use the same logic
is this possible? => please, see the screenshot attached.. above
@allan, i added an extra column in the child row but the button is not working
but the logic should be like this: http://live.datatables.net/widuwoba/4/edit
thank you for having a look and many thx for your support
Not sure if you noticed that when clicking the button you added to the child row the original child row click event is executed. It gives an error in the console because its unable to find the correct row. One option is to create a one time click event for the child row, for example:
http://live.datatables.net/widuwoba/7/edit
The event handler needs to use stopPropagation() to keep the original click event handler from executing. In the child row event handler I use jQuery click() to click the parent row's
td.details-control
cell. I added a parameter,td
, for the format function to receive the parent'str
.Note you have assigned a static id to the
table
in the child row. You don't need an id plus the id is excepted to be unique on the page.Kevin
If you look at Allan's version, he put an extra column into the HTML - you'll need to do that too,
Colin
@kthorngren /Hi Kevin thank you, this is exactly what i was looking for! thank you.
Is there a way to click only on the green bar and close it? Currently it also takes the blue bar (which is not wanted), please see the example http://live.datatables.net/widuwoba/10/edit . As you mention, it takes all
td.details control
cell. i was not able to isolate it, any ideas?Make the click event selector more specific, like this:
http://live.datatables.net/widuwoba/11/edit
Added 'td.details-control` like the parent click event.
Kevin
thx. @kthorngren !