Answers

• uheber Posts: 1Questions: 0Answers: 0

  November 2016 edited November 2016

  Hi together,

  had the same problem which I have resolved as follows:
  1. Store current opened rows in array (global variable 'openRows')
  2. Create a function 'closeOpenedRows()' with parameter 'table' and current selected 'row'

  For usage, the 'else' tree of the event listener needs to be updated
  1. first the new JS function is called to close all other open rows including update the expand/collapse icon
  2. further, the current row be stored within the global variable for later comparison within JS function

              // stores the open rows (detailed view)
              var openRows = new Array();
  
              /**
               * Close all previously opened rows
               * 
               * @param {object} table which is to be modified
               * @param {object} selectedRow needs to determine, 
               * which other rows can be closed
               * @returns {null}
               */
              function closeOpenedRows(table, selectedRow) {
                  $.each(openRows, function (index, openRow) {
                      // not the selected row!
                      if ($.data(selectedRow) !== $.data(openRow)) {
                          var rowToCollapse = table.row(openRow);
                          rowToCollapse.child.hide();
                          openRow.removeClass('shown');
                          // replace icon to expand
                          $(openRow).find('td.details-control').html('<span class="glyphicon glyphicon-plus"></span>');
                          // remove from list
                          var index = $.inArray(selectedRow, openRows);
                          openRows.splice(index, 1);
                      }
                  });
              }
  
                  // Add event listener for opening and closing details
                  $('#table_id 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 - change icon
                          $(this).html('<span class="glyphicon glyphicon-plus"></span>');
                          // close it
                          row.child.hide();
                          tr.removeClass('shown');
                      } else {
                          // close all previously opened rows
                          closeOpenedRows(table, tr);
  
                          // This row should be opened - change icon
                          $(this).html('<span class="glyphicon glyphicon-minus"></span>');
                          // and open this row                        
                          row.child(format(row.data())).show();
                          tr.addClass('shown');
  
                          // store current selection
                          openRows.push(tr);
                      }
                  });
  

  Hope it helps someone. Perhaps there are even more elegant solutions. Feedback is welcome.

  Regards,
  Uwe