解説

実例で学ぶASP.NETプログラミング

第6回 ASP.NETの真骨頂-DataGridコントロールで一覧ページを制する

小田原 貴樹(うりゅう)
2003/05/31

 デザイナ画面上では、自動的に生成された情報が一覧表形式で表示されているのが分かる。これまでASPなどで一覧表系のページを作成したことがあるならば、まさに感無量の便利さ、どちらかというとAccessのような操作性の良さだ。デザインにこだわらないページであれば、この自動生成でも十分だが、ショッピング・サイトのページなので、列ごとに細かな設定をしていこう。デモ・サイトの商品一覧ページのようなレイアウトにするためには、DataGridコントロールの「プロパティ・ビルダ」を利用すると簡単に設定できる。以下の手順を参照してほしい。

DataGridコントロールの設定:手順1
配置したDataGridコントロール「PGRID」をクリックするとプロパティ・ウィンドウ内に表示されるリンク「プロパティ ビルダ」をクリックする。

DataGridコントロールの設定:手順2
プロパティ・ビルダのタブ[列]を選び、画面上部にある[実行時に自動的に列を作成する]のチェックを外す。このチェックを外さないと任意のレイアウトを編集することはできない。

DataGridコントロールの設定:手順3
[実行時に自動的に列を作成する]のチェックを外した段階では、表示する列が何も選択されていないことになるので、[使用可能な列]から必要な列を選択し、[>]ボタンを押して[選択された列]に挿入していく。[選択された列]内に表示されている列が、DataGridコントロールに表示される列となる。

DataGridコントロールの設定:手順4
[選択された列]の各列に対して個別の設定を行っていく。この画面は特に注意の必要な小売価格を通貨表示にするための設定。[データフォーマット式]に通貨型で表示する書式である「{0:C}」を設定している。

DataGridコントロールの設定:手順5
プロパティ・ビルダのタブ[書式]内では、DataGridコントロールのデザインを設定できる。画面はDataGrid全体の背景色として「White」を設定している。

DataGridコントロールの設定:手順6
タブ[書式]内のオブジェクト「列」では、先ほど設定した各列の内容が設定できる。各列の幅やデータの表示位置などはここで設定する。画面は一番左の列「写真」の幅を「32px」に設定している。

 上記の手順説明で各列やDataGridコントロールのレイアウト書式などを全て解説すると、膨大な量になってしまうため、これ以上の個別解説は割愛する。細かく知りたい方には申しわけないが、詳細はソース・コードを参照していただきたい。自分オリジナルのレイアウトにしてみるのも面白いだろう。


 INDEX
  実例で学ぶASP.NETプログラミング
  第6回 ASP.NETの真骨頂-DataGridコントロールで一覧ページを制する
    1.商品一覧ページの設計
    2.表示用のDataSetオブジェクトを準備する
  3.DataGridコントロールの「プロパティ・ビルダ」
    4.「自動フォーマット」によるDataGridコントロールのデザイン
    5.残りの要素の配置と全体のデザイン調整
 
インデックス・ページヘ  「解説 :実例で学ぶASP.NETプログラミング」


Insider.NET フォーラム 新着記事
  • 第2回 簡潔なコーディングのために (2017/7/26)
     ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
     Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回 明瞭なコーディングのために (2017/7/19)
     C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator (2017/7/18)
     Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

Insider.NET 記事ランキング

本日 月間