Derik Whittaker

In a prior posting (here) I walked through how to add the YUI DataTable to your site.  Today I thought I would take that a step further and explain how to create custom formatters so your grid can look all fancy and stuff. 

A custom formatter is a way to define a layout for the DataTable.  There are built in formatters, but you can also define your own.

Here are the list of built in formatters (found in YUI docs):

• "button" points to YAHOO.widget.DataTable.formatButton
• "checkbox" points to YAHOO.widget.DataTable.formatCheckbox
• "currency" points to YAHOO.widget.DataTable.formatCurrency
• "date" points to YAHOO.widget.DataTable.formatDate
• "dropdown" points to YAHOO.widget.DataTable.formatDropdown
• "email" points to YAHOO.widget.DataTable.formatEmail
• "link" points to YAHOO.widget.DataTable.formatLink
• "number" points to YAHOO.widget.DataTable.formatNumber
• "radio" points to YAHOO.widget.DataTable.formatRadio
• "text" points to YAHOO.widget.DataTable.formatText
• "textarea" points to YAHOO.widget.DataTable.formatTextarea
• "textbox" points to YAHOO.widget.DataTable.formatTextbox

Creating your own formatter is cake, with a few lines of code you are off to the races.

IN order to create your own custom formatter you need to do 2 things.

1. Create the actual formatter:
   

   // wanna create a custom formatter for the cell
   this.myCustomFormatter = function(elCell, oRecord, oColumn, oData) 
               
   {
   
   	var name = oRecord.getData("Name");
           var episodeNumber = oRecord.getData("EpisodeNumber");
           elCell.innerHTML = "" + name + "";
               
   };
   

   
   
   You will notice that the code above is actually creating a delegate callback that the DataTable will invoke.  It is inside this callback that all the 'magic' happens.
   
2. Assign the formatter to the DataTable:
   

   // Add the custom formatter to the shortcuts 
   YAHOO.widget.DataTable.Formatter.myCustom = this.myCustomFormatter; 
   

   
   
   This code simply will assign your formatter to the Formatter collection that is part of the DataTable
   
3. Tell the particular column on the DataTable which formatter to use:
   

   var myColumnDefs = [                    
   	{key:"EpisodeNumber", label:"#", width:30},
           {key:"Name", formatter:"myCustom"}, 
           {key:"EpisodeDate", label:"Release Date", width:100},
           {key:"Count", width:50}
   ];
   

   
   
   Pay close attention to this code, take notice where I use 'formatter:"myCustom".  The use of myCustom MUST match the name you assigned the formatter on the DataTable formatters collection.
   

There you go, a quick overview on how to create and use a custom formatter for you your YUI DataTable.

Till next time,

[----- Remember to check out DimeCasts.Net -----]