Matt Berseth

ASP.NET AJAX Progress Bar Control

2008-05-15T23:00:07Z

If you use AJAX in your web app's, you no doubt have made use of some sort of progress/status indicator that lets the user know that some operation is currently executing. In the app I am currently working on we use an animated gif for this. It works great, but sometimes you might find it nice to have more control over the indicator - i.e. interacting with it via JavaScript and styling it using CSS.

So I did a little research and found a nice example of one built using script.aculo.us. The demo page looked great so I downloaded the source to get a feel for how it worked. I liked what I saw so I thought I would create a new AjaxControlToolkit control based on this example. My original goal was just to port it over to ASP.NET, but as I started playing around with it I thought I might make a few changes to it as well. So during the process of porting it, I made the following tweaks

I added a mode that runs the progress bar from 0 to 100 continuously. This mode would be useful for scenarios where you don't know how long an operations would run for (like a typical partial postback)
The original requires different images for progress indicators of different widths. I chose to use a repeating background image instead so I could use a single progress image no matter the width of the control.
I add an updating CSS class to the control while the progress bar is running. In my demo page I use this to darken the percentage while the indicator is running. I was also thinking about adding the current percentage to the class as well so you could have a custom style applied depending upon what the current percentage is. Then you could do something like .progress .100 { } to control the styling when the indicator is displaying 100%.
I used a skinning approach that is very similar to the Toolkit's Tab control. I went ahead and created a bunch of sample skins (shown above) just to make sure my skinning technique worked alright.

Below are some details on how the controls - including how to add one to your page, interacting with it from JavaScript and creating custom skins using CSS. Read on if you are interested and don't forget to check out the live demo and download. I built it using .Net 3.5 and Toolkit version 3.5.11119.0, but I think it could be ported back to .Net 2.0 without too many issues.

Live Demo (IE6, IE7, FF and Opera) | Download

Using the Control

The download contains plenty of examples of how to interact with the control, but here is some sample markup that specifies the progress mode as well as the width ...

1:

   2:  <mb:ProgressControl ID="ProgressControl1" runat="server" Mode="Continuous" Width="150px" />

3:

   4:  <mb:ProgressControl ID="ProgressControl12" runat="server" Mode="Manual" Width="70px" />

When the control is in Continuous mode, you can start and stop the progress animation by using the play() and stop() JavaScript functions

   1:  //  start the indicator

   2:  $find('ProgressControl1').play();

3:

   4:  //  stop it

   5:  $find('ProgressControl1').stop();

And when the control is in Manual mode, you can use the set_percentage to manually change the percentage value. You can either provide an absolute value like in the first example, or a value that is relative to what ever the current value is - like the second example.

   1:  //  set the percentage to 62

   2:  $find('ProgressControl1').set_percentage(62);

3:

   4:  //  increase the percentage by 15

   5:  $find('ProgressControl1').set_percentage('+15');

HTML Emitted by the Control

Below is the markup the control emits. 1 DIV for containing the progress image, 1 DIV for displaying the percentage text, 2 DIV's for applying a border and an outer DIV that wraps it all.

   1:  <div class="ajax__progress" class="ajax__progress" id="ProgressControl1">

2:

   3:      <div class="ajax__progress_outer" id="ProgressControl1_outer">

   4:          <div class="ajax__progress_inner" id="ProgressControl1_inner">

5:

   6:              <div class="ajax__progress_indicator" id="ProgressControl1_indicator" />

   7:          div>

   8:      div>

9:

  10:      <div class="ajax__progress_info" id="ProgressControl1_info">75%div>

  11:  div>

Skinning the Control

To skin the control, you need to set the CssClass property of the ProgressControl to the name of the CSS class that defines your custom skin. For the skin portion of the demo page I have defined 6 custom themes. Below is the sample markup for this section ...

   1:  <mb:ProgressControl ID="ProgressControl4" runat="server" CssClass="green" Mode="Manual" Width="200px" />

   2:  <mb:ProgressControl ID="ProgressControl5" runat="server" CssClass="yelllow" Mode="Manual" Width="200px" />

   3:  <mb:ProgressControl ID="ProgressControl6" runat="server" CssClass="orange" Mode="Manual" Width="200px" />

   4:  <mb:ProgressControl ID="ProgressControl7" runat="server" CssClass="red" Mode="Manual" Width="200px" />

   5:  <mb:ProgressControl ID="ProgressControl8" runat="server" CssClass="lightblue" Mode="Manual" Width="200px" />

   6:  <mb:ProgressControl ID="ProgressControl11" runat="server" CssClass="solidblue" Mode="Manual" Width="200px" />

And here are the CSS style rules that apply the styles for these skins

One of the sample skins I made is roughly based on the XP style progress indicator. To create this custom skin, I first created the background image that I want to use for the indicator (I am using a 6 x 9 image)

then I use the .ajax__progress_indicator and .ajax__progress_inner classes to override the default skins height and progress image - Simple!

And here is how it looks ...

Screen shots of the Control's Features

Here are some static images that show off some of the control;s features ...

Continuous Mode

Progress indicator continuously fills the region from left to right.

Fluid Width

Progress indicator continuously fills the region from left to right.

Manual Mode - Update Absolute Percentage

Use the JavaScript API to set the percentage an absolute value

