Adding default sorting arrows to GridView

Question

I'm new to Asp.net and I'm currently working with GridViews. I've looked around this site and others have seen tips for how to add sorting arrows to column headers.

So far I've done this:

Set these GridView properties:

SortedAscendingHeaderStyle-CssClass="sortasc"
SortedDescendingHeaderStyle-CssClass="sortdesc"

And my css has this:

th.sortasc a  
{
   display:block; padding:0 4px 0 15px; 
   background:url("images/icons/ascArrow.png") no-repeat;
}

th.sortdesc a 
{
   display:block; padding:0 4px 0 15px; 
  background:url("images/icons/descArrow.png") no-repeat;
}

This works great to show an image after the user clicks a header and the column sorts.

The issue I'm having now, is that I'd like the columns to show images by default so that users can know that they can click them to sort. Is there a way to accomplish this?

Answer 1

you can show the arrow for sorting behavior of a gridview column in the RowCreated event something like this i usually do it this way

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 && GridView1.SortExpression == lnk.CommandArgument)
                {
                    // 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";
                    // adding a space and the image to the header link
                    tc.Controls.Add(new LiteralControl(" "));
                    tc.Controls.Add(img);

                }
            }
        }
    }
}

it also toggles the image on ascending and descending sort orders of column

What the code actually do is it loops 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 it shows the image to the output, that's all

AnswerSource

Answer 2

I used the following method... Same as accepted answer but using characters instead of images. Sharing in case it helps someone else.

protected void GrdOverview_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];

                string sortDir = ViewState["SortDirection"] != null ? ViewState["SortDirection"].ToString() : "ASC";
                string sortBy = ViewState["SortExpression"] != null ? ViewState["SortExpression"].ToString() : "---";

                if (lnk != null && sortBy == lnk.CommandArgument)
                {
                    string sortArrow = sortDir == "ASC" ? " ▲" : " ▼";
                    lnk.Text += sortArrow;
                }
            }
        }
    }
}