GridViewのヘッダーを固定してスクロールする

■GridViewのヘッダーを固定してスクロールする　（GridView01StepUp2.aspx）

ブラウザに表示されたGridViewをスクロールすると、GridViewのヘッダーもスクロールされるため列見出しがブラウザの画面から消えてしまいます。Excelのワークシートのようにヘッダーを固定してデータ部のみスクロールするように改善します。このサンプルでは、以下のノウハウを習得することができます。

▼ Webページに<style>…</style>タグを追加する方法

▼ スタイルシート(CSS)を記述する方法

▼ GridViewのヘッダーにスタイルシートを適用する方法

図　GridViewをスクロールするとヘッダーが固定される

1. 新規Webページ作成

ソリューションエクスプローラのプロジェクトの右クリックから[新しい項目の追加]を選択して、新規Webページ「GridView01StepUp2.aspx」を作成します。デザイナの最下位から[ソース]をクリックしてソースビューに切り替えたら、GridView01.aspxのソースビューからGridView1とSqlDataSource1のソースコードをコピー＆貼り付けします。

2. スタイルシート追加

<head>…</head>タグの間に、次の<style>…</style>タグを追加します。

<style>

.Freezing

{

position: relative;

top:expression(this.offsetParent.scrollTop);

z-index: 10;

}

</style>

3. <div>タグ追加

次の<div>..</div>タグを追加して<asp:GridView>…</asp:GridView>の前後を囲みます。

<asp:GridView ID="GridView1" runat="server" ・・・>

・・・

</asp:GridView>

</div>

GridViewの<HeaderStyle>にCssClass="Freezing"を追加します。

Tip

GridViewをインデントするには

<asp:GridView>…</asp:GridView>の前後を<div>..</div>タグが囲ったとき、GridViewをインデントするには、行番号右側の[―]ボタンをクリックしてボックス化します。ボックスを選択したら、VWD 2005のツールバーから[インデント]ボタンをクリックしてインデントします。

図　GridViewを折りたたんだらボックスを選択してから[インデント]ボタンをクリック

4. ブラウザに表示

VWD 2005のツールバーから[デバッグの開始]ボタンをクリックしてブラウザに表示します。ブラウザが起動されて、GridViewにCustomersテーブルが表示されます。GridView右側のスクロールバーをドラッグしてGridViewをスクロールさせるとヘッダーが固定されて、データのみスクロールします。

図　GridViewのヘッダーを固定した状態でスクロールする

◆解説

Webページにスタイルシートを追加するにはソースビューに切り替えて、<head>…</head>タグの間に追加します。スタイルシートは<style>…</style>タグ内に記述します。GridViewにスタイルシートを適用するには、「.Freezing」のようにドット「.」＋「クラス名」の書式でCSSのクラスを記述します。

<style>

.Freezing

{

position: relative;

top:expression(this.offsetParent.scrollTop);

z-index: 10;

}

</style>

</head>

GridViewのヘッダーを固定するには、GridViewの前後を<div>…</div>タグで囲みます。<div>のstyle=にはスタイルシートを追加してスクロールバーが表示されるようにします。GridViewのヘッダーにスタイルシートを適用するには、<HeaderStyle>のCssClassプロパティにクラス名「Freezing」を追加します。

<asp:GridView ID="GridView1" runat="server" ・・・>

・・・

</Columns>

</asp:GridView>

</div>

Tip

GridViewをExcelにエクスポートするには

GridViewをExcelにエクスポートするには、Buttonコントロールを追加してクリック時のイベントハンドラに以下のコードを追加します。

Protected Sub Page_Load(ByVal sender As Object, _

ByVal e As System.EventArgs)

If Not Me.IsPostBack Then

BindGrid()

End If

End Sub

Protected Sub btnExport_Click(ByVal sender As Object, _

ByVal e As System.EventArgs)

Response.Clear()

Response.AddHeader("content-disposition", "attachment;filename=Categories.xls")

Response.Charset = ""

Response.ContentType = "application/vnd.xls"

Dim stringWrite As StringWriter = New StringWriter()

Dim htmlWrite As HtmlTextWriter = New HtmlTextWriter(stringWrite)

Me.GridView1.RenderControl(htmlWrite)

Response.Write(stringWrite.ToString())

Response.End()

End Sub

Public Overrides Sub VerifyRenderingInServerForm(ByVal control As Control)

' このOverridesは以下のエラーを回避するために必要です。

' 「GridViewのコントロールGridView1は、runat=server を含む

' form タグの内側に置かなければ成りません」

End Sub

Protected Sub BindGrid()

Me.GridView1.DataSource = GetDataView()

Me.GridView1.DataBind()

End Sub

Protected Function GetDataView() As DataView

Dim con As New SqlConnection(connectionString)

Dim da As New SqlDataAdapter(selectString, con)

Dim ds As New DataSet()

da.Fill(ds)

Return ds.Tables(0).DefaultView

End Function

<asp:Button ID="btnExport" runat="server"

Text="Export to Excel" OnClick="btnExport_Click" />

<asp:GridView ID="GridView1" runat="server"

AutoGenerateColumns="False"

DataKeyNames="CategoryID">

<asp:BoundField DataField="CategoryID" HeaderText="CategoryID"

InsertVisible="False"

ReadOnly="True" SortExpression="CategoryID" />

<asp:BoundField DataField="CategoryName" HeaderText="CategoryName"

SortExpression="CategoryName" />

</Columns>

</asp:GridView>