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

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

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

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

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

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

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

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

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

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

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

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

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

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

◆ この記事についてのご意見、ご質問は以下のフォーラムにお願いします ◆
http://dotnetfan.org/forums/671/ShowPost.aspx

公開 21-04-2006 12:15 投稿者 ono
カテゴリ:

コメント

コメントはありません
この投稿に対する新規コメントはできません
SkinName:iroha_Blog2
Powered by Community Server, by Telligent Systems