When you think ASP, think...
Recent Articles
All Articles
ASP.NET Articles
ASPFAQs.com
Message Board
Related Web Technologies
User Tips!
Coding Tips
Search

Sections:
Book Reviews
Sample Chapters
Commonly Asked Message Board Questions
JavaScript Tutorials
MSDN Communities Hub
Official Docs
Security
Stump the SQL Guru!
Web Hosts
XML
Information:
Advertise
Feedback
Author an Article

ASP ASP.NET ASP FAQs Message Board Feedback
 
Print this Page!
Published: Wednesday, February 3, 2010

A Look at the GridView's New Sorting Styles in ASP.NET 4.0

By Scott Mitchell


Introduction


Like every Web control in the ASP.NET toolbox, the GridView includes a variety of style-related properties, including CssClass, Font, ForeColor, BackColor, Width, Height, and so on. The GridView also includes style properties that apply to certain classes of rows in the grid, such as RowStyle, AlternatingRowStyle, HeaderStyle, and PagerStyle. Each of these meta-style properties offer the standard style properties (CssClass, Font, etc.) as subproperties.

In ASP.NET 4.0, Microsoft added four new style properties to the GridView control: SortedAscendingHeaderStyle, SortedAscendingCellStyle, SortedDescendingHeaderStyle, and SortedDescendingCellStyle. These four properties are meta-style properties like RowStyle and HeaderStyle, but apply to column of cells rather than a row. These properties only apply when the GridView is sorted - if the grid's data is sorted in ascending order then the SortedAscendingHeaderStyle and SortedAscendingCellStyle properties define the styles for the column the data is sorted by. The SortedDescendingHeaderStyle and SortedDescendingCellStyle properties apply to the sorted column when the results are sorted in descending order.

These four new properties make it easier to customize the appearance of the column by which the data is sorted. Using these properties along with a touch of Cascading Style Sheets (CSS) it is possible to add up and down arrows to the sorted column's header to indicate whether the data is sorted in ascending or descending order. Likewise, these properties can be used to shade the sorted column or make its text bold. This article shows how to use these four new properties to style the sorted column. Read on to learn more!

- continued -

ASP.NET 4.0's Status and Release Date
At the time of this writing, ASP.NET 4.0 is currently available as beta software. You can download the .NET Framework 4.0 and Visual Studio 2010 Beta 2 or wait until the software is officially released. Currently, ASP.NET 4.0 is scheduled to be released in April 2010.

GridView Sorting Overview


By default, the GridView renders a header row that displays the name of each field as text. To enable sorting, set the GridView's AllowSorting. This prompts the GridView to render its header row using LinkButton controls that, when clicked, cause a postback and initiate the sorting workflow. If the GridView is bound to a data source control then (typically) that's all there is to it! You don't have to write a line of code to handle the sorting logic as it's automatically handled for you by the data source control and GridView. (If you are programmatically binding data to the GridView in lieu of using a data source control then you'll need to create an event handler for the GridView's Sorting event that retrieves the data sorted in the order requested by the end user.)

From the end user's perspective, clicking one of the links in the header row sorts the grid's data by that column in ascending order. Clicking the same link again sorts the data in descending order. Unfortunately, the GridView does not provide any sort of visual feedback as to what column the grid is sorted by and whether the data is sorted in ascending or descending order. Prior to ASP.NET 4.0, the only to implement such feedback was to write a bit of code. A previous article of mine, Extending the GridView to Include Sort Arrows, showed how to extend the GridView control to add two new properties named SortAscendingStyle and SortDescendingStyle, which could be used with a bit of CSS to add arrows to the sorted column (as well as shade the column, make its text bold, or set any other style-related properties).

While the custom GridView control created in Extending the GridView to Include Sort Arrows is still useful in pre-ASP.NET 4.0 applications, it has been deprecated with the new properties added to the GridView in ASP.NET 4.0.

The New Sorting-Related Style Properties


The GridView in ASP.NET 4.0 includes four new style properties that allow page developers to define the visual appearance of the column the grid's data is sorted by:
  • SortedAscendingHeaderStyle - when the GridView's data is sorted in ascending order, this property defines the style for the header cell of the sorted column.
  • SortedAscendingCellStyle - when the GridView's data is sorted in ascending order, this property defines the style for the data cells of the sorted column.
  • SortedDescendingHeaderStyle - when the GridView's data is sorted in descending order, this property defines the style for the header cell of the sorted column.
  • SortedDescendingCellStyle - when the GridView's data is sorted in descending order, this property defines the style for the data cells of the sorted column.
These properties make it incredibly easy to define subtle (or even drastic) visual differences between "regular" columns and the sorted column. For example, to highlight the data rows in the sorted column (whether sorted in ascending or descending order), simply set the SortedAscendingCellStyle and SortedDescendingCellStyle properties' BackColors to Yellow like so:

