Display an arrow in the header of GridView
Visits: 38057
Monday, April 10, 2006



Framework .NET 2.0

To sort a GridView is only necessary set the AllowSorting property to true. Simple and fast but often we can't understand which field is sorted or in which direction (asc/desc). To solve that problem, let's create 2 images with an arrow drawed inside (up/down) and catch the RowCreated event of the GridView:

protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.Header)
    {
        foreach (TableCell tc in e.Row.Cells)
        {
            if (tc.HasControls())
            {
                // search for the header link
                LinkButton lnk = (LinkButton)tc.Controls[0];
                if (lnk != null)
                {
                    // inizialize a new image
                    System.Web.UI.WebControls.Image img = new System.Web.UI.WebControls.Image();
                    // setting the dynamically URL of the image
                    img.ImageUrl = "~/img/ico_" + (GridView1.SortDirection == SortDirection.Ascending ? "asc" : "desc") + ".gif";
                    // checking if the header link is the user's choice
                    if (GridView1.SortExpression == lnk.CommandArgument)
                    {
                        // adding a space and the image to the header link
                        tc.Controls.Add(new LiteralControl(" "));
                        tc.Controls.Add(img);
                    }
                }
            }
        }
    }
}


Make a loop through the GridView Header to search a LinkButton (the Framework creates it only if the SortExpression property is set). Then, if the found LinkButton is the sorted field, then show the image to the output.

Comments


Excellent work - exactly what I was looking for! One note - adding the space before the image may result in odd-looking wrapping (depending on column widths). I suggest removing that line and instead adding img.CssClass = "sortarrow"; And specifying in the stylesheet, .sortarrow { margin-left: 5px; } Always a good idea to handle the formatting using CSS. Thanks again!
Written by Neven Mrgan - Thursday, May 25, 2006 at 6:58 PM

Thank's ! I was just lokking to do something like this. Great.
Written by Legoman - Thursday, November 09, 2006 at 1:55 PM

really good article!!!!!
Written by Myro Vus - Wednesday, January 31, 2007 at 3:49 PM

Thank you very much.
Written by Jack - Tuesday, July 24, 2007 at 8:13 AM

Great post, this is a much cleaner solution than others I've seen. Thanks heaps!!!
Written by Chad - Tuesday, August 14, 2007 at 3:30 PM

Very informative post! Keep up the good work.
Written by James - Wednesday, August 22, 2007 at 5:07 PM

Thank you very much. But when I implemented this code, the image appeared twice for both ascending or descending order for each column heading. Any reasons?
Written by Arun - Monday, October 22, 2007 at 11:38 PM

I am not sure why this is not working, but I have added the code and I am not seeing any arrows.
Written by Sgt13Echo - Friday, June 13, 2008 at 11:55 PM

I was able to display the arrows but when I sorted the row the image did not change. During debugging the SortDirection was the same...ascending. I have 3 columns and they all have the sorting ability. Could that be the problem. Also I had to take out the 'if(gridview.SortExpression == lnk.CommandArgument) line because for some reason my gridview.SortExpression is returning emply. Does anyone know what could cause this? Thanks
Written by Tuck - Monday, June 23, 2008 at 5:19 PM

I'm sorry, but I don't see the buttons either. It seems that the if (GridView1.SortExpression == lnk.CommandArgument) is not true on any occasion. Why is that? Bye Hinke
Written by Hinke - Wednesday, August 27, 2008 at 10:43 AM

good info, many thanks!
Written by Merwan - Friday, December 05, 2008 at 4:36 PM

excelent, and works on gridview for paging too
Written by Zdenek - Friday, January 16, 2009 at 6:10 PM

Great work! Thk!!!
Written by Felipe - Thursday, March 26, 2009 at 7:20 PM

thankz alot.. ur code is really simple to understand.. =)
Written by davion - Tuesday, July 14, 2009 at 10:59 AM

Works really fine! Great work! Saved me a lot of time and gave me a much better solution! Thnak you so much!
Written by Hugo Martins - Monday, July 27, 2009 at 12:15 PM

Thank you for your effort and great solutions! This was exactly what I needed!
Written by Nina - Thursday, October 08, 2009 at 4:10 PM



Post new comment

Author:  
E-mail:
Site:
Remember my information:
Message:
Code verification: Password verification

 

-- Comment preview --


Versione italiana Versione italiana

CATEGORIES

Ajax (2)
ASP.NET (11)
C# Code (4)
IIS (1)
Silverlight (1)
Sql Server 2000 (1)
Varie (4)
Visual Studio (4)

ARCHIVE

April 2009 (1)
May 2008 (1)
April 2008 (1)
January 2008 (4)
December 2007 (1)
May 2007 (1)
February 2007 (1)
December 2006 (3)
October 2006 (1)
September 2006 (3)
August 2006 (1)
June 2006 (1)

ABOUT ME [curriculum]

Curriculum ZofM

CREDITS