<!--
.DataGridFixedHeader {background-color: white; position:relative; top:expression(this.offsetParent.scrollTop);}
-->
</style>
{
background-color: white;
position:relative;
top:expression(this.offsetParent.scrollTop-2);
}
></HeaderStyle>
데브피아 답변 그대로 붙인거 편집하나 없이...ㅋㅋㅋ
헤더를 고정시키는 방법은 헤더 위치를 고정시키는 스타일 클래스를 작성하고
헤더를 Div에 넣는 형태로 구현할 수 있습니다.
우선 다음과 같이 헤더를 고정시키는 스타일 클래스를 작성하시구요
<style type=text/css>.DataGridFixedHeader {
POSITION: relative;
TOP: expression(this.offsetParent.scrollTop);
}
</style>
다음에 데이터 그리드를 Flow Div에 넣습니다.
<DIV style="OVERFLOW: auto; WIDTH: 800px; HEIGHT: 600px"> <asp:datagrid id="DataGrid1" runat="server" AutoGenerateColumns="False" BorderWidth="1px" Width="800px" AllowSorting="True">
<FooterStyle></FooterStyle>
<SelectedItemStyle></SelectedItemStyle>
<AlternatingItemStyle></AlternatingItemStyle>
<ItemStyle></ItemStyle>
<HeaderStyle cssclass="ms-formlabel DataGridFixedHeader"VerticalAlign="Top"></HeaderStyle>
</asp:datagrid>
</DIV>
그리고 마지막으로 그리드 헤더 스타일을 위에서 정의한 클래스로 지정합니다.
이렇게 하면 헤더가 특정 위치에 고정되게 됩니다.
그런데, 헤더가 특정한 위치에 고정은 되는데 DIV 안에 들어가지 않는 경우가 있습니다.
즉, 스크롤할 경우에 헤더가 제멋대로 혼자서 떠다닌다거나 맘대로 없어지기도 하는데요.
이 증상의 원인을 알 수는 없지만 VS.NET에서 만들어주는 아래와 같은 다큐먼트 타이프 지시자를 없애면 그런 증상이 사라집니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
물론 <HEAD> 라는 태크에도 속성을 지정하지 않는 편이 좋습니다.
저런 형식으로 하면 헤더 고정과 함께, 소팅 등 이벤트 처리도 가능합니다.
'ASP.NET' 카테고리의 다른 글
| ClientScriptManager.RegisterStartupScript 메서드 (Type, String, String, Boolean (0) | 2007.09.13 |
|---|---|
| Freeze ASP.NET GridView Headers by Creating Client-Side Extenders (0) | 2007.09.07 |
| .NET 데이터 액세스 아키텍처 가이드 (0) | 2007.09.05 |
| http://www.webui.net/Pages/Board.aspx?cId=6&postId=50&lp=V (0) | 2007.09.04 |
| NET 2.0 에서 제공되는 TreeView사용법 (0) | 2007.09.04 |
