Sorting Indicators on ASP.NET GridView

I was recently trying to sort an ASP.NET gridview and realized it was no easy task to show the column that the grid was sorted by.  I don’t know if 4.0 or 4.5 .NET has this capability, but it seems like the GridView control should have parameters that you could assign an ascending/descending icons to.  Unfortunately, it doesn’t.

ASP.NET GridView Sort Indicators

In a few lines of code I was able to add an image next to the column header like the example above (see that little triangle?).  I was amazed on what I found online when researching this.  Many developers have a tendency of over-complicating things, so my code below is as bare-bones as possible.

VB.NET (Code-Behind on GridView RowCreated Event):

If e.Row.RowType = DataControlRowType.Header Then
  For Each field As DataControlField In gv1.Columns
    If field.SortExpression = gv1.SortExpression Then
      Dim sortImage As New Image()
      If gv1.SortDirection.ToString = "Ascending" Then
        sortImage.ImageUrl = "images/asc.png"
      Else
        sortImage.ImageUrl = "images/desc.png"
      End If
      sortImage.AlternateText = "Sorted " & gv1.SortDirection.ToString
      e.Row.Cells(gv1.Columns.IndexOf(field)).Controls.Add(sortImage)
    End If
  Next
End If

Line-By-Line:

It’s assumed you already have a GridView databound to an object datasource and you have sorting enabled. This code-behind should be under the gridview (gv1) RowCreated event.

  • 1 – Checks if the row being generated is a header row (otherwise, the row is ignored)
  • 2 – Sets up a loop to go through each cell, or field, in the row
  • 3 – Checks if the sort expression of the GridView matches the current field/column
  • If the sort expression matched – enter lines 4 – 11
  • 4 – Creates a new image object called ‘sortImage’
  • 5 – 9 – Tests the GridView’s current sort direction.  If it’s ‘Ascending’, assign an ImageUrl (you need ascending/descending icons – mine are in my ‘/images’ folder).  Otherwise, assign the descending image to the ImageUrl
  • 10 – Sets ALT text to the image so we keep W3C compliance – Mine is a concatenated string that would be something like ‘Sorted Descending’
  • 11 – Adds the image to the header cell

I hope this helps someone out there.  I know there are many ways to do this, but this seemed to be the most light-weight scenario I could come up with without using a third-party solution.

7 thoughts on “Sorting Indicators on ASP.NET GridView”

  1. Fantastic tip. I was about to write bunch of extra code to make this happen. Can you post the arrows that you used?
    Thanks,
    Don

  2. Very simple solution. I added an extra test for empty columns (edit or delete command) since an arrow was added at pageload.

    If Not String.IsNullOrEmpty(field.SortExpression) AndAlso field.SortExpression = GridView1.SortExpression Then

    1. Good idea Pierre – I think the GridView I originally used this on used a HyperLink field and I didn’t think about non-sortable columns. Thanks for the feedback!

  3. Hi Jonathan / Pierre,

    First short and to the point code. I applied it in my code but unfortunately the images are not visible as I sort.

    Initially, I was seeing the images in the Navigation column but after adding the code from Pierre, I was able to revert to original header text to “Navigation”.

    Can you please share what could be the reason of not seeing the icons.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>