About this entry

You’re currently reading “Enlarging your YUI DataTable in 30 Seconds or Less!,” an entry on Web 3.0, 6 Bladed Razors, 7 Minute Abs

Published:: 06.07.07 / 8pm

Category:: CSS, Interface Design, JavaScript

Bookmark with: del.icio.us

Add to: Digg

Post on: reddit

Search on: Technorati

Enlarging your YUI DataTable in 30 Seconds or Less!

Version Specific Article: YUI 2.2.2

Please 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.

Technorati Tags: YUI, DataTable, Grid, YUI DataTable

Zach Leatherman 08.20.07 / 9pm

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.

Scott Stodghill 08.22.07 / 11am

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

Kyle Jaster 08.27.07 / 1pm

I would also like the fix if possible…looks like a great technique - Thanks!

Zach Leatherman 08.27.07 / 5pm

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!

Kyle Jaster 08.27.07 / 7pm

Thanks again Zach, your work is really appreciated.

zachleat.com {web} » Enlarging your YUI DataTable in 29 Seconds or Less! 08.28.07 / 9pm

[…] is an updated version of the Enlarging your YUI DataTable in 30 Seconds or Less! modified for the newly released YUI […]

Nelson Menezes 04.28.08 / 2am

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.

Bill 06.13.08 / 2pm

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

}

About this entry

Enlarging your YUI DataTable in 30 Seconds or Less!

8 Comments

Have your say

Name (required)

OpenID URL

OR

Recent Posts

Tournology: Where do you rank?

Tournology: Recent Posts

Categories

About this entry

Popular Posts

Enlarging your YUI DataTable in 30 Seconds or Less!

8 Comments

Have your say

Name (required)

OpenID URL

OR

Recent Posts

Tournology: Where do you rank?

Tournology: Recent Posts

Categories

Tags