Matt Berseth

As a user, I am a fan of dashboard pages.  Many data centric web applications have these as landing pages (I know the one I am currently building does).  These pages usually display a high-level summary of the data the application is managing for the user.  A few weeks ago when I was playing around with some Google Analytic style skins I tried combining the AjaxControlToolkit's TabContainer control with a simple ListView rendered data table to see if I could mimic some of the dashboard controls that google uses.  I thought it turned out pretty well so I figured I would write a quick post ...

For my example app I created a Sales Dashboard control that displays sales figures for all of the sales people in some fictional company.  The dashboard has three different tabs, each provides a different view of the same data.  For my example, the only different in the queries that fill these grids is the order by clause (SalesYTD desc, SalesLastYear desc, Projected desc), but clearly these queries could be as simple or as complex as needed. 

After configuring the ListView to render the grids, I then gave each of the tabs a title that reflected the data the tab is displaying.  Here is what it looks like ...

And of course - here are links to download the code and browse the live demo - Live Demo (IE6, IE7, FF, Opera) | Download

There really isn't much for implementation details for this one because I didn't really hit any snags or gotchas that are worth mentioning.  But if you download the code and run into something that looks puzzling, I would recommend checking out my ListView and TabContainer archive pages for additional information.

That's it.  Enjoy!