.NET TIPS

[ASP.NET]GridViewコントロールの行に通し番号(行番号)を付けるには?[2.0、3.0、3.5、C#、VB]

山田 祥寛
2008/12/18

 グリッド表を作成する場合、以下の画面のように、データに便宜的な連番を付与したいということはよくあることだ。

通し番号を追加したGridViewコントロールの例

 このような場合、「TIPS:[ASP.NET]GridViewコントロールで編集用のテキストボックスをカスタマイズするには?」で紹介したTemplateFieldフィールドを利用すればよい。さっそく、具体的な手順を見てみよう。

 なお、本稿の手順は、「TIPS:[ASP.NET]GridViewコントロールで各列の表示をカスタマイズするには?」で紹介したサンプルを基に、その差分のみを解説している。あらかじめご了承いただきたい。

1. No.列(通し番号)を追加する

 GridViewコントロールに新しい列を追加するには、タスク・メニューから[列の編集]を選択する。

[フィールド]ダイアログ
GridViewコントロール配下の列情報は、ここから編集できる。

 上の画面のような[フィールド]ダイアログが開くので、ダイアログ左上の[使用できるフィールド]欄から「TemplateField」を追加したうえで、ダイアログ左下の[選択されたフィールド]欄で新たなTemplateFieldフィールドを[↑]ボタンで先頭に移動しよう。

 また、ダイアログ右の[TemplateFieldプロパティ]欄からHeaderTextプロパティ(ヘッダ・テキスト)として「No.」を設定しておく*

* HeaderTemplateテンプレートとして定義しても構わないが、単なるテキストの場合にはHeaderTextプロパティを使用する方が手軽だ。

2. TemplateFieldで定義されたテンプレートを編集する

 次に、TemplateFieldフィールドのItemTemplateテンプレートを定義する。ItemTemplateテンプレートは、表示モードで適用されるテンプレートだ。TemplateFieldフィールドには、そのほかにもEditItemTemplateやHeaderTemplateのようなテンプレートが用意されているが、不要な場合は省略して構わない。TemplateFieldフィールドで最低限定義が必要なのはItemTemplateテンプレートだけである。

 テンプレートを編集するには、GridViewコントロールのタスク・メニューから[テンプレートの編集]を選択する。GridViewコントロールの表示が通常の表示からテンプレート表示モードに切り替わるので、さらに[GridViewタスク(テンプレート編集モード)]の[表示]欄から[Column[0] - No.]のItemTemplateを選択する。

 [No.]欄の表示用テンプレートが表示されるので(最初は空)、ここでは、以下の画面の要領でLiteralコントロールを配置しておこう。

[No.−ItemTemplate]テンプレートのレイアウト
以下のコントロールを配置する。
  Literalコントロール(IDは"no")を配置。

3. Literalコントロールのテキストを設定する

 次に、配置したLiteralコントロールに対して、通し番号をバインドする。

 コントロールに対してデータバインドを行うには、[Literalタスク]メニューから[DataBindingsの編集]を選択する。

[<コントロールID> DataBindings]ダイアログ

 上の画面のような[<コントロールID> DataBindings]ダイアログが開くので、ここでは、ダイアログ左部の[バインド可能プロパティ]欄からTextプロパティを選択したうえで、[カスタムバインド]−[コード式]にバインド式として次の式を入力する。

Container.DisplayIndex + 1

 Containerオブジェクトについては、「TIPS:[ASP.NET]Container.DataItemの正体は?」で解説しているように、データバインド・コントロールの各項目を表すためのオブジェクトである。Containerオブジェクトの実体は親コントロールの種類によって異なるが、GridViewコントロールの場合はGridViewRowクラス(System.Web.UI.WebControls名前空間)となる。

 ここでは、このDisplayIndexプロパティを介して、現在のページ上での行番号を取得しているわけだ。DisplayIndexプロパティは0スタートであるので、ここでは1を加えている。

[参考]

 ここでは、すべての操作をフォーム・デザイナから行うことを目的として、Literalコントロールを使用しているが、単に表示目的でテキストをバインドしたいという場合には、直接にバインド式をテンプレートに埋め込んでも構わない。

 具体的には、コード・エディタから次のようにコードを編集してみよう(追記部分は太字)。

<asp:GridView ID="grid" ...>
  ……中略……
  <Columns>
    <asp:TemplateField HeaderText="No.">
      <ItemTemplate>
        <%# Container.DisplayIndex + 1 %>
      </ItemTemplate>
    </asp:TemplateField>
    ……中略……
  </Columns>
  ……中略……
</asp:GridView>
本サンプルを、Literalコントロールを使わないで記述した場合のコード

 <%#〜%>は、バインド式を記述するための構文である。これによって、バインド式「Container.DisplayIndex + 1」が評価された結果が埋め込まれることになる。

 以上を理解したら、さっそくサンプル・コードを実行してみよう。冒頭の画面のように、グリッド表に通し番号が表示されていれば成功である。

●DisplayIndexプロパティとDataItemIndexプロパティ

 ちなみに、本サンプルで使用しているDisplayIndexプロパティは「ページ単位」での連番を表すためのプロパティである。従って、ページング処理をしている場合、次のページに移動すると、やはり通し番号は1から始まることになる。

DisplayIndexプロパティを使った場合の結果(上:1ページ目、_下:2ページ目)
DisplayIndexプロパティでは、通し番号はページ単位に振られる。

 しかし、通し番号をページ単位ではなく、全ページでの通番として振りたい場合もあるだろう。このようなケースでは、DisplayIndexプロパティの代わりにDataItemIndexプロパティを使用すればよい。

 手順3の[<コントロールID> DataBindings]ダイアログでコード式を以下のように書き換えてみよう。

Container.DataItemIndex + 1

 この状態でサンプルを実行してみると、以下のように番号が全ページの通しで振られていることが確認できるはずだ。

DataItemIndexプロパティを使った場合の結果(上:1ページ目、_下:2ページ目)
DataItemIndexプロパティでは、通し番号は全ページの通しで振られる。

 状況に応じて、両者を使い分けてほしい。End of Article

利用可能バージョン:.NET Framework 2.0
利用可能バージョン:.NET Framework 3.0
利用可能バージョン:.NET Framework 3.5
カテゴリ:Webフォーム 処理対象:GridViewコントロール
使用ライブラリ:GridViewコントロール
関連TIPS:[ASP.NET]GridViewコントロールで編集用のテキストボックスをカスタマイズするには?
関連TIPS:[ASP.NET]GridViewコントロールで各列の表示をカスタマイズするには?
関連TIPS:[ASP.NET]Container.DataItemの正体は?

この記事と関連性の高い別の.NET TIPS
[ASP.NET]GridViewコントロールで編集用のテキストボックスをカスタマイズするには?
[ASP.NET]DetailsViewコントロールの列表示をカスタマイズするには?
[ASP.NET]GridViewコントロールで選択ボックスを表示するには?
[ASP.NET]GridViewコントロールの削除ボタンで確認メッセージを表示するには?
[ASP.NET]GridViewコントロールを階層表示させるには?
このリストは、(株)デジタルアドバンテージが開発した
自動関連記事探索システム 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メールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

注目のテーマ

Insider.NET 記事ランキング

本日 月間
ソリューションFLASH