Display an arrow in the header of GridView |
Visits: 16941 |
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.
|
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