.NET TIPS

[ASP.NET]DataGridコントロールのページ移動ボタンをカスタマイズするには?

デジタルアドバンテージ
2003/10/17

 「TIPS:[ASP.NET]DataGridコントロールでページ番号によりページ移動を行うには?」で解説しているように、DataGridコントロールでページ表示を行う場合、ページ移動を行うためのページャとしては、前後に移動するNextPrevモードと、ページ番号により移動するNumericPagesモードの2つから選択することができる。しかし、これら2種類のページャはどちらもページ移動のためのリンクボタンを表示するだけで、それ以上のカスタマイズ手段は標準では用意されていない。

 完全に独自のページャは、Buttonコントロールなどをグリッドとは別に配置して作成することもできるが、ここでは次の画面のように、既定のページャをカスタマイズする方法について解説する。

ページ移動ボタンをカスタマイズしたサンプル・プログラム(modpager.aspx)の実行画面
ページ移動のための2つのリンクボタンの間に現在のページ番号と全ページ数を表示している。

 上記の画面のページャでは、NextPrevモードにおいて表示される2つのリンクボタンの間に現在のページ番号と全ページ数を表示するようにカスタマイズしている。

 なお、今回作成するサンプル・プログラムは「TIPS:[ASP.NET]DataGridコントロールでページ表示するには?」で示したサンプル・プログラム(pagingdg.aspx)をベースとしているので、DataGridコントロールのページングなどの詳細については、まずそちらを参照していただきたい。

ページャ行へのアクセス

 既定のページャをカスタマイズするには、まずページャが表示されている行にアクセスする必要がある。これはグリッド内の各行が作成されるときに発生するItemCreatedイベントのタイミングで行うことができる。このイベントの詳細については「TIPS:[ASP.NET]DataGridコントロールですべての行にアクセスするには?」で解説している。

 具体的な手順としては、次のようなItemCreatedイベントのイベント・ハンドラとなるメソッドを用意しておき、<asp:DataGrid>タグでOnItemCreated属性によりそのメソッド名を指定すればよい。

void MyGrid_ItemCreated(object sender, DataGridItemEventArgs e) {
  if (e.Item.ItemType == ListItemType.Pager) {
    ……
  }
}

 OnItemCreated属性で設定したこのメソッドは、グリッド内の各行が作成されるたびに呼び出される。今回はページャ行についてのみ処理するため、上記のように、行のItemTypeプロパティの値がListItemType.Pagerとなっているかをまず確認する必要がある。なお、このメソッドにおいては「e.Item」が処理中の行を参照しており、参照されるオブジェクトはDataGridItemクラス(System.Web.UI.WebControls名前空間)のオブジェクトである。

ページャを構成するコントロール

 ページャ行が取得できたら、次はその行にページ番号を表示するLabelコントロールを追加すればよい。追加するLabelコントロールは次のようにして作成することができる。

Label label = new Label();
label.Text = String.Format(" {0} / {1}",
    MyGrid.CurrentPageIndex + 1, MyGrid.PageCount);

 問題はこのLabelコントロールを追加する位置である。ASP.NETのページでは単なる文字列の表示部分も含めて、ページを構成する各要素はすべてコントロールとして生成され、それらがツリー構造となっている(この様子はページのトレース情報を表示させることにより確認することができる。これについては「TIPS:[ASP.NET]ページのトレース情報を出力するには?」を参照)。つまり、既定のページャ行をカスタマイズするには、それに含まれているコントロールについて十分に把握しておく必要がある。

 次の図は、NextPrevモードで最初のページを表示させた場合のコントロール・ツリーの先頭部分である。そして、赤枠で囲んだ部分がページャ行を示すDataGridItemオブジェクトとそれに含まれるコントロールである。

ページ表示させたDataGridコントロールのコントロール・ツリー(一部)
赤枠で囲んだ部分がページャ行を示すDataGridItemオブジェクトとそれに含まれるコントロールである。

 この図から分かることは、まずページャ行には1つのセル(TableCellオブジェクト)が含まれており、さらにその子コントロールとして3つのコントロールが含まれているということである。この場合、3つの子コントロールはそれぞれ次のようになっている。

  • 「<」を表示するLabelコントロール
  • 空白文字列を表示するLiteralコントロール
  • 「>」リンクボタンを表示するDataGridLinkButtonオブジェクト

 2ページ目以降では、「<」を表示するLabelコントロールがリンクボタンであるDataGridLinkButtonオブジェクトとなるが、NextPrevモードではどのページでも上記の3つのコントロールが作成されるようである。よって、ページャの中央にページ番号を表示するには、ページャ行のセルの2番目(あるいは3番目)の子コントロールとして先ほどのLabelコントロールを追加すればよい。このためのコードは次のようになる。

