Tweet

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

　フィールドを追加するには、［フィールド］ダイアログ左上の［使用できるフィールド］か、追加したいフィールドを選択して、［追加］ボタンをクリックするだけだ。この場合も、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しか指定できない。

• MSDN：数値書式指定文字列
• MSDN：日付と時刻の書式指定文字列

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

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

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

この記事と関連性の高い別の.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メールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）