ASP.NET GridView Sorting with Image

Tweet

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

Tweet

About The Author

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.