<asp:GridView ID="..." runat="server" AutoGenerateColumns="False" AllowSorting="true"
      ...
      SortedAscendingCellStyle-BackColor="Yellow"
      SortedDescendingCellStyle-BackColor="Yellow"
>
   ...
</asp:GridView>

The following screen shot shows a GridView that lists information from the Northwind database's Products table with the data sorted by Category. Note how the data rows in the Category field are highlighted.

The data rows of the sorted column is highlighted yellow.

To highlight the data rows in the sorted column differently depending on whether the data was sorted in ascending or descending order, simply set the SortedDescendingCellStyle property's BackColor to a different value than the SortedAscendingCellStyle property's.

Adding a Sort Arrow to the Sorted Column's Header Cell


Using a bit of CSS and the SortedAscendingHeaderStyle and SortedDescendingHeaderStyle properties it is possible to add up and down arrows to the sorted column's header cell to indicate whether the data is sorted in ascending or descending order. First, you'll need some up and down images. The demo available for download at the end of this article includes two such images, although you can certainly make them yourself or find comparable ones online. Next, you need to create two CSS classes for the ascending and descending header cells, such as sortasc-header and sortdesc-header. These classes need to specify the URL to the up and down arrow images. Also, we need to include a CSS rule that adds padding to the right of the links in the header row so that the up and down arrows are not covered by the header cell's text.

.sortasc-header A
{
   background:url(URL to up arrow image) right center no-repeat;
}

.sortdesc-header A
{
   background:url(URL to down arrow image) right center no-repeat;
}

TH A
{
   padding-right: 20px;
}

With this CSS defined (either in an external .css file or within the <head> element) all that remains is configuring the GridView's SortedAscendingHeaderStyle and SortedDescendingHeaderStyle to use the sortasc-header and sortdesc-header CSS classes, respectively. This is accomplished by setting these properties' CssClass properties accordingly:

<asp:GridView ID="..." runat="server" AutoGenerateColumns="False" AllowSorting="true"
      ...
      SortedAscendingHeaderStyle-CssClass="sortasc-header"
      SortedDescendingHeaderStyle-CssClass="sortdesc-header"

      SortedAscendingCellStyle-BackColor="Yellow"
      SortedDescendingCellStyle-BackColor="Yellow">
   ...
</asp:GridView>

With those properties set, the sorted column's header now shows an up or down arrow depending on whether the data is sorted in ascending or descending order (in addition to highlighting the data rows).

The grid is sorted by category in ascending order.

The grid is sorted by category in descending order.

Improving the Appearance of the GridView


While the preceding examples demonstrated the GridView's four new sorting-related style properties, they did so using very ugly GridViews. Don't let these ugly demos persuade you into thinking that the GridView cannot be made to look beautiful. With a bit of design skills and artistic flair, it is possible to create aesthetic GridViews. I am certainly no designer, but with websites like Color Scheme Designer and free icon sets like websites like FAMFAMFAM, even a crusty old programmer like myself can make halfway decent GridViews. (The demo available for download at the end of this article includes one such effort from yours truly.)

Another great resource for creating snazzy GridViews is Matt Berseth's blog. Matt has an entire section dedicated to enhancing the GridView control, which include several entries that share CSS rules and code (where applicable) to style the GridView. The demo available for download at the end of this article includes one of Matt's demos - Building a VS2008 Styled Grid with the GridView Control - but updated to use the new sorting-related style properties in ASP.NET 4.0.

The following screen shot shows the same data displayed in earlier screen shots in this article, but using Matt's CSS classes. The data is sorted by the Category field in ascending order. This sort order is conveyed to the user by the down arrow in the Category header cell and by the highlighted data cells.

A more visually-pleasing GridView.

Conclusion


Since it's release, the GridView control has included a plethora of style-related properties. Page developers could specify CSS classes, fonts, colors, borders, and other display-related settings for both the entire GridView and for specific parts of the GridView, such as rows, alternating rows, header rows, and so forth. Despite this myriad of properties, the GridView did not initially include any properties to specify the display of the sorted column (if any). To customize the sorted column's appearance, developer's needed to write code.

The good news is that this shortcoming has been addressed with ASP.NET 4.0. The GridView in ASP.NET 4.0 includes four new style-related properties for customizing the appearance of the sorted column's header and data cells: SortedAscendingHeaderStyle, SortedAscendingCellStyle, SortedDescendingHeaderStyle, and SortedDescendingCellStyle. This article showed how to use these properties to add up and down arrows to the header cell for the sorted column, depending on whether the data is sorted in ascending or descending order. We also saw how to highlight the data cells of the sorted row. The code and screen shots presented in this article are from the demo available for download at the end of this article.

Happy Programming!

  • By Scott Mitchell


    Attachments:


  • Download the code used in this article

    Further Readings:


  • Extending the GridView to Include Sort Arrows
  • Color Scheme Designer
  • GridView Posts from Matt Berseth's Blog


  • ASP.NET [1.x] [2.0] | ASPMessageboard.com | ASPFAQs.com | Advertise | Feedback | Author an Article