Manual Mode - Update Relative Percentage

Use the JavaScript API to set the percentage to a relative value

Skins

Use CSS to control the progress indicators look and feel

AJAX Operations

Example of displaying the indicator for AJAX operations

Modal Popup

An example using the progress control with the Tookit's ModalPopup control

That's it. Enjoy!

Bug Bash: Enabling/Disabling the ASP.NET AJAX Timer using the Control's Client Side API

2008-05-08T01:37:17Z

I know most dev's prefer writing new code over fixing/maintaining the existing stuff. And most days I feel the same way. But every once in a while it is kind of fun signing up for that one lingering defect that no one else can seem to fix. Maybe you know the one - its not reproducible, only occurs in production and brings the system to its knee's? Sound familiar?

Well I thought I might try something new and blog about some of the juicy bugs we have found hanging out in our app. This might turn into a blog series or something, or maybe not. Who knows.

The Bug

The app I am currently working on has a page that uses ASP.NET AJAX's new Timer control to automatically refresh the page every 30 seconds. The page is one of those status pages that lets you monitor the progress of some off-line processes. Under normal usage a user would make a request to run some off-line process and then be taken to this page where they can monitor the progress. The markup for the Timer looks something like this ...

<asp:Timer ID="timer" runat="server" Interval="30000" OnTick="Timer_Tick" />

When the server side Tick event fires we run a bit of code that gets the latest progress/status of the process and updates the UI. If the process has completed or failed, the Timer is turned off and the page quits automatically refreshing.

   1:  protected void Timer_Tick(object sender, EventArgs args)

   2:  {

   3:      if (IsProcessComplete())

   4:      {

   5:          //  the work is done, turn off the timer

   6:          ((Timer)sender).Enabled = false;

   7:      }

   8:  }

The content on the page is mostly read-only, but there is also a single INPUT element and a button that performs a postback. The problem is that sometimes the timer fires and causes the refresh to occur when the user is entering data into the INPUT box. And of course this can be a little irritating and confusing for the user.

This was the defect that rolled across my desk yesterday. So I took a look at the page, reproduced the problem and starting working out how I was going to fix it.

The Fix

I figured a sensible fix for this bug would be to disable the Timer when the INPUT's client side focus event fires and then re-enable it when blur fires. I described the solution to a few other dev's and everyone seemed to think it made sense. So I went off and started in on creating the fix.

The Implementation

I added a pageLoad event handler to my page and attached a bit of JavaScript to my INPUT element's focus and blur events that used the Timer component's client side API to enable and disable the timer.

   1:  function pageLoad(sender, args){

   2:      //  fetch the timer components

   3:      var timer = $find('<%= this.timer.ClientID %>');

   4:      //  fetch the INPUT element

   5:      var textbox = $get('<%= this.textbox.ClientID %>');

6:

   7:      $addHandler(textbox, 'focus', Function.createDelegate(this, function(){

   8:         //   disable the Timer so we don't refresh the page

   9:         //   while the user is entering the data

  10:         timer.set_enabled(false);

  11:      }));

12:

  13:      $addHandler(textbox, 'blur', Function.createDelegate(this, function(){

  14:         //   re-enable the Timer

  15:         timer.set_enabled(true);

  16:      }));

  17:  }

The Bug in the Fix

And holy crap I was surprised when this didn't fix the bug. I have worked with some of the other Timer controls before and unless I have misremembered, they all support this kind of thing - just in case you haven't noticed the .Net framework has no shortage of timer controls ;)

And I figured calling set_enabled(false) would do exactly what I want - turn off the timer. I spent ~10 minutes or so setting breakpoints and making sure my code wasn't faulty before I took a peek at the client side code for the Timer control. And guess what I found out - the Timer control doesn't check the enabled bit before it postback and raises the server side Tick event. No wonder my fix wasn't working!

The Fix to the Bug in the Fix

Is anyone else surprised by this? Well I was. So I nosed around the Timer's behavior a little bit more and to see if there was anything else here I could use. And it turns out there is. After a partial postback completes, the server side portion of the Timer control sends the client side 2 bits of data - a value for the timers interval and a boolean value that is true when the timer should be enabled and false otherwise. The client side timer component passes these 2 data items to it's _update function, which in turn either enables or disables the timer and updates the interval value. Here is the code for this function (I added the comments)

   1:  function Sys$UI$_Timer$_update(enabled,interval) {

   2:      //  check to see if the timer is already disabled

   3:      var stopped = !this.get_enabled();

   4:      //  check to see of the interval value has changed

   5:      var intervalChanged = (this.get_interval() !== interval);

   6:      //  if we are not stopped already and either

   7:      //  the interval value has changed or we are now

   8:      //  disabling the timer, stop the timer

   9:      if ((!stopped) && ((!enabled)||(intervalChanged))){

  10:          this._stopTimer();

  11:          stopped = true;

  12:      }

  13:      //  update the enabled bit and interval

  14:      this.set_enabled(enabled);

  15:      this.set_interval(interval);

  16:      //  if the timer needs to be enabled and it is

  17:      //  currently stopped, start the timer

  18:      if ((this.get_enabled()) && (stopped)){

  19:          this._startTimer();

  20:      }

  21:  }

