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!
| 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.
SortedAscendingCellStyle and SortedDescendingCellStyle properties' BackColors to Yellow like so:
<asp:GridView ID="..." runat="server" AutoGenerateColumns="False" AllowSorting="true" |
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.
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 |
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" |
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).
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.
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!
Attachments:
Further Readings:
