.NET TIPS

［ASP.NET］DataGridコントロールでマウスのある行を強調表示するには？

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

　DataGridコントロールを使用してデータの一覧表示を行った場合、次の画面のようにマウス・カーソルのある行の背景色を変更するとグリッドを見やすくできる。

マウス・カーソルのある行を強調表示するサンプル・プログラム（onmousedg.aspx）の実行画面

　ここでは、ある行の上にマウス・カーソルが移動したときにその背景色を変え、マウス・カーソルが行から外れると背景色を元の色に戻している。このような動作はクライアント側で実行されるスクリプトによって処理可能だ。サーバ側のコードでは、データ連結時にクライアント・スクリプトをグリッド内に挿入しておけばよい。

クライアントに必要なスクリプト

　クライアント・スクリプトでは、各行のonmouseoverイベントとonmouseoutイベントが発生するタイミングで背景色を変更する。onmouseoverイベントはマウス・カーソルがHTMLオブジェクト（ここではグリッド内の行。実際には<table>要素内の<tr>要素）に移動したときに発生し、onmouseoutイベントはHTMLオブジェクトの外にマウス・カーソルが移動したときに発生する。

　また行の背景色は、クライアント・スクリプトでは、オブジェクトのstyleプロパティのbackgroundColorプロパティで指定することができる。

　よって、最終的にブラウザに送信されるHTML文では、<tr>タグが次のような記述になるようにすればよい。イベントとそのイベント発生時に実行されるスクリプトは、タグの属性によって指定することができる。

  <table>
    <tr
        onmouseover="this.style.backgroundColor='red'"
        onmouseout="this.style.backgroundColor='blue'" >
    ……

　HTMLオブジェクトの一覧や、そのイベント、プロパティなどの一覧は「HTML and DHTML Reference」で調査可能である。

グリッド行へのクライアント・スクリプトの挿入

　ブラウザに送信されるHTML文のタグの属性をプログラム・コードで記述するには、各Webサーバ・コントロールで用意されているAttributesプロパティを使用する（このプロパティについては「TIPS：［ASP.NET］ボタンのクリック時に確認メッセージを表示するには？」で解説している）。

　今回はグリッド内の行を表すDataGridItemクラス（System.Web.UI.WebControls名前空間）のオブジェクトに対してAttributesプロパティを使用する。いまDataGridItemオブジェクト「line」があるとすると、onmouseoverイベントの設定は次のようにして可能だ。

line.Attributes["onmouseover"] = "this.style.backgroundColor='Gold'";

　このような設定をグリッド内のすべての行について行えばよい。この処理は「TIPS：［ASP.NET］DataGridコントロールの各セルにアクセスするには？」で示した方法でデータ連結後のDataGridオブジェクトに対して行ってもよいし、「TIPS：［ASP.NET］DataGridコントロールですべての行にアクセスするには？」で示したようにDataGridコントロールのItemDataBoundイベントやItemCreatedイベントのイベント・ハンドラでも記述できる。

マウス・カーソルのある行を強調表示するサンプル・プログラム

　次に示すサンプル・プログラムでは、ItemDataBoundイベントを利用して、DataGridItemオブジェクトのAttributesプロパティを設定している。このプログラムは「TIPS：［ASP.NET］DataGridコントロールで特定のカラムのみを表示するには？」で作成したサンプル・プログラム（bounddg2.aspx）に、ItemDataBoundイベント・ハンドラを追加したものだ。プログラムの実行結果は本稿の冒頭で示している。

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

<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();
    }

    void MyGrid_ItemBound(object sender, DataGridItemEventArgs e) {

      string origItem = ColorTranslator.ToHtml
                          (MyGrid.ItemStyle.BackColor);
      string origAltItem = ColorTranslator.ToHtml
                             (MyGrid.AlternatingItemStyle.BackColor);

      DataGridItem line = e.Item;

      if (line.ItemType == ListItemType.Item
          || line.ItemType == ListItemType.AlternatingItem) {

        line.Attributes["onmouseover"]
            = "this.style.backgroundColor='Gold'";

        if (line.ItemType == ListItemType.Item) {
          line.Attributes["onmouseout"]
              = "this.style.backgroundColor='" + origItem + "'";
        } else {
          line.Attributes["onmouseout"]
              = "this.style.backgroundColor='" + origAltItem + "'";
        }
      }
    }
  </script>
</head>

<body>
  <form runat="server">
    <asp:DataGrid id="MyGrid"
        OnItemDataBound="MyGrid_ItemBound"
        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>
マウス・カーソルのある行を強調表示するC#のサンプル・プログラム（onmousedg.aspx）

　このプログラムでは、onmouseoutイベントで設定する元の背景色として直接HTMLカラー文字列を記述せずに、<ItemStyle>タグや<AlternatingItemStyle>タグで指定されている背景色を次のようにして取得し使用している。

string origItem
    = ColorTranslator.ToHtml(MyGrid.ItemStyle.BackColor);
string origAltItem
    = ColorTranslator.ToHtml(MyGrid.AlternatingItemStyle.BackColor);

　DataGridオブジェクトのプロパティから得られる色情報はColor構造体（System.Drawing名前空間）の値であるが、ColorTranslatorクラス（System.Drawing名前空間）のToHtmlメソッドでHTMLカラーの文字列に変換することができる。これについては「TIPS：ピクセルの色をHTMLカラーへ変換するには？」でも解説している。End of Article

カテゴリ：Webフォーム　処理対象：DataGridコントロール
使用ライブラリ：DataGridコントロール
使用ライブラリ：DataGridItemクラス（System.Web.UI.WebControls名前空間）
使用ライブラリ：Color構造体（System.Drawing名前空間）
使用ライブラリ：ColorTranslatorクラス（System.Drawing名前空間）
関連TIPS：［ASP.NET］ボタンのクリック時に確認メッセージを表示するには？
関連TIPS：［ASP.NET］DataGridコントロールの各セルにアクセスするには？
関連TIPS：［ASP.NET］DataGridコントロールですべての行にアクセスするには？
関連TIPS：［ASP.NET］DataGridコントロールで特定のカラムのみを表示するには？
関連TIPS：ピクセルの色をHTMLカラーへ変換するには？
　
この記事と関連性の高い別の.NET TIPS
［ASP.NET］GridViewコントロールでマウス・ホバー行を強調表示するには？
［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