Thomas Williams

Adding a sort direction image to a GridView's header - ASP.NET 2.0

The ASP.NET 2.0 GridView control has a simple property called "AllowSorting" which makes it easy for end-users to click a column header (rendered as a link when the "AllowSorting" property is set to "True") and sort to their heart's content - a second click on a sorted column even sorts in descending order. However, I reckon the built-in functionality is missing an image or glyph or something to show that the column has been sorted.

I notice there's a few articles on adding a sort direction image to a header cell in an ASP.NET 2.0 GridView, but I wanted to write about a simple method I came up with that uses the Webdings font (and no images...OK, so the title of this post is a little misleading). This technique works well for me now because a) its impact on the page's code is minimal and b) it uses a font for now, but eventually it could use an image.

In the GridView's "Sorting" event, add the code:

        AppendSortOrderImageToGridHeader(e.SortDirection, e.SortExpression, [gridname])

And here's the code for "AppendSortOrderImageToGridHeader", which I have put in a class in the "App_Code" folder:

        ''' <summary>
        ''' Append a sort indicator (in this case, a symbol in Webdings font) based on
        ''' the sort expression and direction that are passed to the correct column header
        ''' in the passed grid. 
        ''' </summary>
        ''' <param name="sortDir">Sort direction - either ascending (<c>SortDirection.Ascending</c>) or descending (<c>SortDirection.Descending</c>).</param>
        ''' <param name="sortExpr">Sort expression which is a database field.</param>
        ''' <param name="grid">ASP.NET GridView control.</param>
        ''' <remarks><para>Called from a grid's "Sorting" event, e.g. <code>AppendSortOrderImageToGridHeader(e.SortDirection, e.SortExpression, [gridname])</code>.</para></remarks>
        Public Shared Sub AppendSortOrderImageToGridHeader(ByVal sortDir As System.Web.UI.WebControls.SortDirection, _
                ByVal sortExpr As String, _
                ByRef grid As System.Web.UI.WebControls.GridView)

            ' looping variable 
            Dim i As Integer
            ' did we find the column header that's being sorted?
            Dim foundColumnIndex As Integer = -1

            ' constants for sort orders
            Const SORT_ASC As String = "<span style='font-family: Webdings; '> 5</span>"
            Const SORT_DESC As String = "<span style='font-family: Webdings; '> 6</span>"

            ' get which column we're sorting on
            For i = 0 To grid.Columns.Count - 1
                ' remove the current sort
                grid.Columns(i).HeaderText = grid.Columns(i).HeaderText.Replace(SORT_ASC, String.Empty)
                grid.Columns(i).HeaderText = grid.Columns(i).HeaderText.Replace(SORT_DESC, String.Empty)
                ' if the sort expression of this column matches the passed sort expression, 
                ' keep the column number and mark that we've found a match for further processing
                If sortExpr = grid.Columns(i).SortExpression Then
                    ' store the column number, but we need to keep going through the loop
                    ' to remove all the previous sorts
                    foundColumnIndex = i
                End If
            Next

            ' if we found the sort column, append the sort direction 
            If foundColumnIndex > -1 Then
                ' append either ascending or descending string
                If sortdir = SortDirection.Ascending Then
                    grid.Columns(foundColumnIndex).HeaderText &= SORT_ASC
                Else
                    grid.Columns(foundColumnIndex).HeaderText &= SORT_DESC
                End If

            End If

        End Sub

The code in "AppendSortOrderImageToGridHeader" loops through all the columns headers, once, to remove any previous sort "image" and to also find the column that is being sorted. Then it adds either an ascending or descending Webdings character to the column that's being sorted.

I'm only two months into the project, and still learning ASP.NET, but perhaps as time goes on I may switch to the ASP Alliance article which extends the GridView to add a SortDescImageUrl and SortAscImageUrl property.

As usual I make no guarantee that this code is going to work outside my alternate reality...but, I hope you find it useful!