.NET TIPS

[ASP.NET]DataGridコントロールで特定のカラムのみを表示するには?

デジタルアドバンテージ
2003/09/19

 「TIPS:[ASP.NET]DataGridコントロールでデータセットを表示するには?」で解説しているように、ASP.NETのDataGridコントロールを使うと、デフォルトではデータソースに指定したデータテーブル(DataTableオブジェクト)のすべてのカラムが表示されてしまう。ここではテーブル内の特定のカラムのみをDataGridコントロールで表示するための方法について解説する。

手順1:AutoGenerateColumns属性をfalseに設定

 特定のカラムのみを表示するたのに必要な作業は2つある。まず、DataGridコントロールのAutoGenerateColumns属性をfalseにセットして、カラムが自動生成されないようにしておく。

  <asp:DataGrid id="MyGrid" AutoGenerateColumns="false" runat="server" >
    ……
  </asp:DataGrid>

 ちなみにこの指定は、次のようにコードからDataGridコントロールのAutoGenerateColumnsプロパティにfalseを代入しても同じ意味となる。

MyGrid.AutoGenerateColumns = false;

手順2:<asp:BoundColumn>要素によるカラムの指定

 次に必要な作業は、表示するカラムの指定である。これは、<asp:DataGrid>要素内に<Columns>要素を記述し、さらにその中で、表示するカラムを<asp:BoundColumn>要素により指定する。<asp:BoundColumn>要素は「連結列」と呼ばれるものだ。

 ここでは「TIPS:[ASP.NET]DataGridコントロールでデータセットを表示するには?」で使用したサンプル・プログラムをベースに解説を進める。そのサンプル・プログラム(simpledg1.aspx)では、データソースとしてBuild Insiderの新着記事を記述したRSS情報を読み込んだデータテーブルを使用していた。このデータテーブルには記事タイトルを示す「title」カラムと、記事の概要を示す「encoded」カラムがある。例えばこの2つのカラムだけをDataGridコントロールのカラムとして使用する場合には、<asp:DataGrid>要素の記述は次のようになる。

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

 <asp:BoundColumn>要素では、まずDataField属性によりデータソースに指定したデータテーブルの対象となるカラムの名前を指定する。これがないとそのカラムはすべて空白となってしまう。また、HeaderText属性により各カラムのヘッダー行に表示されるテキストを任意に設定できる。

特定のカラムのみを表示するサンプル・プログラム

 以上の修正を加えたサンプル・プログラムは次のようになる。Page_Loadメソッドには手を加えていない。

<%@ 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();
    }
  </script>
</head>

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

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


    </asp:DataGrid>
  </form>
</body>
</html>
特定のカラムのみを表示するC#のサンプル・プログラム(bounddg1.aspx)

 このサンプル・プログラムの実行結果は次のようになる。

サンプル・プログラム(bounddg1.aspx)の実行結果

グリッドのデザイン

 上記のサンプル・プログラムは何の装飾も行っていないので、表示された表は見やすいとはいい難い。背景色を設定するなどして、次の画面のような表にしてみよう。

デザインを施したサンプル・プログラム(bounddg2.aspx)の実行結果

 上記の画面で設定しているデザイン項目は、最低限必要と思われる次の4点だ。

  • 表示テキストとセルの境界との間隔(CellPadding属性)
  • ヘッダー行の背景色と文字色(<HeaderStyle>要素のBackColor属性とForeColor属性)
  • 各行の背景色(<ItemStyle>要素のBackColor属性)
  • 偶数行の背景色(<AlternatingItemStyle>要素のBackColor属性)

 それぞれの記述方法については以下のソース・コードをご覧いただきたい。1行おきのスタイル設定ができる<AlternatingItemStyle>要素は非常に便利な仕組みである。

<%@ 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();
    }
  </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>
デザインを施したサンプル・プログラム(bounddg2.aspx)

 いうまでもないだろうが、Visual Studio .NETの「プロパティ・ビルダ」を使用すれば、GUIでDataGridコントロールの表示状態を確認しながら種々のプロパティを設定可能だ。また「自動フォーマット」としていくつかのデザインのパターンも用意されている。End of Article

カテゴリ:Webフォーム 処理対象:DataGridコントロール
使用ライブラリ:DataGridコントロール(System.Web.UI.WebControls名前空間)
使用ライブラリ:BoundColumnクラス(System.Web.UI.WebControls名前空間)
関連TIPS:[ASP.NET]DataGridコントロールでデータセットを表示するには?
 
この記事と関連性の高い別の.NET TIPS
[ASP.NET]DataGridコントロールでデータセットを表示するには?
[ASP.NET]DataGridコントロールの行にデータを埋め込むには?
[ASP.NET]DataGridコントロールでハイパーリンクを表示するには?
[ASP.NET]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 記事ランキング

本日 月間