連載：VS 2005でいってみようDBプログラミング 第4回　テンプレート機能でGridViewコントロールも自由自在 山田 祥寛（http://www.wings.msn.to/） 2006/05/31
Page1 Page2 Page3

■TemplateFieldフィールドを適用する

　詳細な解説は後回しにして、まずは具体的な構築手順を見ていくことにしましょう。

［1］既存列をTemplateFieldに変換する

　既存の列をTemplateFieldフィールドに変換するには、前回でも紹介した［フィールド］ダイアログから該当列を選択し、［このフィールドをTemplateFieldに変換します。］をクリックするだけです。

　新たにTemplateFieldフィールドを追加する場合には、［使用できるフィールド］欄から「TemplateField」を選択し、［追加］ボタンをクリックします。

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

［選択されたフィールド］欄からTemplateFieldフィールドに変換したい列を選択し、［このフィールドをTemplateFieldに変換します。］をクリックすることで、既存列をTemplateFieldフィールドに変換できる。

　ここでは［出版社］［単価］［刊行日］［CommandField］の各列をTemplateFieldフィールドに変換しておきます。

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

　列をTemplateFieldフィールドとして定義した場合、それぞれの列に対してテンプレート（列のレイアウト）を定義する必要があります。

　テンプレートの編集を行うには、GridViewコントロール右上の［GridViewタスク］メニューから［テンプレートの編集］を選択してください。GridViewコントロールの表示がテンプレート編集モードに切り替わりますので、［GridViewタスク（テンプレート編集モード）］メニューの［表示］から編集したいテンプレートを選択します。

　GridViewコントロールのTemplateFieldフィールドで編集可能なテンプレートは、以下のとおりです。

名前 概要 ItemTemplate 通常のデータ行 AlternatingItemTemplate 代替データ行（1行置きに表示を切り替えたい場合に使用） EditItemTemplate 編集モード HeaderTemplate ヘッダ部 FooterTemplate フッタ部

表2　TemplateFieldフィールドで定義可能なテンプレート

　既存のXxxxxFieldフィールドをTemplateFieldに変換した場合には、デフォルトで、最低限のデータを表示するためのLabel／TextBoxコントロールがデータバインドされた状態ですでに配置されているはずです*1。

*1 新規にTemplateFieldを追加した場合には、自動的な配置は行われません。本稿の例のように列に何らかのデータをバインドしたいという場合には、あらかじめBoundFieldなどで必要な設定を行ったうえで、TemplateFieldに変換した方がテンプレートの編集を効率的に行えます。

　ここでは、以下の図4〜7の要領で必要なテンプレートのみを編集してみましょう。

図4　［Column[3] - 出版社 EditItemTemplate］テンプレート

（1）元あったTextBoxコントロールを削除し、DropDownListコントロールを配置

コントロール プロパティ 設定値 DropDownList (ID) ddlPublish

［Column[3] - 出版社 EditItemTemplate］テンプレートのプロパティ設定

■

図5　［Column[4] - 単価 EditItemTemplate］テンプレート

（1）デフォルトで配置されたTextBoxコントロールのプロパティを変更 （2）RequireFieldValidatorコントロールを配置 （3）RangeValidatorコントロールを配置

コントロール プロパティ 設定値 TextBox (ID) txtPrice Columns 5 RequiredFieldValidator (ID) reqPrice ControlToValidate txtPrice Display Dynamic ErrorMessage 価格は必須です。 Text * RangeValidator (ID) rngPrice ControlToValidate txtPrice Display Dynamic ErrorMessage 価格は0〜100000円の間で入力してください。 MaximumValue 100000 MinimumValue 0 Text * Type Integer

［Column[4] - 単価 EditItemTemplate］テンプレートのプロパティ設定

■

図6　［Column[5] - 刊行日 EditItemTemplate］テンプレート

（1）デフォルトで配置されたTextBoxコントロールのプロパティを変更 （2）CompareValidatorコントロールを配置

コントロール プロパティ 設定値 TextBox (ID) txtPublishDate Columns 12 CompareValidator (ID) cmpPublishDate ControlToValidate txtPublishDate Display Dynamic ErrorMessage 刊行日はYYYY/MM/DD形式で入力してください。 Operator DataTypeCheck SetFocusOnError TRUE Text *