TableCell pager = (TableCell)e.Item.Cells[0];
pager.Controls.AddAt(1, label);

 TableCellオブジェクトのControlsプロパティは、そのオブジェクトに含まれる子コントロールを保持するコレクションである。AddAtメソッドは第1パラメータで指定した位置に子コントロールを追加することができる。

 ちなみに、ControlsプロパティはASP.NETのすべてのコントロールの基底クラスであるControlクラス(System.Web.UI名前空間)から継承したものであり、すべてのコントロールがこのControlsプロパティにより自分の子コントロールを保持することができる。

ページ移動ボタンをカスタマイズしたサンプル・プログラム

 「TIPS:[ASP.NET]DataGridコントロールでページ表示するには?」で示したサンプル・プログラム(pagingdg.aspx)をベースにして、ページ移動ボタンをカスタマイズしたプログラムのソース・コードは次のようになる。太字で示した部分が今回で追加した個所である。冒頭で示した実行画面はこのサンプル・プログラムを実行したものだ。

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>

<html>
<head>
  <script runat="server">
    void BindMyGrid() {
      DataSet ds = new DataSet();
      ds.ReadXml("http://www.buildinsider.net/rss");

      MyGrid.DataSource = ds.Tables["item"];
      MyGrid.DataBind();
    }

    void Page_Load(object s, EventArgs e) {
      if (!IsPostBack) {
        BindMyGrid();
      }
    }

    void MyGrid_Paging(object sender, DataGridPageChangedEventArgs e) {
      MyGrid.CurrentPageIndex = e.NewPageIndex;
      BindMyGrid();
    }

    void MyGrid_ItemCreated(object sender, DataGridItemEventArgs e) {
      if (e.Item.ItemType == ListItemType.Pager) {
        Label label = new Label();
        label.Text = String.Format(" {0} / {1}",
            MyGrid.CurrentPageIndex + 1, MyGrid.PageCount);

        TableCell pager = (TableCell)e.Item.Cells[0];
        pager.Controls.AddAt(1, label);
      }
    }


  </script>
</head>

<body>
  <form runat="server">
    <asp:DataGrid id="MyGrid"
        AllowPaging="true"
        PageSize="5"
        OnItemCreated="MyGrid_ItemCreated"
        OnPageIndexChanged="MyGrid_Paging"
        AutoGenerateColumns="false"
        runat="server">

      <PagerStyle
          HorizontalAlign="Center"
          Position="Top"
          BackColor="#CCCCCC" />


      <HeaderStyle BackColor="#BB2255" ForeColor="white"/>
      <ItemStyle   BackColor="#FFEEEE" />
      <AlternatingItemStyle BackColor="#FFDDDD" />

      <Columns>
        <asp:TemplateColumn HeaderText="No">
          <ItemTemplate>
            <%# Container.DataSetIndex + 1 %>
          </ItemTemplate>
        </asp:TemplateColumn>
        <asp:BoundColumn
          DataField="title" HeaderText="タイトル" />
        <asp:BoundColumn
          DataField="encoded" HeaderText="概要" />
      </Columns>

    </asp:DataGrid>
  </form>
</body>
</html>
ページ移動ボタンをカスタマイズしたC#のサンプル・プログラム(modpager.aspx)

 なお、ここで示したページャ行の子コントロールの構造はリファレンス・マニュアルで明記されているものではない。ASP.NETの将来のバージョンではそれが変更される可能性もあり、実際の使用に当たっては十分なテストが必要だろう。End of Article

カテゴリ:Webフォーム 処理対象:DataGridコントロール
使用ライブラリ:DataGridコントロール
使用ライブラリ:Labelコントロール
使用ライブラリ:DataGridItemクラス(System.Web.UI.WebControls名前空間)
使用ライブラリ:Controlクラス(System.Web.UI名前空間)
関連TIPS:[ASP.NET]DataGridコントロールでページ番号によりページ移動を行うには?
関連TIPS:[ASP.NET]DataGridコントロールでページ表示するには?
関連TIPS:[ASP.NET]DataGridコントロールですべての行にアクセスするには?
関連TIPS:[ASP.NET]ページのトレース情報を出力するには?
 
この記事と関連性の高い別の.NET TIPS
[ASP.NET]DataGridコントロールでページ番号によりページ移動を行うには?
[ASP.NET]DataPagerコントロールでListViewコントロールにページャを追加するには?
[ASP.NET]GridViewコントロールでページング方法をカスタマイズするには?
[ASP.NET]DataGridコントロールでページ表示するには?
[ASP.NET]DataGridコントロールのヘッダーを複数行にするには?
[ASP.NET]DataPagerコントロールでページャのレイアウトをテンプレート定義するには?
このリストは、(株)デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw(ジグソー) により自動抽出したものです。
generated by

「.NET TIPS」


Insider.NET フォーラム 新着記事
  • 第2回 簡潔なコーディングのために (2017/7/26)
     ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
     Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回 明瞭なコーディングのために (2017/7/19)
     C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator (2017/7/18)
     Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

Insider.NET 記事ランキング

本日 月間