.NET TIPS

［ASP.NET］GridViewコントロールでマウス・ホバー行を強調表示するには？［2.0、3.0、3.5、C#、VB］

山田 祥寛
2009/03/26

　GridViewコントロールで特に列数が多い場合など、いま自分が参照している行がどこであるのか、ややもすると見失いやすい。そのような場合、以下の画面のようにマウス・ポインタを行に乗せたタイミングで行の背景色を変更することで、複雑なグリッド表でも格段に見やすくなる。

本稿で作成するサンプルの実行結果
マウス・ポインタを当てた行（＝マウス・ホバー行）の背景色が紫色に変わる。また、背景色はマウス・ポインタが外れたところで元に戻る。

●動作の前提となるクライアントサイドのコード

　マウス・ポインタを当てたタイミングでGridViewコントロール背景色を変更するには、具体的には以下のようなHTML＋JavaScriptのコードを用意すればよい。

<script type="text/javascript">
function setBg(tr, color) {
  tr.style.backgroundColor = color;
}
</script>
  ……中略……
<tr onmouseover="setBg(this, '#CC99FF')"
    onmouseout="setBg(this, '')" ……>
マウス・ポインタを当てたタイミングで背景色を変更するコード

　onmouseover、onmouseoutイベントは、いずれもクライアントサイドのイベントで、それぞれマウス・ポインタが該当する要素に乗った／要素から外れたタイミングで発生する。ここではそれぞれのイベントでsetBg関数を呼び出している。

　setBg関数は、引数としてイベントの発生元（thisキーワード）と色名を受け取り、該当する行の背景色を変更するための関数である。背景色を変更するには、要素オブジェクトのstyleプロパティを介してbackgroundColorプロパティにアクセスすればよい。

　ちなみに、背景色を変更する処理は、以下のようにタグ内にまとめてしまっても構わない。

<tr onmouseover="this.style.backgroundColor='#CC99FF'"
    onmouseout="this.style.backgroundColor=''" ……>
タグ内にまとめ背景色を変更する処理

　もっとも、処理がより複雑になる場合（テキスト色を変更したい、枠線の太さを変更したいなど）には、出力されるコード量をできるだけ抑えるという意味でも、関数として外部化する方が好ましいだろう。

●サンプル作成の手順

　それでは、具体的なコード作成の流れを追っていくことにしよう。なお、サンプルは「TIPS：［ASP.NET］GridViewコントロールで各列の表示をカスタマイズするには？」で作成したコードをベースに作成するものとする。

1. JavaScriptのコードを追加する

　コード・エディタから行の背景色を変更するためのsetBg関数を追加する。

<head runat="server">
<title>GridViewコントロール</title>
<script type="text/javascript">
  function setBg(tr, color) {
    tr.style.backgroundColor = color;
  }
</script>
</head>
行の背景色を変更するためのsetBg関数（MouseOver.aspx）

　コードの内容については前述したとおり。本稿では簡略化のために、JavaScriptのコードを.aspxファイルに直書きしているが、一般的には.jsファイルとして外部化する方が好ましい。

2. RowCreatedイベント・ハンドラを追加する

　グリッド上の各行（<tr>タグ）にクライアントサイドのコードを追加するには、GridViewコントロールのRowCreatedイベントを利用する。RowCreatedイベントは、名前のとおり、それぞれの行が生成されるタイミングで発生するイベントである。ここでは、RowCreatedイベント・ハンドラでそれぞれの行に対して、onmouseover／onmouseout属性を追加している。

<%@ Import Namespace="System.Drawing" %>
……中略……
protected void grid_RowCreated(Object sender, GridViewRowEventArgs e) {

  // 現在行を取得
  GridViewRow row = e.Row;

  // データ行である場合に、onmouseover／onmouseout属性を追加 （1）
  if (row.RowType == DataControlRowType.DataRow) {

    // onmouseover属性を設定
    row.Attributes["onmouseover"] = "setBg(this, '#CC99FF')";

    // データ行が通常行／代替行であるかで処理を分岐（2）
    if (row.RowState == DataControlRowState.Normal) {
      row.Attributes["onmouseout"] =
        String.Format("setBg(this, '{0}')",
          ColorTranslator.ToHtml(grid.RowStyle.BackColor));
    } else {
      row.Attributes["onmouseout"] =
        String.Format("setBg(this, '{0}')",
          ColorTranslator.ToHtml(grid.AlternatingRowStyle.BackColor));
    }
  }
}
<%@ Import Namespace="System.Drawing" %>
……中略……
Protected Sub grid_RowCreated(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs)

  ' 現在行を取得
  Dim row As GridViewRow = e.Row

  ' データ行である場合に、onmouseover／onmouseout属性を追加（1）
  If row.RowType = DataControlRowType.DataRow Then

    ' onmouseover属性を設定
    row.Attributes("onmouseover") = "setBg(this, '#CC99FF')"

    ' データ行が通常行／代替行であるかで処理を分岐（2）
    If row.RowState = DataControlRowState.Normal Then
      row.Attributes("onmouseout") = _
        String.Format("setBg(this, '{0}')", _
          ColorTranslator.ToHtml(grid.RowStyle.BackColor))
    Else
      row.Attributes("onmouseout") = _
        String.Format("setBg(this, '{0}')", _
          ColorTranslator.ToHtml( _
            grid.AlternatingRowStyle.BackColor))
    End If
  End If
