ASP.NET:DataGridに見出し（ヘッダ行）を表示し縦と横のスクロールを可能にする
ASP・VB・Excel (24 items)
2004年10月12日
DataGridに見出し（ヘッダ行）を表示し、縦と横のスクロールを制御をしたい
【方法】
ヘッダ行のDataGridと明細のDataGridを「Flow Layout Panelコントロール」上
に作成し明細の横スクロールの制御については、JavaScriptでヘッダ行をスクロールさせる。
■JavaScript
<SCRIPT language="JScript">
function scroll() {
document.all("DataGrid2").style.pixelLeft=divScroll.scrollLeft * -1;
}
</SCRIPT>
■明細行
<div id="pnlScroll" style="Z-INDEX: 104; LEFT: 10px; OVERFLOW: auto; WIDTH: 977px; POSITION: absolute; TOP: 155px; HEIGHT: 174px" onscroll="scroll()">
<asp:datagrid id="DataGrid1" runat="server"
CssClass="detillistlayout" BorderColor="#CCCCCC"
PageSize="1" AllowPaging="True"
AutoGenerateColumns="False" Height="20px"
ShowHeader="False">
<Columns>
<asp:BoundColumn DataField="A01">
<ItemStyle Font-Size="14px"
Wrap="False" Width="200px"></ItemStyle>
</asp:BoundColumn>
</Columns>
・
・
・
・
</asp:datagrid>
</div>
■見出し行
<div style="Z-INDEX: 101; OVERFLOW: hidden; WIDTH: 960px; POSITION: absolute; TOP: 131px; HEIGHT: 24px">
<asp:datagrid id="DataGrid2" style="POSITION: relative"
runat="server" PageSize="1" AllowPaging="True"
AutoGenerateColumns="False" Height="24px" BackColor="Silver">
<Columns>
<asp:BoundColumn HeaderText="10月18日(月)">
<HeaderStyle Wrap="False"
height="25px" Width="200px"></HeaderStyle>
</asp:BoundColumn>
・
・
・
・
<asp:BoundColumn HeaderText="10月24日(日)">
<HeaderStyle Wrap="False" height="25px"
Width="200px"></HeaderStyle>
</asp:BoundColumn>
</Columns>
</asp:datagrid>
</div>