How to expand data table rows in YUI2

I've been assigned to work on a data table solution which allows user to click on an arrow to expand and display a drop-down row for details.

> Customers                  123

  - Melbourne                 (2)

  - Brisbane                    (119)

  - Darwin                      (2)

- Processing                   5

Requirement:

- Not every row needs a drop down, in this case, only the first row

- A grand total of all the items' total is displayed at the parent (bold) row

- Data Table is preferred to display the data

However, my solution falls between DataTableControl: Row Expansion and Nested DataTables.  I use this version of rowexpansion.js for my assignment.

Solution

	// 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);
	}

view raw rowexpDT.js hosted with ❤ by GitHub

End result

References

- If DataTable's width is set to 100%, column width will be ignored in YUI2.  Here's the workaround.

1. Set the CSS property "width: 100%" for either the DataTable's table tag, or the div that contains the DataTable.
2. Set the "width" DataTable column property to the number of pixels you want specifically per column.
3. Set the "minWidth" DataTable column property to a ridiculously enormous number per columns you want auto-sized.

var myColumnDefs = [
  {key:"foo", width: 20},
  {key:"bar", minWidth: 999999 },
];

new YAHOO.widget.DataTable("someContainer", myColumnDefs, myDataSource);