.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 記事ランキング

本日 月間