.NET TIPS

［ASP.NET］DataGridコントロールに選択ボタンを追加するには？

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

　「TIPS：［ASP.NET］DataGridコントロールの列にボタンを表示するには？」では、<asp:ButtonColumn>要素によりボタン列を定義する方法について解説した。そこで使用したボタン列のボタンは、通常のButtonコントロールと同様の汎用的なものである。つまり、ボタンがクリックされると、それに対応したイベント・ハンドラが呼び出されるというものだ。しかし実際には、DataGridコントロールに追加されたボタンは、特定の行を指定するという単純な用途で使用される場合が多い。そこで、行を選択するのに特化した「選択ボタン」が用意されている。

　選択ボタンを使用するには、次のようにボタン列の定義でCommandName属性に「select」を指定するだけだ。

  <asp:DataGrid ……>
    <Columns>
      <asp:ButtonColumn
          Text="選択"
          CommandName="select"
          ButtonType="PushButton"
          HeaderStyle-Wrap="false"
          HeaderText="行選択" />
      ……
    </Columns>
  </asp:DataGrid>

　この指定により、選択ボタンがクリックされたときには、通常のボタン列のボタンとしての挙動に加えて以下のような処理がDataGridオブジェクトで行われる。

  • SelectedIndexChangedイベントが発生する（OnSelectedIndexChanged属性で指定したメソッドが呼び出される）

  • 選択した行のインデックス番号がDataGridオブジェクトのSelectedIndexプロパティにセットされる

  • 選択した行（DataGridItemオブジェクト）がDataGridオブジェクトのSelectedItemプロパティにセットされる

  • <SelectedItemStyle>要素で定義しているスタイル（フォントや背景色など）が選択した行に適用される

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

　次に示すプログラムは、選択ボタンを使用したサンプルである。このプログラムでは各行に［選択］ボタンを表示しており、ボタンがクリックされるとその行の文字が太字なり、背景色が金色になる。また、選択した行の行番号と「タイトル」列で表示している内容を、グリッドのすぐ上にあるLabelコントロールに表示する。

　なお、太字部分が今回のポイントとなる部分だ。それ以外のコードについての解説は「TIPS：［ASP.NET］DataGridコントロールで特定のカラムのみを表示するには？」を参照していただきたい。

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

<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 Grid_Select(object sender, EventArgs e) {
      MyLabel.Text = String.Format(
                        "{0}行目「{1}」が選択されました",
                        MyGrid.SelectedIndex + 1,
                        MyGrid.SelectedItem.Cells[1].Text);
    }
  </script>
</head>

<body>
  <form runat="server">

    <asp:Label runat="server" id="MyLabel" />
    <br>

    <asp:DataGrid id="MyGrid"
        OnSelectedIndexChanged="Grid_Select"
        AutoGenerateColumns="false"
        CellPadding="4"
        runat="server" >

      <HeaderStyle BackColor="#BB2255" ForeColor="white" />
      <ItemStyle   BackColor="#FFEEEE" />
      <AlternatingItemStyle BackColor="#FFDDDD" />
      <SelectedItemStyle BackColor="Gold" Font-Bold="true" />

      <Columns>
        <asp:ButtonColumn
            Text="選択"
            CommandName="select"
            ButtonType="PushButton"
            HeaderStyle-Wrap="false"
            HeaderText="行選択" />
        <asp:BoundColumn
            DataField="title" HeaderText="タイトル" />
        <asp:BoundColumn
            DataField="encoded" HeaderText="概要" />
      </Columns>

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

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

サンプル・プログラム（selectdg.aspx）の実行画面
［選択］ボタンをクリックすると、その行の文字が太字なり、背景色が金色になる。また、選択した行の行番号と「タイトル」列で表示している内容をLabelコントロールに表示する。

　今回のサンプル・プログラムでは行っていないが、DataGridオブジェクトのSelectedIndexプロパティに直接インデックス番号を代入しても、その行を選択された状態にすることができる。ただしこの場合にはSelectedIndexChangedイベント・ハンドラは呼び出されないので注意が必要だ。また、SelectedIndexプロパティに-1を代入すると、どの行も選択されていない最初の状態となる。End of Article

カテゴリ：Webフォーム　処理対象：DataGridコントロール
使用ライブラリ：DataGridコントロール
使用ライブラリ：Labelコントロール
関連TIPS：［ASP.NET］DataGridコントロールの列にボタンを表示するには？
関連TIPS：［ASP.NET］DataGridコントロールで特定のカラムのみを表示するには？
　
この記事と関連性の高い別の.NET TIPS
［ASP.NET］DataGridコントロールの列にボタンを表示するには？
［ASP.NET］DataGridコントロールに削除ボタンを追加するには？
［ASP.NET］DataGridコントロールで編集を可能にするには？
［ASP.NET］GridViewコントロールに選択ボタンを追加するには？
［ASP.NET］DataGridコントロールの削除ボタンで確認メッセージを表示するには？
［ASP.NET］DataGridコントロールのフッターに入力機能を追加するには？
［ASP.NET］DataGridコントロールの編集用テキストボックスを大きくするには？
［ASP.NET］DataGridコントロールのヘッダーを複数行にするには？
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