.NET TIPS

［ASP.NET］DataGridコントロールの列にボタンを表示するには？

デジタルアドバンテージ
2003/10/31

　DataGridコントロールには、Buttonコントロールを明示的に使用しなくても、ボタンが配置された列を表示する「ボタン列」が用意されている。グリッド内の特定の行に対して何らかの操作を行うような処理が必要となる場合、ボタン列のボタンにより処理対象となる行を指定することができる。

　次の画面は、今回作成するサンプル・プログラムの実行結果である。このプログラムでは、各行の先頭にある2つのボタンをクリックすることにより、その行の背景色を金色あるいは銀色に変更することができる。2列目の［銀賞］ボタンは、外見は単なるハイパーリンクであるが、後述しているようにこれは「リンクボタン」と呼ばれるものだ。

ボタン列を使用したサンプル・プログラム（buttondg.aspx）

ボタン列の定義

　ボタンが表示されるボタン列は、DataGridコントロールの列を定義する<Columns>要素に<asp:ButtonColumn>要素を追加して記述する。

　次の記述例は、グリッド内に2つのボタン列を定義したものだ。

  <asp:DataGrid ……>
    <Columns>
      <asp:ButtonColumn
          Text="金賞"
          CommandName="gold"
          ButtonType="PushButton"
          HeaderStyle-Wrap="false"
          HeaderText="背景色1" />
      <asp:ButtonColumn
          Text="銀賞"
          CommandName="silver"
          ButtonType="LinkButton"
          HeaderStyle-Wrap="false"
          HeaderText="背景色2" />
      ……
    </Columns>
  </asp:DataGrid>

　Text属性ではボタンに表示されるテキストを設定する。CommandName属性は、複数のボタン列を使用する場合に、どの列のボタンがクリックされたかを識別するためのものだ（具体的な利用法は後述）。

　ButtonType属性ではボタンの形状を指定する。ボタン列では、通常のプッシュボタン（PushButton）と、外見がハイパーリンクと同様なリンクボタン（LinkButton）の2種類のボタンを選択できる。機能的にはどちらもまったく同じで、デフォルト（この属性を指定しない場合）ではボタン列のボタンはリンクボタンとなる。

　また、HeaderStyle-Wrap属性をfalseに設定することにより、その列のヘッダー行の文字列を折り返さずに表示できる。この属性はボタン列固有のものではないが、ボタン列のような幅の狭い列ではヘッダー行を1行に納めるためにしばしば必要になる。

ボタンのイベント・ハンドラ

　DataGridコントロールでは、ボタン列のボタンがクリックされるとItemCommandイベントが発生する。このイベントに対するイベント・ハンドラは、次のように<asp:DataGrid>タグのOnItemCommand属性で指定できる。

  <asp:DataGrid id="MyGrid"
      OnItemCommand="MyGrid_Command"
      AutoGenerateColumns="false"
      CellPadding="4"
      runat="server" >
    ……
  </asp:DataGrid>

　この例の場合、グリッド内にあるボタン列のボタンは、どれがクリックされてもMyGrid_Commandメソッドが呼び出されることになる。今回のサンプル・プログラムでは、イベント・ハンドラとして次のようなメソッドを記述している。

void MyGrid_Command(object sender, DataGridCommandEventArgs e) {
  switch (e.CommandName) {
    case "gold":
      e.Item.BackColor = Color.Gold;
      break;
    case "silver":
      e.Item.BackColor = Color.Silver;
      break;
  }
}

　このメソッドの第2パラメータであるDataGridCommandEventArgsクラス（System.Web.UI.WebControls名前空間）のオブジェクトには、クリックされたボタンに関するいくつかの情報が納められている。

　まず、CommandNameプロパティには、ボタン列を定義したときのCommandName属性の値が入っている。これによりどの列のボタンがクリックされたかを知ることができる。複数のボタン列を使用している場合には、この値により処理を分岐することになるだろう。

　そして、クリックされた行（DataGridItemオブジェクト）をItemプロパティから取得できる。グリッド内の行や、行に含まれるセルの構成については「TIPS：［ASP.NET］DataGridコントロールの各セルにアクセスするには？」で解説している。

ボタン列を使用したサンプル・プログラム

　冒頭で示したサンプル・プログラムのソース・コードは次のようになる。ここでは「TIPS：［ASP.NET］DataGridコントロールで特定のカラムのみを表示するには？」で示したサンプル・プログラム（bounddg2.aspx）をベースにして、ボタン列とそのイベント・ハンドラを追加している。太字部分がボタンを追加するために必要なコードだ。

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

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

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

    void MyGrid_Command(object sender, DataGridCommandEventArgs e) {
      switch (e.CommandName) {
        case "gold":
          e.Item.BackColor = Color.Gold;
          break;
        case "silver":
          e.Item.BackColor = Color.Silver;
          break;
      }
    }
  </script>
</head>

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

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

      <Columns>
        <asp:ButtonColumn
            Text="金賞"
            CommandName="gold"
            ButtonType="PushButton"
            HeaderStyle-Wrap="false"
            HeaderText="背景色1" />
        <asp:ButtonColumn
            Text="銀賞"
            CommandName="silver"
            ButtonType="LinkButton"
            HeaderStyle-Wrap="false"
            HeaderText="背景色2" />
        <asp:BoundColumn
            DataField="title" HeaderText="タイトル" />
        <asp:BoundColumn
            DataField="encoded" HeaderText="概要" />
      </Columns>

    </asp:DataGrid>
  </form>
</body>
</html>
ボタン列を使用したC#のサンプル・プログラム（buttondg.aspx）

　ボタンのクリックにより設定された行の背景色は、DataGridコントロールのビューステートに保存される。ボタンがクリックされポストバックが発生しても、すでに選択している行の背景色がクリアされないのはこのためだ。ビューステートについては「TIPS：［ASP.NET］ビューステートに保存されるものは？」で解説している。

　なお、ボタン列を定義するときにCommandName属性で「select」を指定すると、ここで解説した挙動に加えて「選択ボタン」としての機能が働く。これについては「TIPS：［ASP.NET］DataGridコントロールに選択ボタンを追加するには？」で解説している。End of Article

カテゴリ：Webフォーム　処理対象：DataGridコントロール
使用ライブラリ：DataGridコントロール
使用ライブラリ：Labelコントロール
使用ライブラリ：DataGridCommandEventArgsクラス（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コントロールのフッターに入力機能を追加するには？
［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 記事ランキング

本日 月間
＠IT