How to: Apply CSS Style to Sorted Columns in a GridView Web Server Control

In the GridView control, you can specify CSS style rules that apply to the column and to the heading that the data is sorted by. For example, you can change the appearance of the column and heading based on the sort direction.

To specify CSS rules for a column that the data is sorted by, you set the TableItemStyle properties of the GridView columns. You can set the following TableItemStyle properties in order to apply style rules to GridView columns:

• SortedAscendingHeaderStyle

• SortedDescendingCellStyle

• SortedAscendingHeaderStyle

• SortedDescendingHeaderStyle

To apply CSS style to columns that the data is sorted by

1. Open an ASP.NET Web page that contains the GridView control that you want to configure.

2. In the Properties window, open the node for the SortedAscendingCellStyle property.

3. Set the CSS styles to apply to the sorted column.

   The CSS style you choose will be applied to all the cells in the column that the data is sorted by when the sort direction is ascending.

4. Repeat the preceding step for the following properties:

   • SortedDescendingCellStyle

   • SortedAscendingHeaderStyle

   • SortedDescendingCellStyle

   The following example shows the markup for a CSS style that will be applied to the cells and to the heading of the column that the data is sorted by when the direction is ascending.

   <SortedAscendingCellStyle BackColor="LightBlue" />
   <SortedAscendingHeaderStyle BackColor="Blue" ForeColor="White" CssClass="AscHeader"/>
   

Example

The following example shows how to set the background color of the cells and heading of the column that the data is sorted by. The CSS style of the cells and the heading changes when the sort direction changes.

<asp:GridView runat="server" AllowSorting="True"  
    AutoGenerateColumns="True"
    DataKeyNames="ProductID"
    DataSourceID="SqlDataSource1"
    AutoGenerateDeleteButton="True"    
    AutoGenerateEditButton="True" 
    AutoGenerateSelectButton="True">
  <HeaderStyle BackColor="#eeeeee" />
  <SelectedRowStyle  BackColor="Yellow"  />
  <SortedAscendingHeaderStyle BackColor="Blue" ForeColor="White"   
      ssClass="AscHeader"/>
  <SortedAscendingCellStyle BackColor="LightBlue" />
  <SortedDescendingHeaderStyle BackColor="Green" ForeColor="White"  
      CssClass="DescHeader" />
  <SortedDescendingCellStyle BackColor="LightGreen"/>
</asp:GridView>

Compiling the Code

In order to compile the code in example, you will need the following:

• Visual Studio 2010 or Visual Web Developer 2010 Express. 

See Also

Reference

GridView Web Server Control Overview

GridView