So I decided to update my focus and blur event handlers to call this method to enable/disable the Timer. And guess what - now my page functions exactly how I want it to. But of course there are few things that are untidy about this approach:

The Timer's _update function is not meant to be invoked like this. Typically the '_' prefix indicates the member is non-public. I suppose this is a bit like using .Net's reflection to invoke a private method on some framework class - probably not a great idea.
This implementation now allows me to interact with the Timer's client side behavior, but when the page postsback the new enabled and interval values that were set on the client are not sent back to the server. And when the page reloads either from a full or partial postback these values will go back to what the server thinks they should be - essentially overwriting any of the changes you may have made.

But I can live with both of these items. I am betting against Microsoft changing the _update function (if they do, maybe they will support this scenario) and I don't need the values I set on the client sent back to the server. All I want is to be able to control when the Timer fires, and this approach does it.

   1:  function pageLoad(sender, args){

   2:      //  fetch the timer components

   3:      var timer = $find('<%= this.timer.ClientID %>');

   4:      //  fetch the INPUT element

   5:      var textbox = $get('<%= this.textbox.ClientID %>');

6:

   7:      $addHandler(textbox, 'focus', Function.createDelegate(this, function(){

   8:         //   disable the Timer so we don't refresh the page

   9:         //   while the user is entering the data

  10:         timer._update(false, timer.get_interval());

  11:      }));

12:

  13:      $addHandler(textbox, 'blur', Function.createDelegate(this, function(){

  14:         //   re-enable the Timer

  15:         timer._update(true, timer.get_interval());

  16:      }));

  17:  }

Bug Fixed. Enjoy!

Bulk Inserting Data with the ListView Control

2008-05-05T01:55:14Z

I am working on a project that needs a new screen for bulk entry tasks. We have a few business scenarios coming up where we have people inputting 5 to 8 records of data at a time. I met with a few of our analysts last week and hashed out a rough outline of what they were looking for. About 10 times or so during the 30 minute meeting some form of the phrase 'kind of like excel' was mentioned. Our data entry personnel are familiar with excel and our analysts thought an excel styled grid would make a lot of sense. 'An excel grid with a Submit button' was the phrase I had underlined twice in my notes.

I wasn't too worried about the grid's styling, but I wasn't quite sure what the best way to handle the 'bulk insert' requirement. Most of our other grids require an explicit mouse click to insert an item - and often times this click includes navigating the user to a separate page that is made to handle inserts. Of course for mass data entry tasks this can get a little old - tabbing through the cells is much nicer. So I took my notes back to my desk and started building a small prototype. You can check out the live demo to watch the grid in action. And a few of my implementation notes can be found under the screen shots below.

Live Demo (IE6, IE7, FF, Opera) | Download

Configuring the ListView

