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

Introduction

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.

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:

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 " />
</asp:GridView>

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:

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

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

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

.SortedDescendingHeaderStyle
{
  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.

Downloads

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