.NET TIPS ［ASP.NET］GridViewコントロールを階層表示させるには？［2.0、3.0、3.5、C#、VB］ 山田 祥寛 2010/03/18

　実際のアプリケーションで扱うデータは、必ずしもシンプルな表形式で表せるものばかりではない。例えば、表のそれぞれの行（レコード）が、さらに詳細な結果セットを伴うような階層構造を持つのはよくあることだ。そのような階層データを1つのグリッド表としてまとめて表現したい場合には、どのようにしたらよいだろう。

　以下は出版社を一覧表示するとともに、それぞれの出版社で刊行されている書籍の一覧を入れ子でグリッド表示した例である。

出版社と、それに付随する書籍の一覧を階層表示した例

　かつてのDataGridコントロールでこれを行うには、それなりに面倒なコーディングが必要であった（詳しくは、「TIPS：［ASP.NET］DataGridコントロールを階層表示させるには？」も参照されたい）。しかし、GridView＋SqlDataSourceコントロールの組み合わせであれば、ごく手軽に、このような階層データをグリッド表として表現できる。

　それではさっそく、具体的な実装の手順を見ていくことにしよう。

1. データベースを用意する

　本サンプルを動作させるには、あらかじめグリッド表（GridViewコントロール）に表示すべきデータソースとして、データベース上に以下のようなBookテーブルを用意しておく必要がある。

フィールド名	データ型	概要
isbn	CHAR(17)	ISBNコード（主キー）
title	VARCHAR(100)	書名
price	SMALLINT	価格
publish	VARCHAR(25)	出版社名
published	DATETIME	刊行日
Bookテーブルのフィールド・レイアウト
本来であれば、出版社情報はPublishテーブルなどのような別テーブルとして分離するのが望ましいが、ここでは単純化のための1つのテーブルにまとめている。

　また、Bookテーブルには、グリッド表に表示できるように適当なデータを何件か登録しておこう。

2. 新規のWebフォームを作成する

　新規のWebフォーム（Basic.aspx）を作成したら、フォーム・デザイナから以下の画面の要領でGridViewコントロールを配置する。

Hierarchy.aspxのフォーム・レイアウト

以下のコントロールを配置する。

GridViewコントロール（IDは「list」。オートフォーマットは「オシアニカ」）。

　GridViewコントロールを配置したら、コントロール右肩のタスク・メニューから［データソースの選択］−［<新しいデータソース>］を選択する。

　データソース構成ウィザードが起動するので、以下の表の要領で設定を進めていこう。データソース構成ウィザードに関する詳細は、「TIPS：［ASP.NET］GridViewコントロールでデータソースの内容を表示するには？」が詳しいので、併せてご参照いただきたい。

項目	概要
データの種類	データベース
データソースID	sds
接続名	MyDB（Web.configでの登録名）
Selectステートメント	SELECT DISTINCT [publish] FROM [book]
データソース構成ウィザードの設定

　DISTINCTキーワード（重複を除去）をSELECT命令に付与するには、データソース構成ウィザードの［Selectステートメントの構成］ダイアログで［一意の行のみ返す］にチェックを入れればよい。これで、Bookテーブルに登録されている一意な出版社の一覧を取得できる。

［Selectステートメントの構成］ダイアログ

3. テンプレート列を追加する

　ウィザードを閉じると、［publish］列だけを持つグリッド表ができているはずだ。次に、［publish］列にヘッダ・タイトルを設定するとともに、それぞれの出版社に付随する書籍情報を表示するためのテンプレート列を追加する。

　列を追加／編集するには、GridViewコントロールのタスク・メニューから［列の編集］を選択する。

［フィールド］ダイアログ

　［フィールド］ダイアログが起動するので、［使用できるフィールド］欄から「TemplateField」を追加するとともに、既存の［publish］列に対してHeaderTextプロパティを「出版社」と設定する。

4. テンプレート列を編集する

　ダイアログを閉じた後、追加したテンプレート列に対して入れ子のグリッド表を追加しよう。テンプレート列を編集するには、GridViewコントロールのタスク・メニューから［テンプレートの編集］を選択すればよい。

