ASP.NET GridView SortedAscendingHeaderStyle not working

Question

My SortedAscendingHeaderStyle and SortedDescendingHeaderStyle don't work at all

 <asp:GridView ID="grdProducts" runat="server" CssClass="grid" AllowPaging="True" AllowSorting="True" PageSize="100" EmptyDataText="No data to show" onrowdatabound="grdProducts_RowDataBound" onrowediting="grdProducts_RowEditing" onsorting="grdProducts_Sorting" AutoGenerateEditButton="True"> <AlternatingRowStyle CssClass="even" /> <SortedAscendingHeaderStyle ForeColor="White" CssClass="sorted" /> <SortedDescendingHeaderStyle CssClass="sorted desc" /> </asp:GridView> 

Lines are sorted correctly when headers are clicked, but when I check the header with FireBug, it only shows: (when sorting in ascending order)

 <th scope="col"> <a href="javascript:__doPostBack('ctl00$body$ctl00$grdProducts','Sort$Namekey')">Namekey</a> </th> 

ForeColor and CssClass are not installed at all.

Does anyone know what I'm doing wrong?

EDIT: my C # code is for

  protected void grdProducts_Sorting(object sender, GridViewSortEventArgs e) { if ((string)ViewState["SortColumn"] == e.SortExpression) ViewState["SortDirection"] = ((string)ViewState["SortDirection"] == "") ? " DESC" : ""; else { ViewState["SortColumn"] = e.SortExpression; ViewState["SortDirection"] = ""; } } protected override void OnPreRender(EventArgs e) { BindGrid(); base.OnPreRender(e); } private void BindGrid() { string query = "SELECT ... ORDER BY " + ViewState["SortColumn"] + ViewState["SortDirection"]; DataTable dt = SqlFunctions.Select(query); grdProducts.DataSource = dt; grdProducts.DataBind(); } 

Answer 1

I'm not sure if SortedDescendingHeaderStyle works without code unless you use asp:SQLDataSource as a GridView data source. But a little encoding can lead you there.

You need to apply the CSS style manually to the header cell. You can do this in the Sort event.

 protected void grdProducts_Sorting(object sender, GridViewSortEventArgs e) { if ((string)ViewState["SortColumn"] == e.SortExpression) { ViewState["SortDirection"] = ((string)ViewState["SortDirection"] == "") ? " DESC" : ""; grdProducts.HeaderRow.Cells[GetColumnIndex( e.SortExpression )].CssClass = "AscendingHeaderStyle"; } else { ViewState["SortColumn"] = e.SortExpression; ViewState["SortDirection"] = ""; grdProducts.HeaderRow.Cells[GetColumnIndex( e.SortExpression )].CssClass = "DescendingHeaderStyle"; } BindGrid(); } private int GetColumnIndex( string SortExpression ) { int i = 0; foreach( DataControlField c in gvwCustomers.Columns ) { if( c.SortExpression == SortExpression ) break; i++; } return i; } 

Answer 2

I do not have enough comments to comment on the accepted answer. When I tried to apply the solution, it would sort correctly, but did not apply the CSS class to what was ultimately displayed.

In my case, calling DataBind () on my grid AFTER sorting my DataSource (List) and assigning it as a grid DataSource, but BEFORE installing CssClass did the trick. It is clear that I would share the case when someone came across something like that.

Answer 3

I think this is the time of your data binding. Change the data binding to work as follows:

  protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { BindGrid(); } } protected void grdProducts_Sorting(object sender, GridViewSortEventArgs e) { if ((string)ViewState["SortColumn"] == e.SortExpression) ViewState["SortDirection"] = ((string)ViewState["SortDirection"] == "") ? " DESC" : ""; else { ViewState["SortColumn"] = e.SortExpression; ViewState["SortDirection"] = ""; } BindGrid(); } 

GridView.Sorting Event