child row addtional close buttons

BrunoB

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">&nbsp;</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.

BrunoB

sorry correcting the code above (missing information)

> function format ( d ) {
>   return '<div class="closebut">&nbsp;</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>'
> };

colin

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

BrunoB

@colin enclosed the test case link: http://live.datatables.net/widuwoba/1/edit

Please refer to the screen shot:

thx everyone for the support

allan

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

BrunoB

@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

BrunoB

@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

kthorngren

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's tr.

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

colin

If you look at Allan's version, he put an extra column into the HTML - you'll need to do that too,

Colin

BrunoB

@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 controlcell. i was not able to isolate it, any ideas?

kthorngren

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

BrunoB

thx. @kthorngren !