End Sub
onmouseover／onmouseout属性を追加するためのRowCreatedイベント・ハンドラ（MouseOver.aspx。上がC#、下がVisual Basic）

　描画中の現在行を取得するには、RowCreatedイベント・ハンドラの第2引数GridViewRowEventArgsオブジェクト（System.Web.UI.WebControls名前空間）を介して、Rowプロパティにアクセスすればよい。Rowプロパティはグリッド行をGridViewRowオブジェクト（System.Web.UI.WebControls名前空間）として返す。

　ここでは、そのRowTypeプロパティにアクセスして、まずは現在行がデータ行の場合にのみ処理を行うものとする（（1））。さもないと、ヘッダ／フッタやページャについても、同様に処理が行われてしまうので注意すること。RowTypeプロパティの戻り値は、次のとおりである。

値 概要
DataRow データ行（唯一、データバインドが可能）
EmptyDataRow 空データ行
Footer フッタ行
Header ヘッダ行
Pager ページャ行
Separator 行区切り
RowTypeプロパティの戻り値（System.Web.UI.WebControls.DataControlRowType列挙体）

　現在行がデータ行であった場合に、そのAttributesプロパティにアクセスして、行（<tr>タグ）に対してonmouseover／onmouseout属性を追加しているわけだ。具体的には、

row.Attributes("属性名") = 値

の形式で属性値を指定できる。Atrributesプロパティについては、「TIPS： ASP.NETでボタンのクリック時に確認メッセージを表示するには？」が詳しいので、こちらも併せて参照していただくとよいだろう。

　ただし、onmouseout属性の設定値は通常行／代替行いずれであるかによって分岐する必要がある（通常行と代替行とで背景色が異なる場合があるため）。行が通常行であるか代替行であるかは、GridViewRowオブジェクトのRowStateプロパティで判定できる。RowStateプロパティの戻り値は、次のとおりである。

値 概要
Alternate 代替行である
Edit 編集モードである
Insert 新規挿入モードである
Normal 通常のデータ行である
Selected 選択状態である
RowStateプロパティの戻り値（System.Web.UI.WebControls.DataControlRowState列挙体）

　ここでは、それぞれの場合に応じて、通常行／代替行のもともとの背景色を取得し、setBg関数に渡しているわけだ。通常行／代替行のスタイルはRowStyle／AlternatingRowStyleプロパティを介して取得できる。

　なお、取得した色はColor構造体（System.Drawing名前空間）として返される。クライアントサイド・スクリプトに引き渡すに当たっては、ColorTranslatorクラスのToHtmlメソッドでHTMLカラー文字列に変換しておく必要がある（詳細は「TIPS：ピクセルの色をHTMLカラーへ変換するには？」も参照するとよい）。

　以上が理解できたら、サンプルを実行してみよう。冒頭の画面のように、マウス・ポインタを当てた行の背景色が動的に変化すれば、サンプルが正しく動作している。End of Article

利用可能バージョン：.NET Framework 2.0
利用可能バージョン：.NET Framework 3.0
利用可能バージョン：.NET Framework 3.5
カテゴリ：Webフォーム　処理対象：GridViewコントロール
使用ライブラリ：GridViewコントロール
関連TIPS：［ASP.NET］GridViewコントロールで各列の表示をカスタマイズするには？
関連TIPS：ASP.NETでボタンのクリック時に確認メッセージを表示するには？
関連TIPS：ピクセルの色をHTMLカラーへ変換するには？

この記事と関連性の高い別の.NET TIPS
［ASP.NET］DataGridコントロールでマウスのある行を強調表示するには？
［ASP.NET］GridViewコントロールのフッタ行に合計値／平均値を表示するには？
［ASP.NET］GridViewコントロールに選択ボタンを追加するには？
DataGridコントロールで1行おきに色付けするには？
［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