child row addtional close buttons

child row addtional close buttons

BrunoBBrunoB Posts: 12Questions: 2Answers: 0
edited March 2022 in DataTables

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.

This question has accepted answers - jump to:

Answers

  • BrunoBBrunoB Posts: 12Questions: 2Answers: 0
    edited March 2022

    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>'
    > };
    
  • colincolin Posts: 14,610Questions: 1Answers: 2,493

    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

  • BrunoBBrunoB Posts: 12Questions: 2Answers: 0
    edited March 2022

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

    Please refer to the screen shot:

    thx everyone for the support

  • allanallan Posts: 57,686Questions: 1Answers: 9,195 Site admin

    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

  • BrunoBBrunoB Posts: 12Questions: 2Answers: 0
    edited March 2022

    @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

  • BrunoBBrunoB Posts: 12Questions: 2Answers: 0

    @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

  • kthorngrenkthorngren Posts: 17,688Questions: 25Answers: 4,197
    Answer ✓

    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

  • colincolin Posts: 14,610Questions: 1Answers: 2,493

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

    Colin

  • BrunoBBrunoB Posts: 12Questions: 2Answers: 0

    @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?

  • kthorngrenkthorngren Posts: 17,688Questions: 25Answers: 4,197
    Answer ✓

    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

  • BrunoBBrunoB Posts: 12Questions: 2Answers: 0

    thx. @kthorngren !

Sign In or Register to comment.