ASP.NET GridViewのホームへ戻る

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

 

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

 

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

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

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

 

 

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

 

 

 

1. 新規Webページ作成

 

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

 

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>の前後を囲みます。

 

<div id="freezingDiv" style="OVERFLOW: auto; WIDTH: 400px; HEIGHT: 320px">

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

    ・・・

  </asp:GridView>

</div> 

 

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

 

<HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" CssClass="Freezing" />

 

Tip

GridViewをインデントするには

 

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

 

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

 

 

 

 

4. ブラウザに表示

 

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

 

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

 

 

◆解説

 

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

 

<head runat="server">

    <style>

      .Freezing

      {

        position: relative;

        top:expression(this.offsetParent.scrollTop);

        z-index: 10;

      }

    </style>

</head>

 

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

 

<div id="freezingDiv" style="OVERFLOW: auto; WIDTH: 400px; HEIGHT: 320px">

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

    <HeaderStyle CssClass="Freezing" ・・・ />

    <Columns>

      ・・・

    </Columns>

  </asp:GridView>

</div>

 

Tip

GridViewExcelにエクスポートするには

 

GridViewExcelにエクスポートするには、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">

  <Columns>

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

      InsertVisible="False"

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

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

      SortExpression="CategoryName" />

  </Columns>

</asp:GridView>

 

ASP.NET GridViewのホームへ戻る