ASP.NET GridView Sorting with Image

Continuing my ASP.NET GridView Tips and Tricks series, this post shows you how to display the Up and Down Arrow Images, while sorting the ASP.NET GridView

To sort the GridView columns using images (up and down arrows), use the GridView control’s
RowDataBound event as shown below:

protected void grdCust_RowDataBound(object sender, GridViewRowEventArgs e)
{
string imgAsc = @" <img src='images\asc.jpg' title='Ascending' />";
string imgDes = @" <img src='images\des.jpg' title='Descendng' />";

if (e.Row.RowType == DataControlRowType.Header)
{
foreach (TableCell cell in e.Row.Cells)
{
LinkButton lbSort = (LinkButton)cell.Controls[0];
if (lbSort.Text == grdCust.SortExpression)
{
if (grdCust.SortDirection == SortDirection.Ascending)
lbSort.Text += imgAsc;
else
lbSort.Text += imgDes;
}
}
}
}

In the code shown above, we first check if the current row is a header row. If yes, then depending on the Sort Expression, add the image to the LinkButton that matches the column. You can also use some CSS to remove the image borders and align it with the Sort Link.

image

Read some more GridView Tips and Tricks over here



Will you give this article a +1 ? Thanks in advance


About The Author

Suprotim Agarwal
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook

Follow him on twitter @suprotimagarwal

1 comment:

Anonymous said...

Thank you for sharing all these great asp.net/jquery tutorials!

- Kilmer