방법: GridView 웹 서버 컨트롤에서 정렬된 열에 CSS 스타일 적용

GridView 컨트롤에서 데이터 정렬의 기준이 되는 제목과 열에 적용되는 CSS 스타일 규칙을 지정할 수 있습니다. 예를 들어 정렬 방향에 따라 열과 제목의 모양을 변경할 수 있습니다.

데이터 정렬의 기준이 되는 열에 대한 CSS 규칙을 지정하려면 GridView 열의 TableItemStyle 속성을 설정합니다. 다음 TableItemStyle 속성을 설정하여 GridView 열에 스타일 규칙을 적용할 수 있습니다.

데이터 정렬 기준 열에 CCS 스타일을 적용하려면

  1. 구성하려는 GridView 컨트롤이 포함되어 있는 ASP.NET 웹 페이지를 엽니다.

  2. 속성 창에서 SortedAscendingCellStyle 속성에 대한 노드를 엽니다.

  3. 정렬된 열에 적용할 CSS 스타일을 설정합니다.

    선택한 CSS 스타일은 정렬 방향이 오름차순일 때 데이터 정렬 기준 열에 있는 모든 셀에 적용됩니다.

  4. 다음 속성에 대해 위의 단계를 반복합니다.

    다음 예제에서는 정렬 방향이 오름차순일 때 데이터 정렬 기준 열의 제목과 셀에 적용될 CSS 스타일의 태그를 보여 줍니다.

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

다음 예제에서는 데이터 정렬 기준 열의 제목과 셀에 대한 배경 색을 설정하는 방법을 보여 줍니다. 정렬 방향이 변경되면 셀 및 제목의 CSS 스타일이 변경됩니다.

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

이 예제의 코드를 컴파일하려면 다음이 필요합니다.

  • Visual Studio 2010 또는 Visual Web Developer 2010 Express 

표시: