Skip Navigation LinksHome > Categories > Code from a Category

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



User Name: codelecturer
Name: Mike Chauhan
Contact Me: www.datawebcoder.com/ContactUs.aspx
Home Page: www.datawebcoder.com
6 years of total IT experience including programming, application development, System Maintenance . 3 years of Experienced and expertise in .Net Framework VB, Visual Basic.Net, ASP.Net 2.0, 3.5 and AD... [More]
Viewed Times: 4967
Add Date: 09/10/2012
In this article we will see how we to use GridView's New Sorting Styles in ASP.NET 4.0
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:
1. SortedAscendingHeaderStyle,
2. SortedAscendingCellStyle,
3. SortedDescendingHeaderStyle, and
4. 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.

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:



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.



With this CSS defined (either in an external .css file or within the 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:



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.

Happy Programming!

Post a Comment

Name: (Optional)
Email: (Optional, you can get an email if somebody replys your comments)*
Email me if somebody respons my comment below:
Details**:
Enter Text
as Below:
(case insensitive, if hard to read, click the "get a new one" button)
 
    
* Your email address will not be shared with any third parties for any reason.
** Maximum 1000 charactors.