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;
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.


Read some more GridView Tips and Tricks over here

About The Author

Suprotim Agarwal
Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.


Anonymous said...

Thank you for sharing all these great tutorials!

- Kilmer

mubashir said...

@Naresh, please check your image scr path.