.NET TIPS

[ASP.NET]GridViewコントロールで各列の表示をカスタマイズするには?[2.0、3.0、3.5、C#、VB]

山田 祥寛
2008/10/30

 「TIPS:[ASP.NET]GridViewコントロールでデータソースの内容を表示するには?」では、まずGridView+SqlDataSourceコントロールで、ごく基本的なグリッド表を生成する方法について紹介した。

 しかし、実際のアプリケーションではデータベースから取得した結果セットをそのままグリッド表に表示するのはまれだ。少なくともヘッダの表示は日本語表記にする必要があるし、価格や日付のようなデータも単位を付けたり、見やすいように整形する必要があるだろう。

 そこで本稿では、前掲のTIPSのサンプル・アプリケーションをベースに、グリッド表の表示をカスタマイズしてみよう。

本稿で作成するサンプル・アプリケーション

 カスタマイズするポイントは、以下のとおりである。

  • 各列のヘッダ行を日本語表記で置き換える
  • price列を「\9,999」の形式に整形する
  • published列を「YYYY年MM月DD日」の形式に整形する

 それではさっそく、具体的な手順を見ていくことにする。なお、グリッド表を生成する基本的な方法については、「TIPS:[ASP.NET]GridViewコントロールでデータソースの内容を表示するには?」の内容を参照していただきたい。本稿も、以降ではこのTIPSで作成したBasic.aspxをベースに差分の手順のみを紹介する。

1. 列の自動生成機能をオフにする

 前掲のTIPSで示したように、GridViewコントロールでデータソース・コントロールの内容を展開することは難しいことではない。AutoGenerateColumnsプロパティをTrue(デフォルト)に設定しておくことで、GridViewコントロールはデータソース・コントロールで取得した結果セットの内容を自動的に各列に展開してくれるからだ。

 しかし、列表示をカスタマイズする場合、この自動生成機能は(当然)邪魔となる。自動生成機能を有効にしたまま、自前の列定義を追加した場合、同じ内容の列が重複して出力されてしまうことになるためだ。

 列のカスタマイズを行う場合には、まず列の自動生成機能をオフにしておく必要がある。自動生成機能をオフにするには、プロパティ・ウィンドウから直接にAutoGenerateColumnsプロパティをFalseに設定しても構わないが、ここではタスク・メニューから[列の編集]を選択する。

[フィールド]ダイアログ

 上の画面のような[フィールド]ダイアログが開くので、ダイアログ左下の[自動生成フィールド]のチェックを外す。これによって、列の自動生成機能が無効となる。

2. GridViewコントロールに列定義を追加する

 GridViewコントロールでは、配下の列(フィールド)情報を定義するために、以下のようなXxxxxFieldクラス(System.Web.UI.WebControls.DataControlFieldクラスの派生クラス)を利用できる。

フィールド 概要
BoundField 標準的な列を生成(数値/日付などの整形のみ可能)
CheckBoxField チェックボックスを含む列を生成
CommandField [選択][更新][削除]などのコマンド・ボタンを含む列を生成
ButtonField CommandFieldフィールドでは定義されていない任意のボタンを含む列を生成
HyperLinkField ハイパーリンクを含む列を生成
ImageField 画像を含む列を生成
TemplateField あらかじめ定義されたテンプレートに従って列を生成
GridViewコントロールで利用可能な列定義

 GridViewコントロールでは、これら列定義を組み合わせることで、データソース・コントロール経由で取得した結果セットの内容を、さまざまな形式で出力できるというわけだ。タスク・メニューから更新/削除などの機能を有効にしていれば、現時点ではCommandFieldフィールドだけがGridViewコントロールに配置されているはずだ(配置されたフィールドは、[フィールド]ダイアログ左下の[選択されたフィールド]から確認できる)。

 本稿では、この状態のGridViewコントロールに対して、最も基本的なBoundFieldフィールドを追加してみよう。

 BoundFieldフィールドは、グリッド列をカスタマイズするための、最もシンプルな手段だ。ヘッダ/フッタテキストを指定したい、出力データの書式をカスタマイズしたい、列単位のスタイルを変更したいなど、微細なカスタマイズを行うために使用するフィールドである*

* そのほかのフィールドについては、あらためて後日前掲のTIPSにて解説の予定である。

 フィールドを追加するには、[フィールド]ダイアログ左上の[使用できるフィールド]か、追加したいフィールドを選択して、[追加]ボタンをクリックするだけだ。この場合も、BoundFieldを必要な列の数だけ追加してもよいのだが、その場合は、一から列情報を定義しなければならず面倒である。

 そこで、ダイアログ左下にある[スキーマの更新]リンクをクリックしてほしい。これによって、[使用できるフィールド]欄にデータソースから取得した列情報がすでに設定されたisbn、title……といったBoundFieldフィールドが追加される。これらを個々に追加しても構わないし、すべてのフィールドを追加する場合は[(すべてのフィールド)]を選択することで、データソース・コントロールから取得した列情報をまとめてBoundFieldフィールドとして追加できる。

[フィールド]ダイアログ(2)
「(すべてのフィールド)」を選択することで、データソース・コントロールから取得した列をまとめてBoundFieldフィールドとして追加できる。

 ちなみに、追加されたフィールドの表示順は、[選択されたフィールド]欄で変更が可能だ。移動したいフィールドを選択したうえで[↑][↓]ボタンをクリックすればよい。また、フィールドを削除する場合には同じく該当するフィールドを選択したうえで、[×]ボタンをクリックする。

3. フィールド情報を設定する

 [選択されたフィールド]欄にisbn、title、price、publish、publishedフィールドが追加できていることが確認できたら、次にそれぞれのフィールドの情報を設定(変更)しよう。

 フィールドに設定可能な情報は、使用しているXxxxxFieldクラスによって異なるが、BoundFieldフィールドで利用可能なプロパティは、以下のとおりである。なお、共通に分類されるプロパティはBoundFieldフィールドだけでなく、そのほかのXxxxxFieldフィールドでも共通して利用できる。

分類 プロパティ 概要 デフォルト値
共通 ControlStyle セル内に配置されたコントロールの外観  
HeaderStyle ヘッダ部分の外観  
FooterStyle フッタ部分の外観  
ItemStyle セル内テキストの外観  
ShowHeader ヘッダを表示するか True
HeaderText ヘッダのテキスト
FooterText フッタのテキスト
HeaderImageUrl ヘッダに表示するアイコン画像のURL
SortExpression ソート時に使用する式
BoundField DataField バインドするフィールド名
DataFormatString テキスト表示に使用する書式文字列
HtmlEncode フィールド値に対してHTMLエンコードを適用するか True
NullDisplayText フィールド値がnullのときに表示するテキスト
ApplyFormatInEditMode 編集モードでも、書式(DataFormatStringプロパティ)をフィールド表示に適用するか False
ConvertEmptyStringToNull 空文字列をnull値に自動変換するか True
ReadOnly 編集モードでフィールド値を変更できるか(Trueの場合は不可) False
BoundFieldフィールドで利用可能な主なプロパティ

 それぞれのフィールドのプロパティは、[選択されたフィールド]欄から該当するフィールドを選択したうえで、ダイアログ右側の[XxxxxFieldプロパティ]から設定が可能だ。ここでは、以下の表の要領で設定を行うものとする。

プロパティ 設定値
isbn DataField isbn
HeaderText ISBNコード
ReadOnly True
SortExpression isbn
title DataField title
HeaderText 書名
SortExpression title
price DataField price
DataFormatString {0:#,###}円
HeaderText 価格
HtmlEncode False
SortExpression price
publish DataField publish
HeaderText 出版社
SortExpression publish
published DataField published
DataFormatString {0:D}
HeaderText 配本日
HtmlEncode False
SortExpression published
GridViewコントロールの列情報

 もっとも、これらプロパティのうち、DataField/SortExpression/ReadOnlyなど一部のプロパティはフィールドを生成した時点で設定されているはずだ。これらのプロパティ値が設定されていることを確認したうえで、ここでは残りのプロパティについてのみ設定しておこう。

 BoundFieldフィールドで設定可能なプロパティのほとんどは、直感的に理解できるものばかりであるが、DataFormatStringプロパティについては少しだけ補足しておく必要があるだろう。DataFormatStringプロパティは、データベースなどから取得した数値や日付データに対して適用する書式を指定するものだ。DataFormatStringプロパティには、そのテキスト内に、

{X[:Format]}

というコロン区切りの形式からなる「プレイスホルダ」を含めることができる。プレイスホルダとは、フィールドに対して与えられたパラメータ(この場合はDataFieldプロパティで指定されたフィールド値)をセットするための「置き場所」のこと。DataFormatStringプロパティを指定しても、プレイスホルダが含まれていない場合、DataFieldプロパティで指定されたフィールド値は無視されるので、注意してほしい。

 Xの部分にはパラメータ・リストのインデックスを表す0始まりの値を、Format部分には日付/数値の書式指定子を指定する(日付/数値の書式指定子については、それぞれMSDNライブラリの以下ページを参照)。ちなみに、BoundFieldフィールドでは、パラメータ(DataFieldプロパティ)として1つのフィールド値しか指定できないので、Xの部分には0しか指定できない。

 また、DataFormatStringプロパティを指定したフィールドでは、HtmlEncodeプロパティを必ずFalseに指定すること。HtmlEncodeプロパティは出力値に含まれる「<」や「>」「&」のような文字列を「&lt;」「&gt;」「&amp;」などにエスケープ処理するかどうかを指定するためのプロパティである。

 クロスサイト・スクリプティング攻撃を未然に防ぐためにも、本プロパティの値は、原則、デフォルトのTrueとしておくべきであるが、本プロパティがTrueである場合にはDataFormatStringプロパティの書式が適用されないのである。HtmlEncodeプロパティをTrueにしたままで指定した書式が適用されない、とは初心者によくありがちな質問の1つであるので注意されたい。

 以上の手順を終えたら、さっそく、サンプルを実行してみよう。冒頭の画面のように、ヘッダ部分が日本語になっていること、価格/出版社列が意図したように整形されていることを確認してほしい。End of Article

利用可能バージョン:.NET Framework 2.0
利用可能バージョン:.NET Framework 3.0
利用可能バージョン:.NET Framework 3.5
カテゴリ:Webフォーム 処理対象:GridViewコントロール
使用ライブラリ:GridViewコントロール
関連TIPS:[ASP.NET]GridViewコントロールでデータソースの内容を表示するには?

この記事と関連性の高い別の.NET TIPS
[ASP.NET]GridViewコントロールで画像を表示するには?
[ASP.NET]GridViewコントロールの削除ボタンで確認メッセージを表示するには?
[ASP.NET]GridViewコントロールでハイパーリンクを表示するには?
[ASP.NET]GridViewコントロールにコマンド・ボタンを配置するには?(基本編)
[ASP.NET]DetailsViewコントロールの列表示をカスタマイズするには?
[ASP.NET]GridViewコントロールで編集用のテキストボックスをカスタマイズするには?
[ASP.NET]GridViewコントロールで選択ボックスを表示するには?
このリストは、(株)デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw(ジグソー) により自動抽出したものです。
generated by

「.NET TIPS」

@IT Special

- PR -

TechTargetジャパン

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 -

イベントカレンダー

PickUpイベント

- PR -

アクセスランキング

もっと見る

ホワイトペーパーTechTargetジャパン

注目のテーマ

Insider.NET 記事ランキング

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