Derik Whittaker

I decided that I wanted to give the YahooUI (YUI) framework/library a go recently.  My first task was to get a few of my data listing pages on Dimecasts.net to use the DataTable Control from YUI.  Having never used the library I was not sure what I was in for, but for once (ok, maybe a bit of an exaggeration) I was flooded with TOO much documentation.  With a bit help from Chris Sutton I was able to get a pretty nice datatable up an running in a pretty short period of time.

Below what I needed to do in order to get the grid running (check here to see a working copy).

1. Create the controller action that would return the data
   
   

   public JsonResult GetTopViewedItems()
   {
   	// CastsService is my call to the service layer
   	var items = CastsService.GetMostViewedEpisodes();
   	var jsonResult = Json( items );
   
   	return jsonResult;
   }
   

   
   
   Here I have decided to use the JsonResult ActionResult that is part of the ASP.Net MVC Project because it will take care of turning my object model into well formatted Json.
   
2. Adding the place holder Div on my page where I wanted the data to go.
   
   

   <div id="items"/>
   

   
   
3. Adding all the correct .js includes that are needed (and there are a ton)
   
   

   	
   // as you can see there are a ton that are needed.
   <script src="../../Content/YahooUI/yahoo/yahoo-min.js" type="text/javascript"/>
   <script src="../../Content/YahooUI/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"/>
   <script src="../../Content/YahooUI/element/element-beta-min.js" type="text/javascript"/>
   <script src="../../Content/YahooUI/event/event-min.js" type="text/javascript"/>
   <script src="../../Content/YahooUI/json/json-min.js" type="text/javascript"/>
   <script src="../../Content/YahooUI/connection/connection-min.js" type="text/javascript"/>
   <script src="../../Content/YahooUI/datasource/datasource-beta-min.js" type="text/javascript"/>
   <script src="../../Content/YahooUI/datatable/datatable-beta-min.js" type="text/javascript"/>
   <script src="../../Content/YahooUI/yuiloader/yuiloader-beta-min.js" type="text/javascript"/>
   
   

   
   
   
4. Adding the correct YUI code in my in order to get and load my data.
   
   

           
   YAHOO.util.Event.addListener(window, "load", function() {
                      
   	// Add the custom formatter to the shortcuts 
           YAHOO.widget.DataTable.Formatter.myCustom = this.myCustomFormatter;    
   		var myColumnDefs = [                    
                       {key:"EpisodeNumber"},
                       {key:"Name"}, 
                       {key:"EpisodeDate"},
                       {key:"Count"}
                   ];
   
                   this.myDataSource = new YAHOO.util.DataSource("/Casts/GetTopViewedItems/");
                   this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
                   this.myDataSource.responseSchema = { 
                   fields: [{key:"EpisodeNumber"},
                               {key:"Name"},
                               {key:"EpisodeDate"},
                               {key:"Count"}
                            ] };
   
                   this.myDataTable = new YAHOO.widget.DataTable("items", myColumnDefs, this.myDataSource, {});                             
                   
   });
   
   

   
   
   There are a few key points to pay attention to here
   1. I am telling the YUI library to call my controller action based on the provided route.
   2. I have set the responseType to TYPE_JSON, there are multiple types that this be set to
   3. I am calling this script on the page load.

In the future I play to add skinning to the site as well as more async calls for things like the comment submission as well as data loading.  Expect more posts in the future.

I hope this helps someone else get starting with YUI.  And remember to check out the YUI site as there are TONs of great examples and resources.

Till next time,

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