ホーム > .NET, ASP.NET 備忘録 > GridViewの1行に複数のデータを折り返して表示する

GridViewの1行に複数のデータを折り返して表示する

データ項目が多い場合、横1列にデータを並べていくのではなく、途中で折り返して表示したいといった場合があります。テンプレートフィールドを利用し、GridViewでこのような表示を実現してみます。

01

データとして以下のようなものを用意しました。

02

このテーブルをページにドラッグ アンド ドロップして作成されるGridViewの編集を有効にします。

注:説明の手間が少なくてすむのでドラッグ アンド ドロップでGridViewとSqlDataSourceを作成しています。
このあたりの詳細については別にきちんと学習されることをお勧めします。

03

GridViewのスマートタグで列の編集をクリックします。表示されているフィールドウィンドウの選択されたフィールドからtel、zip、addressを削除します

04

使用できるフィールドからTemplateFieldを選択し、追加ボタンをクリックします。選択されたフィールドにTempateFieldが追加されます。

05

OKボタンをクリックしてフィールドウィンドウを閉じます。
GridViewのスマートタグでテンプレートの編集をクリックします。ItemTempateが表示されるので、そこに「Tel:」と直接記述し、Labelコントロールを貼り付けます。

06

LabelコントロールのスマートタグでDataBindingsの編集をクリックします。表示されるウィンドウでTextプロパティにtelフィールドをバインドします。

07

同じ要領で郵便番号(zipフィールド)と住所(addressフィールド)を表示するLabelコントロールをItemTemplate内に作成します。住所を表示するLabelコントロールを改行した2行目に貼り付けるように気をつけてください。

08

GridViewのスマートタグから表示をEditItemTemplateに変更します。

09

ItemTempateのときと同じ要領で今度はTextBoxコントロールを貼り付けていきます。住所の入力欄となるTextBoxだけ大きさを調整しています。

10

テンプレートの編集を終了し、デバッグを実行します。

11

とりあえず動くものはできていると思います。これがどうやって動いているか、ということについては各自考えてみてください。きちんと理解できてないと、ちょっとした変更でも自分ではできなくなってしまいますからね。

カテゴリー:.NET, ASP.NET 備忘録
  1. まだコメントはありません。
  1. No trackbacks yet.

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。