［Column[5] - 刊行日 EditItemTemplate］テンプレートのプロパティ設定

■

図7　［Column[6] ItemTemplate］テンプレート

（1）デフォルトで配置された［削除］ボタンのプロパティを変更

コントロール プロパティ 設定値 Button（削除） OnClientClick return confirm('本当に削除しても良いですか？')

［Column[6] ItemTemplate］テンプレートのプロパティ設定

［3］プルダウン・メニューにデータベースの内容をバインドする

　DropDownListコントロールに対しては、本稿の冒頭で作成したpublishテーブルの内容をデータバインドしておきましょう。DropDownListコントロール右上の［DropDownListタスク］メニューから［データソースの選択］を選択します。

図8　データソース構成ウィザード

DropDownListコントロール右上の［DropDownListタスク］メニューから［データソースの選択］を選択して開く。

　これにより上図のようなデータソース構成ウィザードが開きますので、［データソースの選択］から「<新しいデータソース>」を選択してください。以降の手順は、第2回で紹介したウィザードの流れと同様ですので、詳細はそちらを参照してください。

項目 設定値 データの種類 データベース データソースID sdsPub データ接続の選択 myDb Selectステートメントの構成（テーブル） publish Selectステートメントの構成（列） nameをチェック

表3　データソース構成ウィザードの設定

　一連の作業の後、［完了］ボタンをクリックすると、最初の画面に戻りますので、［DropDownListで表示するデータフィールドの選択］と［DropDownListの値のデータフィールドの選択］欄にはそれぞれ「name」を指定します。これでDropDownListコントロールには、publishテーブルの内容（出版社名の一覧）がバインドされました。

　ただ、これだけではデータベースから取得したbooksテーブルの現在値が反映されませんので、DropDownListコントロールのデフォルト値としてbooksテーブルから取得した出版社情報をバインドしておく必要があります。

　［OK］ボタンをクリックしてデータソース構成ウィザードを終了した後、［DropDownListタスク］メニューから［DataBindingsの編集］を選択してください。

図9　［<コントロールID> DataBindings］ダイアログ

［バインド可能プロパティ］欄から「SelectedValue」を選択し、カスタム・バインド式を記述する。

　上図のような［<コントロールID> DataBindings］ダイアログが開きますので、［バインド可能プロパティ］欄から「SelectedValue」を選択し、カスタム・バインド式として、

Bind("publish")

という式を入力してください。

　これによって、DropDownListコントロールのデフォルト値（SelectedValueプロパティ）としてbooksテーブルから取得したpublishフィールドの値がバインドされます。

　同様に、［Column[5] 刊行日 EditItemTemplate］上のTextBox.Textプロパティに対しても、カスタム・バインド式として、

Bind("publishDate","{0:yyyy/MM/dd}")

という式を入力しておきます。

［4］ValidationSummaryコントロールを配置する

　最後に、GridViewコントロールの下部に、ValidationSummaryコントロールを配置し、以下の表の要領で最低限のプロパティ情報を設定しておきます。

プロパティ 設定値 (ID) validSummary ShowMessageBox TRUE ShowSummary FALSE

表4　ValidationSummaryコントロールのプロパティ設定

　以上の手順が完了したら、さっそく出来上がった「.aspx」ファイルを起動してみましょう。冒頭の図1のように、編集モードにおいて「単価」列／「刊行日」列のテキストボックスの横幅が変更され、「出版社」列がプルダウン・メニューに変更されていれば成功です。

　また、それぞれの列に対して不正な値を入力した場合にはエラー・ダイアログが表示されることを、［削除］ボタンをクリックした場合に確認のダイアログが表示されることを、それぞれ確認しておいてください。

INDEX
	Visual Studio 2005でいってみようDBプログラミング
	第4回　テンプレート機能でGridViewコントロールも自由自在
	1．グリッド上の入力コントロールをカスタマイズしよう
	2．TemplateFieldフィールドを適用する
	3．TemplateFieldフィールド適用のポイントを理解する

　

「Visual Studio 2005でいってみようDBプログラミング」

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