Web 3.0, 6 Bladed Razors, 7 Minute Abs » Expandable http://www.zachleat.com/web Mon, 06 Feb 2012 17:09:08 +0000 en hourly 1 Enlarging your YUI DataTable in 29 Seconds or Less! http://www.zachleat.com/web/enlarging-your-yui-datatable-in-29-seconds-or-less/ http://www.zachleat.com/web/enlarging-your-yui-datatable-in-29-seconds-or-less/#comments Wed, 29 Aug 2007 03:09:48 +0000 Zach Leatherman http://www.zachleat.com/web/2007/08/28/enlarging-your-yui-datatable-in-29-seconds-or-less/ This is an updated version of the Enlarging your YUI DataTable in 30 Seconds or Less! modified for the newly released YUI 2.3.0.

This method adds an extra row to the YUI DataTable when a row is selected, below the selected row. This allows the developer to add additional content that might not be applicable to the column constraints of a typical datatable or grid and allow that content be displayed more fluidly inside a single row spanning all of the viewable columns.

I know you’re anxious for an example, so let’s see some screenshots of a simple YUI DataTable:

Default DataTable

Turns into this when a row is selected:

Row selected

Click any of the above images for a live example.

Any HTML can be added. You can make an AJAX call and put the result into the newly inserted row (that will be left as an exercise for the reader [you]).

I know you’re asking yourself, how the hell do I add this to my YUI DataTable? WHERE IS THE DAMN SOURCE CODE? Calm down, you know I’m getting to it.

How To

1. Include the ymod-tableExtension-2.3.0.js file.
2. Create your DataTable. If you don’t know how to do this, go to the official documentation for help and examples.
3. Make sure your DataTable has the selectionMode parameter set to ‘single’. This can be achieved by passing in { selectionMode: 'single' } in as the 4th argument to the DataTable constructor.
4. Use the following code to setup your table extension:

// myDataTable is your DataTable object
YAHOO.ymod.tableExtension.setup( myDataTable, function( contentDiv )
{
    var myContent = '';
    var selectedRows = this.getSelectedRows();
    if( selectedRows.length > 0 )
    {
        myContent += 'Do something based on<br />the row that is selected!';
    }
    contentDiv.innerHTML = myContent;
} );

The setup function is basically a convenience method to add the event listeners. You can just as easily do this yourself manually:

// myDataTable is your DataTable object.
myDataTable.subscribe( 'headerRowMousedownEvent', YAHOO.ymod.tableExtension.cleanUp );
myDataTable.subscribe( 'rowClickEvent', YAHOO.ymod.tableExtension.selectRow, function( contentDiv ) { /* same as function appears above */ } );

CSS

Here’s some CSS hooks to do some styling. The expanded row will include the yui-dt-selected class by default.

/* The original table row clicked on */
tr.ymod-expanded {}
/* Row containing the expanded content */
tr.ymod-expandedData {}
/* Div containing the expanded content inside the row */
tr.ymod-expandedData div.ymod-expandedDataContent { background-color: navy; padding: 2px 6px; }

Limitations

– Resorting removes the expanded content. Otherwise it was messing with the sort.
– It only works with single row selection mode, which allows only one row to be selected at a time. This is not the default (standard), which allows multiple rows to be selected with SHIFT or CTRL. Feel free to modify this to work with other modes!

Download ymod-tableExtension-2.3.0.js

]]> http://www.zachleat.com/web/enlarging-your-yui-datatable-in-29-seconds-or-less/feed/ 6 Enlarging your YUI DataTable in 30 Seconds or Less! http://www.zachleat.com/web/enlarging-your-yui-datatable-in-30-seconds-or-less/ http://www.zachleat.com/web/enlarging-your-yui-datatable-in-30-seconds-or-less/#comments Fri, 08 Jun 2007 02:51:08 +0000 Zach Leatherman http://www.zachleat.com/web/2007/06/07/enlarging-your-yui-datatable-in-30-seconds-or-less/ 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!

Normal DataTable

Expanded DataTable

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.

]]> http://www.zachleat.com/web/enlarging-your-yui-datatable-in-30-seconds-or-less/feed/ 8