Tweet

.NET TIPS ［ASP.NET］DataGridコントロールのヘッダーを結合するには？ デジタルアドバンテージ 2003/11/28

　DataGridコントロールのヘッダーは各列の列名を表示するためのものだが、ヘッダー行内のセルを結合して、表の見出しとして利用することができる。次のサンプル・プログラムでは、もともと3つあったヘッダーのセルを1つのセルに結合している。

ヘッダーのセルを結合するサンプル・プログラム（joinheader.aspx）の実行画面

joinheader.aspxの実行（www.iwebmethod.netのページ）

　セルを結合していると前述したが、実際にはセル同士を結合するという機能はなく、このサンプル・プログラムでは次のようにしてヘッダー内のセルを1つにしている。

1. 行に含まれている3つのセルのうち、2つのセルを削除する
2. 残った1つのセルが占める列数（RowSpanプロパティ）を「3」に設定する

セルの削除

　「TIPS：［ASP.NET］DataGridコントロールの各セルにアクセスするには？」でも解説しているように、グリッド内の各行はDataGridItemオブジェクトによって表される。また、行に含まれているセルはTableCellオブジェクトによって表され、DataGridItemオブジェクトは、それに含まれているセルをCellsプロパティに保持している。Cellsプロパティはセルのコレクションであり、実際にはTableCellCollectionクラス（System.Web.UI.WebControls）のオブジェクトである。

　行からセルを削除するには、TableCellCollectionクラスのRemoveAtメソッドかRemoveメソッドを使用する。RemoveAtメソッドでは、パラメータで指定した位置にあるセルをコレクションから削除できる。

　例えば、ヘッダー行を示すDataGridItemオブジェクト「header」があり、3つのセルが含まれているとすると、それが保持している左から2番目、3番目のセルは次のようにして削除できる。

header.Cells.RemoveAt(2); // 3番目のセルを削除
header.Cells.RemoveAt(1); // 2番目のセルを削除


　パラメータで指定するセルのインデックス番号は0から開始する。Cellsプロパティはコレクションなので、セルを1つ削除すると削除されたセル以降のセルのインデックス番号も1つずれる。そのため、この2行は次のような順序で記述すると実行時にエラーとなるので注意が必要だ。

header.Cells.RemoveAt(1); // 2番目のセルを削除
header.Cells.RemoveAt(2); // この時点では3番目のセルは存在しない


　ちなみに、次の記述は正しい。

header.Cells.RemoveAt(1);
header.Cells.RemoveAt(1);


ヘッダーへのアクセス

　グリッド内のセルの削除やセルのプロパティの操作はDataGridオブジェクトが作成された後、つまりデータ連結後に行う必要がある。ヘッダーを示すDataGridItemオブジェクトへのアクセスは、ItemDataBoundイベントあるいはItemCreatedイベントが発生するタイミングで可能だ。これについては「TIPS：［ASP.NET］DataGridコントロールですべての行にアクセスするには？」で解説している。

　今回のサンプル・プログラムではItemDataBoundイベントを利用しており、そのイベント・ハンドラを次のように記述している。

void MyGrid_ItemBound(object sender, DataGridItemEventArgs e) {
  if (e.Item.ItemType == ListItemType.Header) {
    e.Item.Cells.RemoveAt(2);
    e.Item.Cells.RemoveAt(1);
    e.Item.Cells[0].ColumnSpan = 3;
    e.Item.Cells[0].Text = "Insider.NETフォーラムの新着記事15本";
  }
}


ヘッダーのセルを結合するサンプル・プログラム

　サンプル・プログラムのソース・コードは次のようになっている。これは「［ASP.NET］DataGridコントロールで特定のカラムのみを表示するには？」で示したサンプル・プログラム（bounddg2.aspx）をベースに作成したものである。

　ここではヘッダー内のセルの結合について解説したが、同じようにして通常の行やフッターでのセルの結合が可能である。また、同一列内での縦方向のセルの結合については、「TIPS：［ASP.NET］DataGridコントロールの同一列内のセルを結合するには？」で解説している。

この記事と関連性の高い別の.NET TIPS ［ASP.NET］DataGridコントロールの同一列内のセルを結合するには？ ［ASP.NET］DataGridコントロールの各セルにアクセスするには？ ［ASP.NET］DataGridコントロールのヘッダーを複数行にするには？ DataGridViewコントロールで特定の値のセルを強調表示するには？ DataGridコントロールでクリックされたセルの位置を取得するには？ このリストは、（株）デジタルアドバンテージが開発した 自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。 generated by

「.NET TIPS」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード