Look Ma: No Code - Using Sorted Styles in ASP.NET 4

The cool thing about working with beta technology such as Visual Studio 2010 and ASP.NET 4 is that you discover something new every day. Today I found the Sorted Styles that enable you to define the looks of sorted columns and headers in an ASP.NET GridView control.


It's quite common to change the look and feel of a sorted column in a GridView. Maybe you want to display a "sorted up" or "sorted down" image next to the header text to indicate the direction the GridView is currently sorted in. Or maybe you want to highlight the entire column so it's easy to see on which column the GridView is sorted. Figure 1 show a possible implementation of this. The first grid is a GridView with unsorted data (the fact that it displays the IDs in ascending order is purely coincidence). The second grid shows the data sorted on the name. Notice the black arrow next to the header text. Also, the entire column has a different background color. The final grid shows the data sorted by name in reversed order. The image has changed to indicate the data is now sorted in descending order.

Three different GridViews showing Sorted Styles

In previous versions of ASP.NET this was non-trivial. You needed to write code to handle the Sorted event, find a reference to the correct header and then use its Attributes collection or CssClass property to dynamically change the header. Changing the looks of the individual cells would require even more work.

Now with ASP.NET 4, this is super easy as the GridView gives you access to the following four styles:

SortedAscendingCellStyle Enables you to set the style for a GridView column when the colomn is sorted in ascending order.
SortedAscendingHeaderStyle Enables you to set the style for a GridView column heading when the colomn is sorted in ascending order.
SortedDescendingCellStyle Enables you to set the style for a GridView column when the colomn is sorted in descending order.
SortedDescendingHeaderStyle Enables you to set the style for a GridView column heading when the colomn is sorted in descending order.

Each of these styles inherits TableItemStyle which gives you access to a host of style related properties such as BackColor, ForeColor, Font and so on. However, I prefer to use the CssClass of these styles instead so I can handle styling in my CSS files. With ASP.NET 4 you can create the look of a GridView shown in Figure 1 with the following code:

<asp:GridView ID="GridView1" runat="server" AllowSorting="True" CellPadding="4" 
      DataKeyNames="Id" DataSourceID="SqlDataSource1">
  <SortedAscendingCellStyle CssClass="SortedAscendingCellStyle" />
  <SortedAscendingHeaderStyle CssClass="SortedAscendingHeaderStyle" />
  <SortedDescendingCellStyle CssClass="SortedDescendingCellStyle" />
  <SortedDescendingHeaderStyle CssClass="SortedDescendingHeaderStyle " />

Here I am simply assigning CSS classes (as opposed to assigning in-line style information through the Style object directly) to these elements, giving me full freedom with regards to how they are styled. Adding the images and the alternate background color is now a snap:

  text-align: left;
  background-repeat: no-repeat;
  background-position: 0 8px;

.SortedAscendingHeaderStyle, .SortedDescendingHeaderStyle
  padding-left: 20px;
  background-color: #FFFFCC;

  background-image: url(../Images/SortAsc.png);

  background-image: url(../Images/SortDesc.png);

.SortedAscendingCellStyle, .SortedDescendingCellStyle
  background-color: #FFFFCC;

Assigning the Ascending and Descending images is now as easy as setting the background-image property for the corresponding style. Likewise, changing the background color for the header, or for the entire column is done by setting a single property. Simple, yet elegant.

At the time of writing, not a whole lot has been written about the new sorted styles. Interesting to see how that will change over time.


You can download a sample application here (requires VS 2010 or VWD 2010)

Where to Next?

Wonder where to go next? You can post a comment on this article.

Doc ID 511
Full URL https://imar.spaanjaars.com/511/look-ma-no-code-using-sorted-styles-in-aspnet-4
Short cut https://imar.spaanjaars.com/511/
Written by Imar Spaanjaars
Date Posted 12/08/2009 21:23


Talk Back! Comment on Imar.Spaanjaars.Com

I am interested in what you have to say about this article. Feel free to post any comments, remarks or questions you may have about this article. The Talk Back feature is not meant for technical questions that are not directly related to this article. So, a post like "Hey, can you tell me how I can upload files to a MySQL database in PHP?" is likely to be removed. Also spam and unrealistic job offers will be deleted immediately.

When you post a comment, you have to provide your name and the comment. Your e-mail address is optional and you only need to provide it if you want me to contact you. It will not be displayed along with your comment. I got sick and tired of the comment spam I was receiving, so I have protected this page with a simple calculation exercise. This means that if you want to leave a comment, you'll need to complete the calculation before you hit the Post Comment button.

If you want to object to a comment made by another visitor, be sure to contact me and I'll look into it ASAP. Don't forget to mention the page link, or the Doc ID of the document.

(Plain text only; no HTML or code that looks like HTML or XML. In other words, don't use < and >. Also no links allowed.