Answers

• allan Posts: 63,368Questions: 1Answers: 10,449 Site admin

  June 2014

  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 Posts: 21Questions: 8Answers: 0

  June 2014

  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 Posts: 63,368Questions: 1Answers: 10,449 Site admin

  June 2014

  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 Posts: 21Questions: 8Answers: 0

  June 2014 edited June 2014

  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 Posts: 63,368Questions: 1Answers: 10,449 Site admin

  June 2014 Answer ✓

  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 Posts: 21Questions: 8Answers: 0

  June 2014

  Worked! Thanks Allan