Close All Details Rows

notyou61

I have a variety of grids separated by tabs on a single page. Many of these grid are using the "Row Details" table to show additional information. If one row is left open when clicking to another tab it remains open when returning to that tab. I would like to close all rows when exiting the tab so they are closed when returning. Any help is appreciated.

allan

You would need to trigger an action to have the rows in the target table 'closed'. Something like:

table.rows().eq(0).each( function ( idx ) {
  var row = table.row( idx );

  if ( row.child.isShown() ) {
    row.child.close();
  }
} );

Allan

notyou61

I attempted to use the code on the focusout function of the tab as follows:

            // Close Detail Rows
            $("#lnkEmployeesTab").focusout(function(e){
                // Close Open Detail Rows
                employeesTable.rows().eq(0).each( function ( idx ) {
                    var row = employeesTable.row( idx );

                    if ( row.child.isShown() ) {
                        row.child.close();
                    }
                });
                // Alert test
                testAlert('Hello');
            });

It seems to close the open row however it reopens immediately. Thanks for any help.

allan

Can you link to the page so I can tae a look please? The code above looks fine, it there something else also running that would cause the row to reopen?

Allan

notyou61

My datagrid is as follows:

            // Employee Datagrid
            employeesTable = $('#tblEmployees').DataTable({
                // Grid Options
                dom: "Tfrtip",
                lengthChange: false,
                bAutoWidth: false,
                bProcessing: true,
                order: [ 0, 'asc' ],
                // Ajax
                ajax: {
                    // URL
                    url: "dataGridQuery.php",
                    // Ajax Parameters
                    data: {
                            gridNumber:1
                          },
                    // Ajax Type
                    type: 'GET',
                    // Data Type
                    dataType: 'json'
                },
                // Columns
                columns: [
                    // Employee Details
                    {
                        title:          "Details",
                        class:          'details-control',
                        orderable:      false,
                        data:           null,
                        defaultContent: '',
                        width: "05%"
                    },
                    // Employee Name
                    { 
                        title: "Employee",
                        data: null, render: function (data, type, row) 
                            {
                                // Combine the first and last names into a single table field
                                return data.userHonorific + ' ' + data.userFirstName + ' ' + data.userLastName;
                            }, 
                        width: "30%" 
                    },
                    // Employee Last Action
                    { 
                        title: "Last Action",
                        data: null, 
                        render: function (data, type, row) 
                            {
                                // Format User Action
                                return obtainUserLastAction(data.userID);
                            }, 
                        width: "65%" 
                    }
                ],
                // Grid Buttons
                tableTools: {
                    sRowSelect: "os",
                    aButtons: []
                }
            });
            // Employee Table Details
            $('#tblEmployees tbody').on( 'click', 'tr td:first-child', function () {
                // Variables
                var tr = $(this).parents('tr');
                var row = employeesTable.row( tr );
                var idx = $.inArray( tr.attr('id'), detailRows );
                // Conditional
                if ( row.child.isShown() ) {
                    tr.removeClass( 'details' );
                    row.child.hide();
                    // Remove from the 'open' array
                    detailRows.splice( idx, 1 );
                } else {
                    tr.addClass( 'details' );
                    row.child( formatEmployeeTable( row.data() ) ).show();
                    // Add to the 'open' array
                    if ( idx === -1 ) {
                        detailRows.push( tr.attr('id') );
                    }
                }
            });
            // Employee Table Detail Rows Array
            employeesTable.on( 'draw', function () {
                $.each( detailRows, function ( i, id ) {
                    $('#'+id+' td:first-child').trigger( 'click' );
                } );
            });

Please let me know if needing any additional information. Thanks for all the help. :)

allan

At the end of the code block above you have an listener on the draw event which is opening the row on every draw. I would imagine that is causing the issue. Try commenting it out.

It sounds like the detailsRows isn't being correctly updated - which it isn't from the code in your second post.

Allan

notyou61

Worked! Thanks Allan