YUI2 DataTable Row Expansion on certain rows

rowexpDT.js

// HTML page
// <h2>Customer Summary</h2>
// <div>
//   <button id="esLastHour">Last Hour</button>&nbsp;
//   <button id="esDaily">24 Hours</button>&nbsp;
//   <button id="esWeekly">1 Week</button>&nbsp;
//   <button id="esMonthly">4 Weeks</button>
// </div>
// <div id="errorSummaryDT" class="dataTable"></div>

// Response example
// {"customerSummary":[{"title":"Customer","total":92489,"items":[{"type":"Melbourne","total":"92486"},{"type":"Sydney","total":"2"},{"type":"Brisbane","total":"1"}]},{"title":"Processing","items":[],"total":"1"}]}

function initErrorDT(e, o) {
  // Reset all button background color
  document.getElementById('esLastHour').style.backgroundColor = '#B00500';
  document.getElementById('esDaily').style.backgroundColor = '#B00500';
  document.getElementById('esWeekly').style.backgroundColor = '#B00500';
  document.getElementById('esMonthly').style.backgroundColor = '#B00500';

  // Highlight the selected button
  if (o.type == 0) {
    document.getElementById('esLastHour').style.backgroundColor = '#E70C00';
  } else if (o.type == 1) {
    document.getElementById('esDaily').style.backgroundColor = '#E70C00';
  } else if (o.type == 2) {
    document.getElementById('esWeekly').style.backgroundColor = '#E70C00';
  } else {
    document.getElementById('esMonthly').style.backgroundColor = '#E70C00';
  }

  var myDataSource = new YAHOO.util.XHRDataSource(baseURL + 'widget/getCustomerSummary/' + o.type, { connMethodPost: true });
  myDataSource.responseType = YAHOO.util.XHRDataSource.TYPE_JSON;
  myDataSource.responseSchema = {
    resultsList: 'customerSummary', 
    fields: [
      {key: 'title'}, 
      {key: 'items'},
      {key: 'total'}
    ],
  };

  var expansionFormatter  = function(el, oRecord, oColumn, oData) {
    // modify from YAHOO.widget.RowExpansionDataTable.formatRowExpansion
    if( oRecord.getData('title') == 'PhoenixErrors' ){
      YAHOO.util.Dom.addClass( el.parentNode, 'yui-dt-expandablerow-trigger' );
      el.innerHTML = '<a class="yui-dt-expandablerow-trigger-inner" href="javascript:void(0);"></a>';
    }
  };
  
  var myDataTable = new YAHOO.widget.RowExpansionDataTable(
    'customerSummaryDT', [{
      label: ' ',
      width: 20,
      formatter: expansionFormatter,
    }, {
      key: 'title',
      minWidth: 999999,
      label: 'Type', 
    }, {
      key: 'total',
      width: 100,
      label: 'Total',
      className:'align-center',
    }],
    myDataSource, {
      rowExpansionTemplate: function(o) {
        var html = '<div class="dataTable yui-dt">' + 
                   '<table>' + 
                   '<thead>' + 
                   '<tr class="yui-dt-first yui-dt-last">' + 
                   '<th class="align-center"><div class="yui-dt-liner"><span class="yui-dt-label">Type</span></div></th>' + 
                   '<th class="align-center" style="width:120px"><div class="yui-dt-liner"><span class="yui-dt-label">Total</span></div></th>' + 
                   '</thead>' + 
                   '<tbody class="yui-dt-data">';

        var count = o.data.getData('items').length;

        for (var i = 0; i < count; i++) {
          html += '<tr class="yui-dt-even">';
          html += '<td><div class="yui-dt-liner">' + (o.data.getData('items'))[i].type + '</div></td>';
          html += '<td class="align-center"><div class="yui-dt-liner">' + (o.data.getData('items'))[i].total + '</div></td>';
          html += '</tr>';
        }
        html += '</tbody></table></div>';
        
        o.liner_element.innerHTML = html;
        YAHOO.util.Dom.setStyle(o.liner_element, 'background', '#fff');
      }
    }
  );
  
  // Subscribe to a click event to bind to
  myDataTable.subscribe('cellClickEvent',  myDataTable.onEventToggleRowExpansion);
}