Click here to Skip to main content
11,649,294 members (78,766 online)
Click here to Skip to main content

Improving the GridView Sorting Capabilities with Google Analytics Features

, 12 May 2008 CPOL 44.1K 36
Rate this:
Please Sign up or sign in to vote.
Improve the column sorting of the ASP.NET GridView to give the user a better visual experience. Highlight the column selected for sorting and include an image to indicate whether the sorting order is ascending or descending.

Author's website: http://www.sqlnetframework.com

Introduction - Google Analytics ASP.NET Grid Column Sorting

In the following article, you will learn how you can improve the column sorting of the ASP.NET GridViewto give the user a better visual experience. The Google Analytics ASP.NET Grid column sorting will indicate the sorting order direction (ascending or descending) and will highlight the GridViewcolumn used to make the sorting.

Google Analytics ASP.NET Grid column sorting

Google Analytics ASP.NET Grid Serie

The Google Analytics ASP.NET Grid Serie will show you how to create an ASP.NET Grid that recreates the appearance and behavior of the Grid displayed in the Google Analytics web site.

  • Part 1: Extending ASP.NET DataPager: Creating a Google Analytics Data Pager
  • Part 2: Google Analytics ASP.NET Grid Counter: Enumerate the row items in an ASP.NET Grid
  • Part 3: Google Analytics ASP.NET Grid Sort Column: Enhance your GridViewwith a sorting order indicator (ascending, descending) and highlight the GridViewcolumn used for sorting

Improving ASP.NET GridView Sorting Capabilities

Many of us have used the ASP.NET GridViewwebcontrol to display information. One of the features most used of the GridViewwebcontrol is GridViewsorting. The GridViewsorting allows us to sort the information in the GridViewusing the column name displayed at the top of the GridView.

GridView column sort

Default GridView Sorting Capability

If you are working with the GridViewwebcontrol and you want to enable the GridViewsorting capability, you need to set to truethe GridView’s AllowSortingproperty.

GridView allow sorting

Now that the GridViewsorting feature is enabled, the GridViewwebcontrol will display a link for each column header. When the user clicks the link in the column header, the information displayed in the GridViewwill be sorted using the SortExpressiondefined in the GridViewcolumn.

GridView sort expression

Default GridView Sorting Direction

The first time you click a column header, the GridViewsorting direction is ascending (A, B, C, etc.), the second time you click the same column header the GridViewsorting direction changes to descending (C, B, A, etc.).

Implementing GridView Sorting like in Google Analytics

The Google Analytics Grid has features that seem interesting to be implemented in any ASP.NET project using the GridViewto display and sort information. The first GridViewsorting feature that we will implement will be to display an image to notify the user the GridViewsorting direction: ascending or descending. The second feature will be to highlight the header and each row of the selected GridViewcolumn to make it easy for the user to know which GridViewcolumn was used for sorting.

GridView sort order arrow

Using an Image to Display the GridView Sorting Direction

When the user clicks a GridViewcolumn header for sorting, an image will be displayed in the GridViewcolumn header to notify the user the GridViewsorting direction. To display the image, we are going to check whether the current column header was clicked for sorting, if so, we are going to check the GridViewsorting direction: ascending or descending. Depending on whether the GridViewcolumn header was clicked or not, we are going to select the CSS-style to apply.

GridView sort order arrow

Highlighting the GridView Sorting Column

When the user clicks a GridViewcolumn header for sorting, all the GridViewcolumns will be highlighted, including the column header and the rows. To highlight a row item, we will check whether the row item is under the GridViewcolumn header clicked for sorting.

GridView sorted column

How to Use the New GridView Sorting Capabilities in my ASP.NET Web Projects?

You only need to add a GoogleAnalyticsGridViewColumnSortFieldwithin the Columns collection of the GridViewwebcontrol.

GridView colum sort field

The SortedColumnCssClassand ColumnCssClassproperties specifies the CSS-style to be applied to a GridViewcolumn when the GridViewcolumn is clicked for sorting and when the GridViewcolumn is at a normal state without being selected, respectively. You need to specify a value at least to the SortedColumnCssClassproperty. Finally you need to create a style sheet to create the style items used for the rendering of the GridView.

GridView colum sort css properties

Style Used for the Sorted GridView Column

If you assign the value "googleAnalyticsSortedColumn" to the SortedColumnCssClassproperty of the GoogleAnalyticsGridViewColumnSortFieldclass, then you need to create the style items displayed below:

GridView sorted colum header css

Style Used for the Normal GridView Column

If you assign the value "googleAnalyticsColumn" to the ColumnCssClassproperty of the GoogleAnalyticsGridViewColumnSortFieldclass, then you need to create the style items displayed below:

GridView colum header css

Conclusion

Now with just including the GoogleAnalyticsGridViewColumnSortFielditem to the Columns collection of the GridViewwebcontrol, you can have a better sorting functionality for the GridView. To modify the GridViewappearance, you only need to edit the CSS-style sheet file associated with the GridViewwebcontrol. Download the Google Analytics ASP.NET Grid Sort Column code to see how easy is to use the new GridViewsorting features.

Google Analytics ASP.NET Grid column sorting

History

  • 12th May, 2008: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Luis Ramirez
Software Developer (Senior) www.sqlnetframework.com
Mexico Mexico
Luis Ramirez is creator and owner of ADO.NET Accelerator. You can use the FREE ADO.NET Accelerator version to reduce more than 50% ADO.NET code from your data access layer. Luis Ramirez is a Microsoft Certified Professional specialized in .NET development. If you want to contact him to work in your projects or for any other inquiry that you have write him to lramirez [at] sqlnetframework [dot] com.

You may also be interested in...

Comments and Discussions

 
QuestionWhat is the A for in .googleAnalyticsSortedColumnHeaderDescending A Pin
SeaWater31-Jul-08 3:42
memberSeaWater31-Jul-08 3:42 
AnswerRe: What is the A for in .googleAnalyticsSortedColumnHeaderDescending A Pin
Luis Ramirez31-Jul-08 6:54
memberLuis Ramirez31-Jul-08 6:54 
GeneralGood Pin
srinath g nath12-May-08 18:49
membersrinath g nath12-May-08 18:49 
GeneralRe: Good Pin
Luis Ramirez13-May-08 7:44
memberLuis Ramirez13-May-08 7:44 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150804.4 | Last Updated 12 May 2008
Article Copyright 2008 by Luis Ramirez
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid