Subscribe
Follow
TournologyPlease note that this post has been updated to the new version of YUI, 2.3.0 in an article called “Enlarging your YUI DataTable in 29 Seconds or Less!”
Do you want to fit more content onto your DataTable, but don’t know how? Do you wish that you had fewer columns, or more horizontal screen-estate? Well now you can enlarge your table easily with these simple functions! Instead of adding more information into additional columns, we have used our patented method of not actually patenting anything to bring you a secret formula that will allow you to dynamically insert rows into your table, designed for holding additional, non-constrained customizable content!
Do you mean to tell me that your formula will give that special lady in your life the DataTable that she has always wanted?
Of course! In fact, we guarantee this DataTable to satisfy all of the women you know and don’t know in the world or we’ll give you a full refund of the purchase price!
Wow! How does it work?
Click here for an example!
When you click on a row in the DataTable, it inserts a child row beneath the row with an HTML string passed in to populate the dynamic content. When you click on the parent row or the new row that was inserted, the content disappears! It’s that easy! You don’t have to apply any gross awful smelling creams, or take any large horse-sized pills for this to work! You literally only use the following code to do it:
Usage Code:
var myDataTable = new YAHOO.widget.DataTable("myContainer",myColumnSet,myDataSource); myDataTable.subscribe("cellClickEvent", myDataTable.onEventSelectRow); // make sure you're firing the row selection event myDataTable.subscribe("cellClickEvent", function( e ) { var myCustomHtml = 'Hello, this is my expanded content.<br />:-)<br />'; // generate the string, could use an ajax call if you wanted. YAHOO.ymod.datatable.clickAndExpand.call( this, e, myCustomHtml ); // if you do use an ajax call, this function returns a reference to the newly created div that you can put the ajax results into. } );
Library Code:
YAHOO.namespace( 'YAHOO.ymod.datatable' ); YAHOO.ymod.datatable.clickAndExpand = function( e, expandedHtml ) { var selectedRows = this.getSelectedRows(); if( selectedRows.length > 0 ) { if( YAHOO.util.Dom.hasClass( selectedRows[ 0 ], 'ymod-expandedData' ) ) { YAHOO.util.Dom.removeClass( selectedRows[ 0 ].previousSibling, 'expanded' ); selectedRows[ 0 ].parentNode.removeChild( selectedRows[ 0 ] ); } else if( !YAHOO.util.Dom.hasClass( selectedRows[ 0 ], 'ymod-expanded' ) ) { var newRow = document.createElement( 'tr' ); var newCell = document.createElement( 'td' ); var newDiv = document.createElement( 'div' ); YAHOO.util.Dom.addClass( newDiv, 'ymod-expandedDataContent' ); if( expandedHtml != null ) newDiv.innerHTML = expandedHtml; newCell.appendChild( newDiv ); newCell.colSpan = selectedRows[ 0 ].childNodes.length; newRow.appendChild( newCell ); YAHOO.util.Dom.addClass( newRow, 'ymod-expandedData' ); if( YAHOO.util.Dom.hasClass( selectedRows[ 0 ], 'yui-dt-odd' ) ) YAHOO.util.Dom.addClass( newRow, 'yui-dt-odd' ); else if( YAHOO.util.Dom.hasClass( selectedRows[ 0 ], 'yui-dt-even' ) ) YAHOO.util.Dom.addClass( newRow, 'yui-dt-even' ); YAHOO.util.Dom.addClass( selectedRows[ 0 ], 'ymod-expanded' ); selectedRows[ 0 ].parentNode.insertBefore( newRow, selectedRows[ 0 ].nextSibling ); YAHOO.util.Event.addListener( newRow, 'click', function( e ) { YAHOO.ymod.datatable.collapseRow( this ); YAHOO.util.Event.stopEvent( e ); } ); YAHOO.util.Dom.removeClass( selectedRows[ 0 ], 'yui-dt-selected' ); YAHOO.util.Event.stopEvent( e ); return newDiv; } else { selectedRows[ 0 ].parentNode.removeChild( selectedRows[ 0 ].nextSibling ); YAHOO.util.Dom.removeClass( selectedRows[ 0 ], 'ymod-expanded' ); YAHOO.util.Dom.removeClass( selectedRows[ 0 ], 'yui-dt-selected' ); YAHOO.util.Event.stopEvent( e ); } } }; // pass in the expanded content, NOT the parent row. YAHOO.ymod.datatable.collapseRow = function( row ) { YAHOO.util.Dom.removeClass( row.previousSibling, 'ymod-expanded' ); YAHOO.util.Dom.removeClass( row.previousSibling, 'yui-dt-selected' ); row.parentNode.removeChild( row ); };
Customize the CSS, if desired.
.yui-dt-table tr.ymod-expandedData { background-color: #bdcede; cursor: pointer; } .yui-dt-table tr.ymod-expandedData td { padding-right: 5px; padding-bottom: 5px; white-space: normal; overflow: visible; } .yui-dt-table tr.ymod-expanded { background-color: #bdcede; } .yui-dt-table tr.ymod-expanded td { border-bottom: 0; } .yui-dt-table div.ymod-expandedDataContent { background-color: #f4f4f4; border: 1px inset #aaa; padding: 2px 5px; white-space: normal; zoom: 1; overflow: hidden; }
You might even want to put a little + and – into the first column of each row to give a visual cue that there is more information for display available on click.
7 Comments
Note to readers, this has been tested and DOES NOT work in YUI 2.3.0. If there is one reader that posts as wanting the updated code, I will post the fix (I have already implemented it), otherwise I won’t worry about it.
Absolutely I’d like to see the updated code posted. I’m working on a space-challenged app with DataTable and that looks like a good technique.
Scott
I would also like the fix if possible…looks like a great technique – Thanks!
I realized that the refactor I did for this plugin doesn’t allow you to insert content using an AJAX call (like the previous version did), so I’m going to change the code once more and post it. Your patience is appreciated!
Thanks again Zach, your work is really appreciated.
To get it to work in YUI 2.5.1, change the line that reads
var selectedRows = this.getSelectedRows();
to
var selectedRows = this.getSelectedTrEls();
There still seems to be an issue with expanding/collapsing multiple rows though.
This works great but in a paged table if an expanded row is open when you click to a different page, it seems to mess up the table. I created this bit of code to close all the open panels before calling the normal pagination, thoughts?
var handlePagination = function ( oState, dt ) {
// get array of expanded rows, pass root node to speed this up
var rows = YAHOO.util.Dom.getElementsByClassName( 'ymod-expandedData', 'tr' );
if( rows.length > 0 ) {
// iterate rows (if any) and call collapse on them
for( var i = 0; i < rows.length; i++ ) {
// ymod method to close expanded rows
YAHOO.ymod.datatable.collapseRow( rows[i] );
}
}
// call normal pagination routine
YAHOO.widget.DataTable.handleDataSourcePagination( oState, dt );
}
One Trackback
[...] is an updated version of the Enlarging your YUI DataTable in 30 Seconds or Less! modified for the newly released YUI [...]