　フォーム・デザイナがテンプレート編集モードに切り替わるので、タスク・メニューから［表示名］が「Column[1] - ItemTemplate」を指していることを確認したうえで、以下の画面のようにテンプレートを編集する。テンプレートに関する詳細は、「TIPS：［ASP.NET］GridViewコントロールで編集用のテキストボックスをカスタマイズするには？」が詳しいので、併せてご参照いただきたい。

Column[1] - ItemTemplateテンプレートの編集画面

以下のコントロールを配置する。

HiddenFieldコントロール（IDは「hdnPublish」）。   GridViewコントロール（IDは「list_details」。オートフォーマットは「プロフェッショナル」）。

　また、HiddenFieldコントロール（隠しフィールド）のValueプロパティにpublishフィールドの値をバインドしておこう。この値は、あとから入れ子のGridViewコントロールで絞り込み条件を指定する場合のキー情報となる。GridViewコントロールを入れ子にする場合のポイントとなる方法なので、要注目である。

　フィールド値をバインドするには、HiddenFieldコントロールのタスク・メニューから［DataBindingsの編集］を選択する。

［hdnPublish DataBindings］ダイアログ

　［hdnPublish DataBindings］ダイアログが表示されるので、［バインド可能プロパティ］欄からValueプロパティを選択したうえで、［バインドするフィールド］から「publish」を選択する。これでHiddenFieldコントロールに出版社名がセットされた。

5. テンプレート上のグリッド表を設定する

　あとは、TemplateFieldフィールドに配置されたGridViewコントロールにデータをバインドするだけだ。

　手順［1］と同様、GridViewコントロールのタスク・メニューから［データソースの選択］−［<新しいデータソース>］を選択する。データソース構成ウィザードが起動するので、以下の表の要領で設定を進めていこう。

項目	概要
データの種類	データベース
データソースID	sds
接続名	MyDB（Web.configでの登録名）
Selectステートメント	SELECT [isbn], [title], [price], [published] FROM [book] WHERE ([publish] = @publish)
データソース構成ウィザードの設定

　プレイスホルダである「@publish」には、先ほど設定した隠しフィールドhdnPublishのValueプロパティをバインドしておこう。これによって、各行のpublish列（出版社名）をキーに対応する書籍情報を抽出することができる。

　このように、テンプレート列で隠しフィールドにキー情報を保持しておいて、これを抽出条件のパラメータ値としてバインドするのが、本サンプルのポイントだ。

［WHERE 句の追加］ダイアログ

　以上で、実装の手順は完了である。ウィザードを閉じたら、さっそくサンプルを実行してみよう。冒頭の画面のように、出版社名の一覧と、それぞれ対応する書籍情報が階層的に表示されれば、正しくサンプルは動作している。

利用可能バージョン：.NET Framework 2.0 利用可能バージョン：.NET Framework 3.0 利用可能バージョン：.NET Framework 3.5 カテゴリ：Webフォーム　処理対象：GridViewコントロール 使用ライブラリ：GridViewコントロール 関連TIPS：［ASP.NET］DataGridコントロールを階層表示させるには？ 関連TIPS：［ASP.NET］GridViewコントロールでデータソースの内容を表示するには？ 関連TIPS：［ASP.NET］GridViewコントロールで編集用のテキストボックスをカスタマイズするには？

この記事と関連性の高い別の.NET TIPS ［ASP.NET］GridViewコントロールで選択ボックスを表示するには？ ［ASP.NET］GridViewコントロールの表示データを特定条件で絞り込むには？ ［ASP.NET］GridViewコントロールで編集用のテキストボックスをカスタマイズするには？ ［ASP.NET］GridViewコントロールでデータソースの内容を表示するには？ ［ASP.NET AJAX］HoverMenuコントロールでマウス・ホバー時に表示されるポップアップ・メニューを定義するには？ ［ASP.NET］DetailsViewコントロールの列表示をカスタマイズするには？ ［ASP.NET］GridView＋DetailsViewコントロールで一覧／明細画面を作成するには？ このリストは、（株）デジタルアドバンテージが開発した 自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。 generated by

「.NET TIPS」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）