Day03-2
目的
GridViewコントロールの内容をカスタマイズしよう
GridViewコントロールが公開するプロパティを変更して、グリッド系の表示や動作をカスタマイズしてみよう。
レッスンの狙い
- アプリケーション開発において、様々なニーズが発生するが、
GridViewコントロールのパラメータ(プロパティ)で大体は実現可能だよ。
GridViewコントロールの使い方を覚えようね。
GridViewコントロールで利用可能なXxxxxxFieldクラス
概要
GridViewコントロールでは、配下の列情報を表示するために、XxxxxxFileldクラスを定義している。
XxxxxxFileldの設定を変更することで、下記の内容を変更することができる。
GridViewコントロールで利用可能なXxxxxxFieldクラス
| クラス |
用途 |
| BoundField |
平のテキスト(データの整形時などに使用する標準的なフィールド) |
| CheckBoxField |
チェックボックス |
| HyperLinkField |
ハイパーリンク |
| ImageFieled |
画像 |
| ButtonField |
CommandFieldクラスで定義されていないカスタムコマンドボタン |
| CommandField |
［選択］［編集］［削除］など、あらかじめ用途が決められたコマンドボタン |
| TemplateField |
列レイアウトを指定されたテンプレートに従って出力 |
XxxxxxFieldクラスで利用可能な主なプロパティ
共通
| プロパティ |
概要 |
| ControlStyle |
セル内に配置されたコントロールの外側 |
| HeaderStyle |
ヘッダ部の外観 |
| FooterStyle |
フッタ部の外観 |
| ItemStyle |
セル内のテキストの外観 |
| ShowHeader |
ヘッダを表示するか |
| HeaderText |
ヘッダ上に表示するテキスト |
| FooterText |
フッタ上に表示するテキスト |
| SortExpression |
ソートに使用する式 |
| InsertVisible |
挿入モードの場合に本フィールドを使用するかどうか |
BoundFieldのプロパティ
| プロパティ |
概要 |
| DataField |
列にバインドするフィールド名 |
| DataFormatString |
フィールド値を整形するための書式文字列 |
| HtmlEncode |
フィールド値にHTMLエンコードを適用するか |
| ApplyFormatEditMode |
編集モードの場合にもDataFormatStringプロパティで指定した書式文字列を利用するか |
| ConvertEmptyStringToNull |
から文字列を自動的にnullに変換するか |
| NullDisplayText |
フィールド値がnullである場合に表示する代替テキスト |
| ReadOnly |
編集モードでフィールド値を変更可能か(Trueの場合は編集不可) |
HyperLinkField
| プロパティ |
概要 |
| DataNavigateUrlFormatString |
リンク先を表す書式文字列 |
| DataNavigateUrlFields |
リンク先にバインドするフィールド名(複数指定も可) |
| DataTextFormatString |
リンクテキストを表す書式文字列 |
| DataTextField |
リンクテキストにバインドするフィールド名 |
| NavigateUrl |
リンク先を表すテキスト(固定値) |
| Text |
リンクテキストを表すテキスト(固定値) |
| Target |
リンクターゲット |
ImageField
| プロパティ |
概要 |
| DataImageUrlFormatString |
リンク先を表す書式文字列 |
| DataImageUrlField |
リンク先にバインドするフィールド名(複数指定も可) |
| DataAltermateTextFormatString |
大体テキストを表す書式文字列 |
| DataAltermateTextField |
大体テキストにバインドするフィールド名 |
| AltermateText |
代替テキスト(固定値) |
| NullImageUrl |
表示画像(フィールド値がnullである場合) |
| NullDisplayText |
代替テキスト(フィールドがnullである場合) |
| ConvertEmptyStringToNull |
空文字列をnullで自動変換するか |
| ReadOnly |
編集モードでフィールド値を変更可能か(Trueの場合は編集不可) |
CheckBoxField
| プロパティ |
概要 |
| DataField |
バインドするフィールド名 |
| Text |
チェックボックスと合わせて表示するテキスト |
CommandField
| プロパティ |
概要 |
| ShowXxxxxButton |
［編集］［削除］［選択］ボタンを表示するか |
| ButtonType |
ボタンの種類(Button, Link, Image) |
| XxxxxImageUrl |
ボタン表示に使用する画像(ButtonType=Imageの場合) |
| XxxxxText |
ボタンキャプション |
| CausesValidation |
ボタンクリック時に検証処理を実行するか |
| プロパティ |
概要 |
| ButtonType |
ボタンの種類(Button, Link, Image) |
| DataTextFormatString |
ボタンキャプションを表す書式文字列 |
| DataTextField |
ボタンキャプションにバインドするフィールド名 |
| CommandName |
コマンド名 |
| ImageUrl |
ボタン画像(ButtonType="Image"の場合) |
| Text |
ボタンキャプション(固定値) |
| CausesValidation |
ボタンクリック時に検証処理を実行するか |
日付/数値データの表示形式を変更
プレイスホルダ
- プレイスホルダとは、データベースから取得したフィールド値をセットするための
「値の置き場所」である。
例
- DataFormatStringプロパティ
{0:yyyy} 年 {0:MM} 月 {0: dd} 日
- DataFieldプロパティ
- 結果
- その他
{0:#,###}円{0:yyyy}年{0:MM}月{0:dd}日
HtmlEncodeプロパティ
HtmlEncodeプロパティは、バインドされたフィールド値をHTMLエンコードするかどうかを決定する。- HTMLエンコードとは、値に含まれる「<」「>」「&」のようなHTML予約文字を「
<」「>」「&」などの様な文字列に変換すること。
- 適切なHTMLエンコードが施されていない場合、クロスサイトスクリプティング脆弱性の原因にもなる。
- 特別な理由がない場合、
HtmlEncodeプロパティ'はTrue`に設定しておくこと
動的に画像やハイパーリンクを作成
- グリッド表の中で画像やハイパーリンクを表示したい場合には、
ImageField/HyperLinkFieldクラスを使用する。
BoundFieldクラスのDataStringFormatプロパティと同様にImageField, HyperLinkFieldにも下記のプロパティが存在する。
- 下記を使用して、画像URLやリンク先、リンクテキストなどを、データベースのフィールド値から動的に生成することができる。
DataImageUrlFormatStringDataAlternateTextFormatStringDataNavigateUrlFormatStringDataTextFormatString
- これらの
XxxxxFieldStringプロパティにバインドするフィールドは、
それぞれ対応するDataImageUrlField,DataAlternateTextField, DataNavigateUrlFields,DataTextFieldプロパティで指定する。
プレイスホルダの書き方
- プレイスホルダの書き方等は、プレイスホルダで説明したとおりだが
HyperLinkFieldクラスのDataNavigateUrlFieldsプロパティは、複数のプレイスホルダを格納することができる。
- 例:
http://www.wings.msn.to/{0}/{1}.gif
グリッド業の出力を動的にカスタマイズ
GridViewコントロールのRowCreatedイベントがASP.NETがGridViewコントロールの各行を作成するタイミングで発生する。
ページ数を動的に書き込むコード
Protected Sub grid_RowCreated(Byval sender As Object, Byval e As System.Web.UI.WebControls.GridViewRowEventArgs)
If e.Row.RowType = DataControlRowType.Footer Then
Dim ltr As New LiteralControl("総ページ数: " & grid.PageCount)
cell.HorizontalAlign = HorizontalAlign.Right
cell.Wrap = False
cell.Controls.Add(ltr)
End If
End Sub
解説
第一引数: sender As Object
- イベントの発生元となったオブジェクト
- 今回のサンプルであれば、
GridViewオブジェクト
第二引数
- 発生したイベントに関する情報を格納する
EventArgsオブジェクト
- または、
EventArgsオブジェクトの機能を引き継ぐ派生クラス
TableCellクラスで利用可能な主なメンバ
| プロパティ |
概要 |
| ColumnSpan |
セル幅を示す列数 |
| RowSpan |
セルの高さを示す行数 |
| HorizontalAlign |
水平方向の配置 |
| VerticalAlign |
垂直方向の配置 |
| Text |
セル内のテキスト |
| Wrap |
セルの内容を折り返すか |
| Control |
セル内のコントロール群 |
RowCreatedイベントハンドラでグリッド行の内容を操作する手順
捜査対象の行をRowTypeプロパティで特定
GridViewRow.Cellプロパティを介して、行内の特定セルを取得
TabaleCell.Controlプロパティで取得したControlCollectionオブジェクトに対してコントロールを追加/削除
まとめ
GridViewコントロールの各列をカスタマイズするには、XxxxxFieldクラスを利用する。
XxxxxFieldクラスのXxxxxFormatStringプロパティによって、それぞれの列にバインドされたデータを格納することができる。
- XxxxxFormatStringプロパティには
{インデックス番号[:書式文字列]}の形式でプレイスホルダを埋め込むことが可能。
- 書式文字列は、数値/日付データ用にそれぞれ標準/カスタムの合計4種類がある。
- 標準書式はそれ単体で、カスタム書式は複数の指定子を組み合わせて使用する。
GridViewコントロールのRowCreatedイベントを使用することで、グリッドの内容をプログラムから操作できる。
TOP