My excel styled grid only has one mode - bulk insert. It would also support mass updating as well, but for our use cases this is a one way data stream. I want to use the ListView because I like how the templates are structured, but the ListView doesn't natively support bulk inserting data (the ListView supports defining an InsertItemTemplate, but the ListView will only render this template once - so this template isn't useful for my scenario). I decided I would try using the regular ItemTemplate, but render elements that support editing instead of the usual read-only controls (i.e. TextBox's instead of Labels). I still use the Bind syntax because I want 2 way databinding, but because I am using the ItemTemplate for an insert scenario I will be responsible for telling the ListView when my data needs to be moved out of the controls and back to my data source. Below is the markup for my ListView.

Setting Up My DataSource

Next, I setup my data source. For this example I am using the ObjectDataSource control. When my data source is first bound to the ListView, I want to render placeholder objects for 8 records (i.e. I want my grid to show 8 empty rows by default). So when my Select method fires, I return a collection that contains 8 Customer objects that have their property values set to their default values (null strings for my example).

Next, I handle the Submit button's click event handler and loop through all of the ListViewDataItems and invoke the ListView's UpdateItem function which will cause the Update method on my ObjectDataSource to fire - moving the data back out from the controls and back into memory. Finally, after the data is moved back to memory, I persist the batch to the database (for the demo I am persisting it to memory, but when this page goes live it will obviously be put in the database).

To make sure I don't persist records with all empty values, I added a validation check to my Customer business object that makes sure the object has at least one data value before the row is submitted. If validation passes, I move the customer data into the database.

Toggling the DataTable's Skin

For a bit of flair I included a couple of radio buttons for changing the grids theme from the default 2003 style excel shown below (found a nice article here on creating this skin) to the 2007 version which is a bit softer (see screen shot at the beginning of the article).

To change the grids skin I attached event handler's to the radio button's click events and use the Sys.UI.DomElement.addCssClass and removeCssClass to toggle the CSS class that is applied to the grid. Below is the JavaScript that does this bit of work for me.

That's it. Enjoy!

Master-Detail with the GridView, DetailsView and ModalPopup Controls

2008-04-30T01:36:47Z

A while back I wrote a post describing how the DetailsView, GridView, UpdatePanel and the AjaxControlToolkit's ModalPopup controls could be used to implement the common Master/Details UI pattern. I cheated a bit when creating my original example in that I didn't really complete the implementation - the Save button on the popup didn't actually do anything. Since writing that post I have received a lot of email and a number of people left comments asking me to complete the example - so here it is. If you plan on reading through this article, I recommend playing around with the demo site to get a feel for how the page works. All data changes are only persisted to memory, so don't worry about messing up the data set.

Live Demo | Download

Scenario

I am sure everyone is pretty familiar with Master/Details style of editing data, but just in case - here is how my page works. The grid shows 12 rows of customer data. The far right column in the grid contains a hyperlink that when clicked brings the detail view of the row into focus so the corresponding row can be edited. The detail view is a popup control and contains a Save and Close buttons. When close is clicked, the detail popup is dismissed and the user goes back to viewing the main grid. When they click Save, some simple validation checks are run (all are RequiredFieldValidators for this sample) and the new data values are persisted, and finally the detail popup is dismissed and the main grid is refreshed so that it displays the changes.

Controls

There are quite a few controls that work together for this sample. Here is a listing of the controls and the role they play.

Control	Role
GridView	Display the 12 customer rows of data
DetailsView	Display the single customer row that is currently being edited
ModalPopupExtender	Display the DetailView modally
UpdatePanel	Allow the DetailView to be loaded without refreshing the entire page
ObjectDataSource	Manage how our UI interacts with the customer data

Customer GridView

The Customer Grid is just a regular GridView. I have used BoundFields to bind to the data and I am using a TemplateField for rendering the 'Edit' anchor.

When 'Edit' is clicked, I want to show the detail view popup. To accomplish this I set the CommandName of the 'Edit' button to Select - this will cause the SelectedIndexChanged event to fire on the server. Inside this event handler, I force the DetailView to databind, passing the datasource it is bound to the ID that corresponds to the row the user clicked. Finally, I let the UpdatePanel the DetailView is contained in that it needs to update its contents and invoke the Show server side method of my ModalPopupExtender which will cause the popup to be displayed when the partial page is reloaded on the client.

Here are the 2 events handlers that I am using to accomplish this bit of work. The top event handler fires when 'Edit' is clicked and the explicit call to DataBind forces the DetailView's corresponding ObjectDataSource's Selecting event to fire. In this handler I use the SelectedIndex of the GridView to fetch the ID the data source needs.

Customer DetailsView

The DetailsView for the individual customer records is also pretty simple - except because I have included RequiredFieldValidators I wasn't able to use the BoundFields and instead I had to explicitly define the EditItemTemplate for each of the fields.

Just below the DetailsView, I have 2 buttons that interact with the ModalPopupExtender. The Close button dismissed the popup without posting back or committing any changes. The Save button does post back, moves the data out of the DetailsView and back to the ObjectDataSource, hides the ModalPopupExtender and finally causes the main GridView to refresh so it displays the changes.

Here is the logic I have wired to the Save button's click handler.

Apply a Yellow Fade to the Updated Row in the GridView

And while this has been pretty much nuts and bolds functionality thus far, I couldn't resist trying to spice it up by applying a yellow fade to the row in the main grid that was updated. To implement this feature, I needed a way to send a bit of information back from the server that let me know what row in the grid was updated. So my approach was to use the ScriptManager's RegisterDataItem method to accomplish this. Here is the doc from MSDN:

Sends custom data to a control during partial-page rendering, and indicates whether the data is in JavaScript Object Notation (JSON) format.

Just what I need - so after the Save button is clicked, back in the server side event handler, I call RegisterDataItem and pass the index of the updated row to the GridView. Then after the partial refresh has occurred back on the client, I extract the row index from the DataItem's collection, use it to find the row that changed and give it a custom CSS class.

So I added the following call to my Save button handler to register the index of the row that was changed.

And then added the following JavaScript to my page to track down the corresponding TR element in the rendered table and apply the updated CSS class to the row.

And like magic I get a yellow background applied to the row that was edited. The background color stays in place for 1.5 seconds then my timeout handler fires and removes it. A poor man's animation, but the plumbing is in place for me to improve upon. Below are the screen shots of how it looks.

That's it. Enjoy!

AjaxControlToolkit TabContainer Theme Gallery

2008-04-25T01:55:51Z

I created a new theme for the AjaxControlToolkit's TabContainer control and I was going to write a post discussing how I did it. But as I was creating the post I realized that I have really written about all of the details before (see my TabContainer Archive page). So instead of repeating myself, I decided I would instead put together a post that catalogs the Tab themes I have created so far and pull of them together into a single demo site that showcases each of these themes. I plan on adding to the gallery as well as this post as new themes are added. If I like how it works I might create similar pages for some of my favorite ListView and GridView themes as well.

Live Demo (IE6, IE7, FF and Opera) | Download

Google Analytics Theme

Opera Theme

LinkedIn Blue Theme

LinkedIn Gray Theme

Gray Theme

YUI Theme

Soft-Green Theme

Fancy-Blue Theme

Fancy-Green Theme

Fancy-Orange Theme

Fancy-Purple Theme

Fancy-Red Theme

3 Tips for Working with the AjaxControlToolkit's TabContainer Control

2008-04-10T02:04:51Z

Here are three quick tips you might find useful when using the Toolkit's Tab control. I included demo's for all three tips so you can get a feel for how it looks and behaves.

Live Demo (IE6, IE7, FF, Opera) | Download

#1: How To Change the Selected Tab When the Tab Header is MousedOver

By default the tab control will switch the selected tab when a different tabs' header is clicked. Depending upon the content you are displaying, you might find it useful to change the selected tab as the user mouses over a different tab. I saw an example of this on designflavr.com. This site has a tab control that displays the categories and tags and some other miscellaneous links. These items are collected into a tab control that has been placed in the right hand sidebar.

You can get this mouseover style navigation by adding only a few lines of JavaScript to your page. And the logic is very simple:

get a reference to each of the tab panels
attach an event handler to the tab header's mouseover event
when the mouseover event fires, set it as the selected tab

Here is the chunk of JavaScript you can use to implement this. I put it in the pageLoad so it runs when the page spins up.

#2: How To Change the Selected Tab Using Navigation Buttons

And for other scenarios, you might want to use an input element like a button or something to control the tabs navigation - something like next and previous buttons for cycling through the tabs. To handle this scenario, you can use the bit of JavaScript below. If you wire this to the input elements click event, it will take care of advancing the selected. I even included wrap around logic for handling the scenario where the last tab is selected and the user clicks the next button. Again, nothing too fancy here, just some simple math for calculating the index of the next page and a few calls to the TabContainer's JavaScript components.

Here is the JavaScript function that handles this scenario ...

And this is how you can bind it to a Next and Previous buttons ...

#3: How to Center the Tab Headers Horizontally

Last tip - you want to center the tab headers like so ...

Just set the text-align of the .ajax__tab_header class to center.

That's it. Enjoy!

Using a DataPager with the GridView Control - Implementing IPageableItemContainer

2008-04-09T01:26:41Z

One of the new controls that shipped with ASP.NET 3.5 is the DataPager. It's a flexible control that renders the paging elements data-bound controls that implement the IPageableItemContainer interface (currently only the ListView control). The big change with the DataPager is that it is decoupled from the data-bound control it provides paging support for. It can be embedded somewhere within the data-bound control's control hierarchy (like contained within the LayoutTemplate of the ListView), but it doesn't have to - It can exist on its own outside of the data-bound control as well.

When I was writing my last post, I kind of wished the 3.5 GridView implemented the IPageableItemContainer interface. It sure would have made things simpler for me. So I thought I would take a shot at extending the GridView myself. Read on for the details.

Live Demo (IE6, IE7, FF, Opera) | Download

Implementing IPageableItemContainer

This is a pretty simple interface - 2 properties, a method and an event. But I didn't even try to implement it on my own! Instead I opened Reflector and took a peek at the ListView's implementation.

Here is the specification of the IPageableItemContainer interface.

I implemented the MaximumRows getter to return the GridView's PageSize value and had the StartRowIndex return the PageSize multiplied by the PageIndex. For the TotalRowCountAvailable event, I followed the same pattern the other controls use for declaring events. It is a little weird if you haven't seen this syntax before, but it uses less memory and is the pattern the other web controls use so I followed it.

The SetPageProperties method is only mildly more difficult (again with the help of the ListView's implementation as a reference). When the SetPageProperties method is invoked, it is passed the new startRowIndex, the new pageSize (what the DataPager refers to as maxmimumRows) and a boolean value that is true if the control needs to be rebound after the properties are set. Armed with these new values, my SetPageProperties implementation updates the GridView's PageSize and PageIndex properties and raises the PageIndexChanging and PageIndexChanged events along the way.

Override GridView.CreateChildControls

After the interface is implemented, the only thing that remains is figuring out when my new GridView needs to raise the TotalRowCountAvailable event. It turns out the CreateChildControls method is where the ListView control raises this event (again, figured out that using Reflector and taking a look at how the ListView control does it). So I overrode the CreateChildControls method in my new GridView class and added logic that raises the TotalRowCountAvailable event. After the event is raised, I go ahead and make sure the GridView isn't rendering the pager rows. Note: my extended GridView doesn't support the standard GridView paging rows anymore, only the DataPager is supported. This is why I have made sure the pager rows are not visible.

Is This Really All That Useful?

I think it might be. Sometime in the next year, one of the projects I am working on will be converting from ASP.NET 2.0 to 3.5. If I had to guess I would say we have somewhere around 75 or so GridViews and a ton of GridView specific code for viewing, inserting, updating and deleting records that has already been written and tested. Having the GridView implement IPageableItemContainer gives me flexibility and provides me choices when we start the migration project - I can keep all of my GridView code, but completely change the way we present our paging elements.

I am not sure if we will actually go this route, but I figured I would post it - just in case someone else can improve or make use of it.

That's it. Enjoy!

P.S I have another vacation coming up. This time I am on to Augusta to watch the Masters and then some more traveling the following week. So things will probably go quiet around here for the next few weeks.

Building a VS2008 Styled Grid with the GridView Control

2008-04-07T01:37:51Z

I received some positive feedback from my most recent post describing how to create a VS 2008 styled datagrid by using ASP.NET's ListView and DataPager controls. A few people left comments, but I also received a handful of emails asking how to achieve this same look using the GridView. So while this VS style skin was still fresh in my mind I thought I would write up a quick post on it.

Live Demo (IE6, IE7, FF and Opera) | Download

Sorting

To apply the custom sorting icon to the datagrid's header, I used the GridView's RowDataBound event to apply a custom CSS class to the header cell. I then use the background image style to apply the sorting icon to the right of the header text.

Border

Just like in my previous post, I use a series of DIV's to define the datatables frame. I then use CSS to apply background images to these DIVs. Put it all together and you get a sweet looking border.

Pager Style and Settings

The GridView control allows you to customize how the pager controls look by using the PagerSettings element (if you require even more customization you can use the PagerTemplate). It supports a handful of modes and provides other attributes that can be used to change the appearance of the pager row. Here is a table that describes the supported modes of the PagerSettings

Unfortunately, there isn't a NextPreviousFirstLastNumeric mode, because that is actually the one I would use. However, the NumericFirstLast mode is pretty close so that is what I used to configure my grid.

Put it All Together

And here is the markup for my GridView.

That's it. Enjoy!

Building a VS2008 Styled Grid with the ListView and DataPager Controls

2008-04-02T01:46:52Z

I took a break from my recent Silverlight explorations to work on a new datagrid skin. I thought the skin turned out fairly well so I figured I would pass it along just in case anyone else could find a use for it. Like some of my other skins, it makes use of ASP.NET 3.5's ListView, DataPager and LinqDataSource controls.

Here is the run down of the features ...

VS 2008 style border blue border
Vimeo-ish style data pager
Row hover effects (except for IE6)
Sort icons

Live Demo (IE6, IE7, FF, Opera) | Download

VS 2008 Style Border

To create the border, I used a variation of the rounded corners technique Josh outlines here. Below is the markup. It is pretty much just a handful of DIV elements that are used for holding the images. If you are thinking about using this technique, you should check out Josh's site to get the run down. After you finish that you can check out this post to see how it can applied to place a border around a datagrid.

<div class="rounded">
    <div class="top-outer"><div class="top-inner"><div class="top">div>div>div> 
    <div class="mid-outer"><div class="mid-inner"><div class="mid">
        <div class="content">
            
        div>
    div>div>div>
    <div class="bottom-outer"><div class="bottom-inner"><div class="bottom">div>div>div>
div>

And here are the images I have mapped to the above DIV tags. I zoomed in a bit on the images so you could get a better idea of how they make up the border.


	Content Goes Here!

Vimeo-ish Style Data Pager

The data pager is roughly based on the one found on Vimeo's site. Again, nothing too much new here except the mouse over effects. I personally love this style of pager - it looks great AND it doesn't require any images.

Row Hover Effects

Finally, I used the hover pseudo class to make the mouseover row stand out a little bit. To help differentiate it from the other rows I added a blue triangle to the rows first cell, changed the font color from #666 to #000 and applied a light yellow background.

To apply the triangle to the first cell, I used the ListView's ItemTemplate to apply the first class to the first TD of each data row.

Then, I could use this class in combination with the hover pseudo class to get the triangle to appear only when the row is moused over.

That's it. Enjoy!

Sorting with Silverlight 2's DataGrid Control

2008-03-27T00:06:38Z

So I am just starting to get my feet wet with Silverlight 2. I have gained some confidence over the past few days, but on the crawl, walk, run scale it feels like I am still crawling. Beginner or not, I figured I would take a shot at getting Silverlight's DataGrid control to support sorting. Nothing too complicated - just the standard click on the column header to sort the data. Surprisingly, I didn't see much on MSDN talking about how to implement sorting using the DataGrid. I know the documentation is still in the works so I am sure it is coming, but I was a little bit concerned about how to get started. No worries though, it turned out to be a breeze. If you are interested in the details, I have a quick description of what I did just beneath the following screen shot.

Live Demo | Download

Creating Some Data

If you follow my blog, you may have noticed that I am partial to the Northwind data set. This example is no different - my grid is filled with the rows from the customers table. And I cheated a bit and hard-coded my data so I could focus on the sorting interface and not worry about fetching them from the database. I figure I can work on the web service part later.

I added a Customer class to my application that contains a handful of the attributes defined by the customer table. Then I added a static Get method to the Customer class that loads the Customer list if it hasn't been loaded already and returns it. It looks something like this ...

And just as a side note, I didn't actually key in all 91 Add statements. I used a bit of SQL to generate these based on the rows in the customer table. If you give a lot of presentations, demos or just need to create some test data - don't forget about SQL Server. It can be very handy as a crude code generation tool when you need something quick.

Defining the DataGrid's Columns

Like ASP.NET 2.0's GridView, the Silverlight DataGrid can infer what column's need to be displayed based on the properties that are found on the data source. The AutoGenerateColumns property is what controls this behavior. When it is set to true, the DataGrid automatically adds the columns when the ItemSource property is set. To be honest though, when working with the GridView I usually don't set the AutoGenerateColumns property to true. I always want to control the order of the columns, the name (Company Name instead of CompanyName) and often times I do not want to show all of the properties my data source makes available.

To get this type of behavior, you can use the DataGrid's Columns collection to define the order, header text and type for each of the columns you want displayed. Like the GridView, you can create different type of column elements based on the data type you are binding to the column to. Right now it looks like the DataGrid has a DataGridTextBoxColumn for text content, a DataGridCheckBoxColumn for tri-state (Yes/No/Unknown) content and of course a very flexible DataGridTemplateColumn that supports templating.

Below is a sample where I am explicitly defining the contents of the Columns property using the markup.

Adding HyperlinkButton's for the Column Header

If you notice in the above screen shot, I have specified each column's header text using the DataGridTextBoxColumn.Header attribute. Well it turns out the XAML programming model is pretty darn flexible. And I could have used the property element syntax to specify the header title by setting the Header property to a TextBlock like so ...

And if I replace the TextBlock control with a HyperlinkButton (which exposes a Click event) things start coming together for my sorting scenario. Now the XAML for the Customer's ID DataGridTextBoxColumn takes on the following form. Notice I have attached an event handler to the Click event and assigned the Tag attribute to the property I want to sort by.

And because I am using the Tag attribute to let me know what property to sort by I can attach all of the column header Click events to the same event handler. Giving use something like this.

Implementing the Click Event Handler

And now for the easy part. Our Sort_Click event handler will determine what property to sort the Customers collection by from looking at the value of the Tag attribute. So I have setup a switch statement that orders the in-memory Customers list by the property that corresponds to the column header that was clicked. One thing to note is that because the DataGrid control doesn't maintain the sort state, I have to keep track of the last sort property and direction to determine how to order the collection (ASC or DESC) if the same header is clicked twice.

That's it. Enjoy!

A Quick Look at Silverlight 2's DataGrid Control

2008-03-24T00:20:23Z

If you follow my blog, you have probably noticed my obsession with data grids. I haven't actually checked my archives, but if I had to guess I would bet somewhere around 70% of all my posts in some way include ASP.NET's Repeater, GridView or ListView controls. Lately I have been taking a look at Silverlight 2 so naturally I was curious when I saw Scott Morrision's post titled Using the Silverlight DataGrid.

I eagerly read through his post and started working on creating a very basic demo app. I thought a good way to introduce myself to the DataGrid would be to build a page that allows me to set the values of the DataGrid properties so I could watch how it effects how the DataGrid presentation (usually this is what a designer is for, but it wasn't working so well for me. I am sure it's user error.). Anyway, I found this little app useful so I figured I would post the demo and source.

Also, just in case you haven't seen - the Silverlight DataGrid supports column resizing and freezing column/row headers! If you play around with the demo page you can see how this looks.

Live Demo | Download

That's it. Enjoy!

Creating a Custom Skin for Silverlight 2's Button Control

2008-03-19T03:07:48Z

For the past couple of weeks I have been reading about Silverlight 2. I have gone through ScottGu's tutorial, checked out the deep zoom demos (here and here) and even browsed the XAML for some sample control themes. But I haven't actually tried to build anything myself yet. So I thought I would put together a small sample around Silverlight's styling and templating features by creating a skin for the Button control that looks somewhat like the a button renders in IE7 on my Vista box. I know that in a way it's taking a step back (Silverlight's default Button is really pretty sweet looking), but I didn't want to be too overwhelmed for my first sample.

The grid below shows what my Button control looks in each of the 4 states the Button supports. If you look close at the Buttons background, you can see it has that nice glassy look that we used to use images for when working with HTML. Besides that bit of flare, the rest of the Button is primarily made up of one of the most basic Silverlight elements - the Rectangle (one for the background, one for the glassy overlay and another for the focus dashed border). In addition to the Rectangles, my custom Button skin is also configured to animate the Button as the user mouses over, clicks or disables the Button. Below are some screen shots of what my custom Button looks like in a few different states.

Live Demo | Download (Requires VS 2008 Plus Silverlight 2 Beta 1 Tools)

Customizing the Button's Control's Appearance

Before we can start skinning the Button control, we need to understand what the Button's visual customization points are - this way we can tap into them to control how it renders.

Using in-lined styles

Much like ASP.NET controls, the Buttons appearance can be customized by setting the buttons attributes via the markup. So if you want a blue button, just set the Background attribute to the value Blue.

Using style elements

That should feel pretty natural for most UI developers. But of course in-lining styles is hard to maintain and gets messy pretty fast. So instead we could move these inline settings to the Resources collection of the Application to encapsulate these settings as a reusable resource - ala CSS. To do this, I have added a Style element to the Application's nodes Resources collection. Within this Style element, I have set the Background property to Blue as follows ...

App.xaml

Page.xaml

Again, this pattern should feel pretty familiar if you are comfortable with CSS. Instead of in-lining styles, you just point to the resource that knows what style elements you want applied.

Completely replacing a control's visual appearance while still keeping the original behavior

And now to the really cool part. With Silverlight and WPF we can customize just about every aspect of how the Button control renders. ScottGu's tutorial on using control templates has some pretty interesting examples that show the full flexibility of this technique by embedding a fully functional calendar control within the Buttons content (the screen shot below is from his blog).

And along with allowing us to add other shapes and controls to the Button's template, the Button control also supports hooks that allows us to declaratively specify how our button should look as it as it passes through the following four states: {Normal State, MouseOver State, Pressed State, Disabled State} as well as when the button currently has focus. I found the following description from MSDN especially helpful in explaining this.

When you create a new template for a control, you redefine its visual structure and visual behavior. Is some cases, the code of a control might refer to parts of the control's ControlTemplate. For example, the code might call a method on an element that is in the template to perform some functionality. This means you must understand how the template and the code relate to each other. That relationship is described by the control contract, which is an agreement between the logical and visual parts of the control. - MSDN

And I think I get this - the code for the control needs to know a little something about the items in the template for it to function properly. If you want the background color to change from red to blue when the button is hovered over, you need to let the Button know. Or when my control currently has focus, the Button can make sure the dashed rectangle shape is displayed. So after learning about these additional customization points I went to the Button control's Style and Templates page on MSDN where I found a description of the elements and StoryBoard (used for playing animations) the Button control looks for within the ControlTemplate. So if you are creating a template for the Button and want a certain animation played when the Button is hovered over - make sure you include a StoryBoard item within the template with the name MouseOver State. Below is a table that summarizes these additional elements that make up the Button controls public interface.

These additional bits of information are call Template Parts in the documentation. And if you go to the MSDN page for the Button control, you will notice these items are specified as part of the documentation for the Button class. I don't think you would get to far creating a control skin if you don't understand what Template Parts a control defines.

Creating the Shapes that Define the IE Button Skin

And now with some of the background information out of the way, we can start creating our IE button skin.

Step 1: Add the RootElement, background Rectangle and the ContentPresenter

If we look back to the table above, the Button's ControlTemplate looks for two elements within the control's template: one with the name RootElement and the other with the name FocusVisualElement. The RootElement is the element that contains all of the visual elements for our control - so this is where we will start. I have used the Grid control for the layout of my Button and the first child contained within the Grid is a Rectangle (with rounded corners natively supported!) that is filled with a light gray color. After the Rectangle I have added a ContentPresenter that handles rendering the content portion of the Button. I have used markup extension syntax to bind the properties of the control to the ContentPresenter (I am still wrapping my head around exactly what a ContentPresenter is and isn't. When I figure that out well enough so that I can explain it I will no doubt include a post about it).

With just this single rectangle, the button displays like this:

Step 2: Add the glassy-look by overlaying a semi-transparent Rectangle

Next, I added another Rectangle to the template that sits on top of the Background Rectangle. This second Rectangle is responsible for providing us with the nice glassy effect. To achieve this I added a second Rectangle to the markup (unless I am mistaken, Z-Order is the order in which the items are added. Because the Background Rectangle is added first it will have a lower Z-Order). And instead of adding a semi-transparent image, instead I filled this rectangle with a gradient brush - lighter on the top, darker on the bottom.

With the second Rectangle added to the template, the button now displays like this:

Step 3: Add the FocusVisualElement Rectangle

Next, I added another Rectangle to the template that handles applying the dashed shape just inside the Buttons border when the button currently has focus. Again, I added this Rectangle after the first two so it has the highest z-order. When the button has focus, a white dashed border is applied to the control. I didn't find this specifically mentioned in the documentation, but all of the examples for skinning the button had the FocusVisualElement initially set to the Visibility=Collapsed state. I haven't verified this, but I believe when the Button determines it has focus it updates the Visibility value to Visible causing the dashed Rectangle to be displayed.

Step 4: Add a Rectangle that overlays all of the other shapes

Finally, to handle the disabled button state, I have added yet another Rectangle to the very end of the template (giving it the highest z-order). I initially set the Opacity to 0 making it invisible. When the button enters the Disabled State I will use a StoryBoard to update the Opacity value to 1, placing it on top of all of the other Rectangles.

Step 5: Use StoryBoards for animating state transitions

The last step in building our IE skin is attaching the animations that will be run as the button passes through the 4 well-known button states mentioned earlier. Here is a quick summary of what actions need to be taken as the Button passes through these states:

MouseOver State	Change the color of the Background Rectangle to Blue
Pressed State	Change the Background Rectangle to Blue Make the gradient Rectangle slightly see through by setting the Opacity to 0.7 (this will make more of the Blue color show through) Thicken up the border
Normal State	Make the Background Gray,
Disabled State	Render a grayed out Rectangle over the control

If you notice, when the button changes between the various states, I want to update properties on a few of the embedded Rectangles. To achieve this, I have added 4 StoryBoard nodes to my template - a different StoryBoard for each of the Button states. The MouseOver StoryBoard is the simplest one - it runs when the user mouses over the RootElement. This StoryBoard uses the ColorAnimation object to change the Color property of the Brush that fills the Background Rectangle from gray to blue. Here is the markup for this StoryBoard ...

A few things to notice:

The value of the StoryBoard's Key attribute is MouseOver State. The Button control looks for this item by name, so you will need to enter it just as I have above
The Duration of my animation is set to 0:0:0 - meaning this animation happens instantly. If you wanted it to slowly turn blue, you could set this to a small value. Something like 0:0:0.5 would cause it to turn to from gray to blue in 1/2 a second.
The ColorAnimation is pointing to the Target named Brush. If you look back to step 1, this is the name of the Brush that fills the Background Rectangle

The rest of the animations follow a similar pattern. The TargetName attribute points to the item I want to animate. And I animate the objects by changing one of their property values (i.e. Opacity, StrokeThickness, Color).

And finally, after all of this work is done, I have moved my new skin to the Resources section of the Application XAML file and used the Style setting to point my buttons towards their lovely new IE skin ...

And when all of this runs - it looks something like this.

Finally, I collapsed all of the elements and resources that make up my custom style so you could get a feel for what it looks like when it is all put together. The complete skin comes to a about 150 lines of markup. Really not too bad considering the flexibility it provides. I haven't worked with Silverlight too long, but I am already getting the feeling that control skinning is going to be one of my favorite topics.

That's it. Enjoy!