Question

I have a gridview with the following markup:

<asp:GridView ID="gv" runat="server" Width="700px" skinid="gridview" HeaderStyle-HorizontalAlign="Left" AllowPaging="true" PageSize="50" AllowSorting="true" CssClass="gv">
<SortedAscendingHeaderStyle CssClass="sort_asc" />
<SortedDescendingHeaderStyle CssClass="sort_desc" />
<Columns>

<asp:TemplateField>
    <ItemTemplate>
        <asp:CheckBox ID="chk" runat="server" />
    </ItemTemplate>
</asp:TemplateField>

<asp:BoundField HeaderText="Project" DataField="Project" SortExpression="Project" />
<asp:BoundField HeaderText="Type" DataField="Type" SortExpression="Type" />

</Columns>
</GridView>

However, my SortedAscendingHeaderStyle and SortedDescendingHeaderStyle CssClass‘s are not being applied to the HTML when sorting.

My CSS is:

.gv .sort_asc
{
    display:block;
    padding:0 4px 0 15px; 
   background:url(/Admin/Images/Icons/arrow_down.jpg) no-repeat;  
}
.gv .sort_desc
{
    display:block;
    padding:0 4px 0 15px; 
   background:url(/Admin/Images/Icons/arrow_up.jpg) no-repeat;  
}

What are the possible reasons for this?

Answer 1

Below is the way, the task can be accomplished:

In .aspx file

<asp:GridView ID="gvData" runat="server" SkinID="yourskinID"
   AllowSorting="True" onsorting="gvData_Sorting">
   <HeaderStyle CssClass="ascendingCssClass" /> <%-- put it into your SKIN file, 
       assume you're showing data in ascending initially  --%>
   <Columns>

   </Columns>
</asp:GridView>

In .cs file

private const string ASCENDING = " ASC";
private const string DESCENDING = " DESC";

public SortDirection GridViewSortDirection
{
    get
    {
        if (ViewState["sortDirection"] == null)
            ViewState["sortDirection"] = SortDirection.Ascending;

        return (SortDirection)ViewState["sortDirection"];
    }
    set { ViewState["sortDirection"] = value; }
}

protected void gvData_Sorting(object sender, GridViewSortEventArgs e)
{
    string sortExpression = e.SortExpression;
    if (GridViewSortDirection == SortDirection.Ascending)
    {
        GridViewSortDirection = SortDirection.Descending;
        //Put your CssClass here for descending
        gvData.HeaderStyle.CssClass = "descendingCssClass";
        SortGridView(sortExpression, DESCENDING);
    }
    else
    {
        GridViewSortDirection = SortDirection.Ascending;
        //Put your CssClass here for ascending
        gvData.HeaderStyle.CssClass = "ascendingCssClass";
        SortGridView(sortExpression, ASCENDING);
    }
}

private void SortGridView(string sortExpression, string direction)
{
    DataTable dt = GetData();
    DataView dv = new DataView(dt);
    dv.Sort = sortExpression + direction;
    gvData.DataSource = dv;
    gvData.DataBind();
}

Update:

The sample/test css is a below: I just have used it test purpose, use your appropriate styling.

 tr.ascendingCssClass th a:link
 {
    color:Green;
    background-color:White;
 }    
 tr.ascendingCssClass th a:hover
 {
    color:Orange;
    background-color:White;
 }     
 tr.ascendingCssClass th a:visited
 {
     color:Black;
     background-color:White;
 }


 tr.descendingCssClass th a:link
 {
     color: red;
     background-color:Gray;
 }    
 tr.descendingCssClass th a:hover
 {
     color: Yellow;
     background-color:Gray;
 }     
 tr.descendingCssClass th  a:visited
 {
     color: Yellow;
     background-color:Gray;
 }

And, the DataTable function is as below:

DataTable GetData()
{
    DataTable table = new DataTable("MyDataTable");
    using (SqlConnection connection = new SqlConnection(YourConnectionString))
    {
        //Your data retrival code goes here
        adapter.Fill(table); // Finally fill the datatable
    }
    return table;
}