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.

Read some more GridView Tips and Tricks over here