GridView Sorting CssClass not applying - asp.net

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;
}