Display an arrow in the header of GridView |
Visite: 20452 |
lunedì 10 aprile 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!
|
| Scritto da Neven Mrgan - giovedì 25 maggio 2006 alle ore 18.58 |
|
Thank's ! I was just lokking to do something like this. Great.
|
| Scritto da Legoman - giovedì 9 novembre 2006 alle ore 13.55 |
|
really good article!!!!!
|
| Scritto da Myro Vus - mercoledì 31 gennaio 2007 alle ore 15.49 |
|
Thank you very much.
|
| Scritto da Jack - martedì 24 luglio 2007 alle ore 8.13 |
|
Great post, this is a much cleaner solution than others I've seen. Thanks heaps!!!
|
| Scritto da Chad - martedì 14 agosto 2007 alle ore 15.30 |
|
Very informative post! Keep up the good work.
|
| Scritto da James - mercoledì 22 agosto 2007 alle ore 17.07 |
|
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?
|
| Scritto da Arun - lunedì 22 ottobre 2007 alle ore 23.38 |
|
I am not sure why this is not working, but I have added the code and I am not seeing any arrows.
|
| Scritto da Sgt13Echo - venerdì 13 giugno 2008 alle ore 23.55 |
|
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
|
| Scritto da Tuck - lunedì 23 giugno 2008 alle ore 17.19 |
|
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
|
| Scritto da Hinke - mercoledì 27 agosto 2008 alle ore 10.43 |
|
good info, many thanks!
|
| Scritto da Merwan - venerdì 5 dicembre 2008 alle ore 16.36 |
|
excelent, and works on gridview for paging too
|
| Scritto da Zdenek - venerdì 16 gennaio 2009 alle ore 18.10 |
|
Great work!
Thk!!!
|
| Scritto da Felipe - giovedì 26 marzo 2009 alle ore 19.20 |
|
thankz alot.. ur code is really simple to understand.. =)
|
| Scritto da davion - martedì 14 luglio 2009 alle ore 10.59 |
|
Works really fine!
Great work! Saved me a lot of time and gave me a much better solution!
Thnak you so much!
|
| Scritto da Hugo Martins - lunedì 27 luglio 2009 alle ore 12.15 |
|
Thank you for your effort and great solutions!
This was exactly what I needed!
|
| Scritto da Nina - giovedì 8 ottobre 2009 alle ore 16.10 |
Scrivi nuovo commento