.NET TIPS

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

デジタルアドバンテージ
2003/12/05

　「TIPS：［ASP.NET］DataGridコントロールのヘッダーを結合するには？」では、DataGridコントロールのヘッダー内のセルを結合することにより、ヘッダーを表の見出しなどに利用する方法を示したが、当然ながらその方法ではもともとあった列名が表示できなくなる。

　ここでは、データ連結後に新しい行をグリッドに追加することにより、ヘッダーを複数行にする方法について解説する。この方法を使えば、次の画面のようなグリッドを表示することが可能だ。

ヘッダーに複数の行を表示するサンプル・プログラム（multiheader.aspx）の実行画面

行とセルの作成

　新しい行をグリッドに追加するには、まず始めに追加する行を独自に作成する必要がある。「TIPS：［ASP.NET］DataGridコントロールの各セルにアクセスするには？」で解説しているように、DataGridコントロールの行は、DataGridItemクラス（System.Web.UI.WebControls名前空間）のオブジェクトである。また、行にはセルとしてTableCellクラス（System.Web.UI.WebControls名前空間）のオブジェクトが（通常は列数分）含まれている。つまり、行とともにその中のセルも独自に作成しなければならない。セルに表示されるテキストは、TableCellオブジェクトのTextプロパティで設定できる。

　まず、セルであるTableCellオブジェクトを作成するためのコードは次のようになる。

TableCell cell = new TableCell();
cell.ColumnSpan = 2;
cell.Font.Size = 20;
cell.Text = "Build Insiderの新着記事";

　ここではColumnSpanプロパティにより、このセルが占める列数を指定している。上で示したサンプル・プログラムの画面では、ヘッダーに追加する行に含まれるセルはこのセル1つだけだ。

　続いて、行であるDataGridItemオブジェクトを作成し、いま作成したセルをCellsプロパティに追加する。Cellsプロパティは、行に含まれるセルを保持しているコレクションである。

DataGridItem row = new DataGridItem(-1, -1, ListItemType.Header);
row.Cells.Add(cell);

　DataGridItemクラスのコンストラクタのパラメータには、DataGridオブジェクトのItemsプロパティでのインデックス、その行が連結されているデータソース内の項目のインデックス、行のタイプ（ListItemType列挙体の値）を指定するのだが、ここでは通常のヘッダー行の値と同じ内容を設定している。行のタイプとしてListItemType.Headerを指定しているため、ここで作成した行のスタイルは既存のヘッダーと同じものになる。

作成した行をグリッドに追加

　作成した行をDataGridコントロールの先頭の行として追加すればヘッダーの複数行化は完成なのだが、これを行うためにはDataGridコントロールに内包されるコントロールのツリーをよく把握しておかなければならない

　通常、DataGridコントロールのコントロール・ツリーは次の画面のようになっている（コントロールのツリーはトレース情報表示を有効にすると表示される。これについては「TIPS：［ASP.NET］ページのトレース情報を出力するには？」で解説している）。

DataGridコントロールのコントロール・ツリー
DataGridオブジェクト（）は子コントロールとしてDataGridTableオブジェクト（）を持っている。行であるDataGridItemオブジェクト（）はDataGridTableオブジェクトの子コントロールである。

　このツリーから分かるように、行であるDataGridItemオブジェクト（）はすべて、DataGridコントロール（）の最初の子コントロールであるDataGridTableオブジェクト（）の子コントロールであるということだ。よって、いま作成した行をDataGridTableオブジェクトが保持している子コントロールの先頭の要素として挿入すれば、その行はグリッドの最初の行として表示されることになる。このためのコードは次のような1行で記述できる。

MyGrid.Controls[0].Controls.AddAt(0, row);

　AddAtメソッドは、Controlsプロパティの型であるControlCollectionクラス（System.Web.UI名前空間）が持つメソッドで、コレクションの任意の位置に子コントロールを追加することができる。

　ちなみに、DataGridTableというクラスはinternalなクラスであるため、プログラムからは直接使用することはできず、このためリファレンス・マニュアルにも記述されていない。しかし、このクラスはTableクラス（System.Web.UI.WebControls名前空間）を継承しているため、上記のコードは次のようにも記述できる。

Table table = (Table)MyGrid.Controls[0];
table.Rows.AddAt(0, row);

ヘッダーに複数の行を表示するサンプル・プログラム

　サンプル・プログラムのソース・コードは次のようになっている。DataGridTableオブジェクトへの行の追加は、実際にDataGridオブジェクトが作成された後、つまりデータ連結を行った後でのみ可能だ。ここではDataBindメソッド呼び出しに続いて、ヘッダー行の作成／追加を行っている（これはItemDataBoundイベントのタイミングでも可能）。

<%@ 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();

      TableCell cell = new TableCell();
      cell.ColumnSpan = 2;
      cell.Font.Size = 20;
      cell.Text = "Build Insiderの新着記事";

      DataGridItem row
          = new DataGridItem(-1, -1, ListItemType.Header);
      row.Cells.Add(cell);

      MyGrid.Controls[0].Controls.AddAt(0, row);
    }
  </script>
</head>

<body>
  <form runat="server">
    <asp:DataGrid id="MyGrid"
        AutoGenerateColumns="false"
        CellPadding="4"
        runat="server" >

      <HeaderStyle BackColor="#BB2255" ForeColor="white" />
      <ItemStyle   BackColor="#FFEEEE" />
      <AlternatingItemStyle BackColor="#FFDDDD" />

      <Columns>
        <asp:BoundColumn
            DataField="title" HeaderText="タイトル" />
        <asp:BoundColumn
            DataField="encoded" HeaderText="概要" />
      </Columns>

    </asp:DataGrid>
  </form>
</body>
</html>
ヘッダーに複数の行を表示するC#のサンプル・プログラム（multiheader.aspx）

　なお、太字で示したコード以外については「TIPS：［ASP.NET］DataGridコントロールで特定のカラムのみを表示するには？」などで解説している。

　ここではグリッドの先頭に1行追加しているだけだが、同様の方法により、任意の位置に任意のタイプの行を追加することができる。End of Article

カテゴリ：Webフォーム　処理対象：DataGridコントロール
使用ライブラリ：DataGridコントロール
使用ライブラリ：DataGridItemクラス（System.Web.UI.WebControls名前空間）
使用ライブラリ：TableCellクラス（System.Web.UI.WebControls名前空間）
使用ライブラリ：ControlCollectionクラス（System.Web.UI名前空間）
使用ライブラリ：Tableクラス（System.Web.UI.WebControls名前空間）
関連TIPS：［ASP.NET］DataGridコントロールのヘッダーを結合するには？
関連TIPS：［ASP.NET］DataGridコントロールの各セルにアクセスするには？
関連TIPS：［ASP.NET］ページのトレース情報を出力するには？
関連TIPS：［ASP.NET］DataGridコントロールで特定のカラムのみを表示するには？
　
この記事と関連性の高い別の.NET TIPS
［ASP.NET］DataGridコントロールですべての行にアクセスするには？
［ASP.NET］DataGridコントロールのヘッダーを結合するには？
［ASP.NET］DataGridコントロールの各セルにアクセスするには？
［ASP.NET］DataGridコントロールの同一列内のセルを結合するには？
DataGridコントロールを行選択モードにするには？
［ASP.NET］DataGridコントロールの編集用テキストボックスを大きくするには？
［ASP.NET］DataGridコントロールのヘッダーにソートされた方向を表示するには？
［ASP.NET］DataGridコントロールに選択ボタンを追加するには？
DataGridコントロールでクリックされたセルの位置を取得するには？
［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