GridViewの使い方

大量のデータを扱うときに、いかに見やすく、高速に表示させるかというのは重要なテーマです。
GridViewコントロールは、表形式の出力をいとも簡単に行ってくれる出来る子なのですが、機能が多くて、いきなり使おうとしても何をどうしていいのやらと、取っ付きにくい性質もあります。
初めてGridViewを使おうとしている人に向けて、使い方を解説していきます。
※スクリーンショットはVS2005ですが、以降でも大体同じです（たぶん）。

とりあえず使ってみる

カレンダー的なものをGridViewで表示させてみます。
ダイジェストはこちら。

コントロールを貼る
データをGridViewに設定する
表示の仕方を調整する
オートフォーマットのスタイルを使う

1.コントロールを貼る

GridViewコントロールを配置します。

配置します。

配置して終わり。とりあえず、これだけです。

2.データをGridViewに設定する

データの元となるカレンダーのDataTableをつくります
GridViewのDataSourceにDataTableを設定

設定されたデータを反映させるために、DataBindメソッドを呼び出します。

ソースコード

protected void Page_Load(object sender, EventArgs e) {
  // データをつくる
  DataTable table = new DataTable();
  table.Columns.Add("日付");
  table.Columns.Add("曜日");

  int year = DateTime.Today.Year;
  int month = DateTime.Today.Month;
  DateTime dateTime = new DateTime(year, month, 1);
  int count = DateTime.DaysInMonth(year, month);
  for (int i = 0; i < count; i++) {
    DataRow row = table.NewRow();
    row["日付"] = dateTime.ToShortDateString();
    row["曜日"] = dateTime.DayOfWeek.ToString();
    table.Rows.Add(row);
    dateTime = dateTime.AddDays(1);
  }

  // GridViewに設定する
  this.GridView1.DataSource = table;
  this.GridView1.DataBind(); // DataSourceに設定した値を反映させる
}

DataTableの通りに対応するヘッダ行が自動的につくられます。
⇒GridView.AutoGeneralColumnsプロパティがデフォルトでtrueに設定されているので、このように動作します。カラムを都合のよいようにカスタマイズする場合は、この値をfalseにすると勝手に行が作られることはありません。

GridViewコントロール自体は、フォームデザイン上では配置しただけ。その後、DataSourceの設定とDataBindメソッドの呼び出しを行っているだけですが、このようにDataTableの中身を表示することができます。

3.表示の仕方を調整する

単にデータを表示しただけですが、表示の仕方を調整してみましょう。

曜日の表示を日本語にする
土日の行に色を塗る

DataTableに設定する段階で整形すればいいのですが、このようなデータは大体の場合、表示とは無関係のところで生成されるのが一般的です。ごく小規模のプログラムを除けば見せ方を念頭においてデータが作られることは少ないと思います。
GridViewのDataSourceにデータがすでに設定されているとして、表示の段階で都合がよいように整形します。

DataBindメソッドが呼ばれた後に、GridViewの行が作成されるときに発生するRowCreatedイベントを追加します。
このイベントの中で、指定列の値の変更や、行の背景色の設定を行うことができます。

ソースコード

protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e) {
  if (e.Row.RowType == DataControlRowType.DataRow) { // データ行のみ
    // 曜日を日本語に変換
    DataRow row = (((DataRowView)e.Row.DataItem).Row);
    string dayOfWeek = ConvertDayOfWeekString(row["曜日"].ToString());
    row["曜日"] = dayOfWeek;

    // 土曜と日曜に背景色をつける
    if (dayOfWeek == "土") {
      e.Row.BackColor = Color.LightGray;
    } else if (dayOfWeek == "日") {
      e.Row.BackColor = Color.LightPink;
    }
  }
}

// 曜日を日本語に変換する
protected string ConvertDayOfWeekString(string dayOfWeek) {
  string ret = "";
  switch (dayOfWeek) {
    case "Sunday": ret = "日"; break;
    case "Monday": ret = "月"; break;
    case "Tuesday": ret = "火"; break;
    case "Wednesday": ret = "水"; break;
    case "Thursday": ret = "木"; break;
    case "Friday": ret = "金"; break;
    case "Saturday": ret = "土"; break;
  }
  return ret;
}

実行結果

実行すると下のように表示されます。

4.オートフォーマットのスタイルを使う

GridViewには、表を整形するためのスタイルとしてあらかじめ用意されているものがあるので、それらを使うことができます。
表の一行一行を明示させるため、奇数行と偶数行をそれぞれ色分けするというスタイルも用意されています。

選ぶだけです。
実用的なので文句はないんですけれど、グッとくるようなデザインは期待しないであげてください。

こちらもどうぞ。

週末ラボ

2010/03/15