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

本日 月間