.NET TIPS

［ASP.NET］DataGridコントロールのヘッダーを結合するには？

デジタルアドバンテージ
2003/11/28

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

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

　セルを結合していると前述したが、実際にはセル同士を結合するという機能はなく、このサンプル・プログラムでは次のようにしてヘッダー内のセルを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 = "Build Insiderの新着記事";
  }
}

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

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

<%@ Page Language="C#" EnableViewState="false" %>
<%@ Import Namespace="System.Data" %>

<html>
<head>
  <script runat="server">
    void Page_Load(object sender, EventArgs e) {
      DataSet ds = new DataSet();
      ds.ReadXml("http://www.buildinsider.net/rss");

      MyGrid.DataSource = ds.Tables["item"];
      MyGrid.DataBind();
    }

    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
          = "Build Insiderの新着記事";
      }
    }
  </script>
</head>

<body>
  <form runat="server">
    <asp:DataGrid id="MyGrid"
        AutoGenerateColumns="false"
        OnItemDataBound="MyGrid_ItemBound"
        CellPadding="4"
        CellSpacing="3"
        BackColor="#BB2255"
        BorderWidth="0"
        runat="server" >

      <HeaderStyle BackColor="#BB2255"
          ForeColor="white" Font-Size="20pt" />
      <ItemStyle   BackColor="#FFEEEE" />
      <AlternatingItemStyle BackColor="#FFDDDD" />

      <Columns>
        <asp:BoundColumn DataField="title" />
        <asp:BoundColumn DataField="encoded" />
        <asp:BoundColumn DataField="pubDate" />
      </Columns>

    </asp:DataGrid>
  </form>
</body>
</html>
ヘッダーのセルを結合するC#のC#のサンプル・プログラム（joinheader.aspx）

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

カテゴリ：Webフォーム　処理対象：DataGridコントロール
使用ライブラリ：DataGridコントロール
使用ライブラリ：TableCellCollectionクラス（System.Web.UI.WebControls名前空間）
関連TIPS：［ASP.NET］DataGridコントロールの各セルにアクセスするには？
関連TIPS：［ASP.NET］DataGridコントロールですべての行にアクセスするには？
関連TIPS：［ASP.NET］DataGridコントロールで特定のカラムのみを表示するには？
関連TIPS：［ASP.NET］DataGridコントロールの同一列内のセルを結合するには？
　
この記事と関連性の高い別の.NET TIPS
［ASP.NET］DataGridコントロールの同一列内のセルを結合するには？
DataGridViewコントロールで特定の値のセルを強調表示するには？
［ASP.NET］DataGridコントロールのヘッダーを複数行にするには？
［ASP.NET］DataGridコントロールの各セルにアクセスするには？
DataGridViewコントロールの連続する同じ値のセルを1つにまとめるには？
DataGridViewコントロールで右クリックによるセル選択を可能にするには？
DataGridコントロールでクリックされたセルの位置を取得するには？
［ASP.NET］DataGridコントロールですべての行にアクセスするには？
DataGridViewコントロールで選択されている行やセルを調べるには？
［ASP.NET］DataGridコントロールのヘッダーにソートされた方向を表示するには？
このリストは、（株）デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。
generated by

「.NET TIPS」


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 記事ランキング

本日 月間
＠IT