[Asp.Net] 'GridView'를 '<thead>'로 생성하기

제목이 좀 이상하긴 한데....

'GridView'를 그냥 사용하면 다음과 같이 컬럼까지 'tbody'에 출력 되게 됩니다.

 

 

 

예전에야 그냥 해더스타일(HeaderStyle)에 스타일클래스(CssClass)속성을 지정해서 사용하는 방법이나 그리드뷰(GridView)에 스타일클래스(CssClass) 속성을 지정하여 해결했습니다.

 

문제는 다양한 프론트엔드툴같은 것들이 유행되면서 UI작업이 생산성이 향상 되고 이로 인해 표준을 얼마나 잘 지켜서 코드를 만드느냐가 중요해졌습니다.

Asp.net의 경우 웹콘트롤(WebControls)에서 생성되는 코드도 많다 보니 표준에 맞지 않는 코드가 생성되는 경우가 생기기 시작했다는 것이죠.

그리드뷰의 'thead'문제도 이런 문제입니다.

 

테이블 태그를 사용하면 'thead'를 선언하고 컬럼명을 넣어야 합니다.

다음과 같이 말이죠.

<table>
<thead>
    <tr>
        <th>Order #</th>
        <th> Order Date</th>
        <th>Order Time</th>
        <th>Amount (USD)</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>3326</td>
        <td>10/21/2013</td>
        <td>3:29 PM</td>
        <td>$321.33</td>
    </tr>
    <tr>
        <td>3325</td>
        <td>10/21/2013</td>
        <td>3:20 PM</td>
        <td>$234.34</td>
    </tr>
    <tr>
        <td>3324</td>
        <td>10/21/2013</td>
        <td>3:03 PM</td>
        <td>$724.17</td>
    </tr>
</tbody>
</table>

 

 

이 문제를 해결하려면 데이터를 바인딩한후 해드가 있는경우 'TableSection'로 해드로 설정해줘야 합니다.

우리는 하는 김에 푸터도 합시다.

(참고 : MSDN - TableRowSection 열거형)

//이벤트 연결
GridView1.DataBound += GridView1_DataBound;

//
private void GridView1_DataBound(object sender, EventArgs e)
{
	if (null != GridView1.HeaderRow)
	{
		GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
	}

	if (null != GridView1.FooterRow)
	{
		GridView1.FooterRow.TableSection = TableRowSection.TableFooter;
	}
}

 

 

 

이제 코드를 실행하면 t해드(thead)와 t풋(foot)이 생성된것을 확인 할 수 있습니다.

 

 

 

 

알고보면 별거아닌데 생각보다 찾기 힘든 자료였습니다 ㅎㅎㅎ

 

GridView_Test.zip