Change GridView Row Color on Mouse Move And Get Value OnClick In


1) Create Simple Web Application (using C#).

2) put control (GridView) on the form (Default.aspx)

  <asp:GridView ID="GridView1" runat="server" 

3) On Page Load Event Put Below Code.

  protected void Page_Load(object sender, EventArgs e)
//namespace :using System.Collections.Generic;
List<int> obj = new List<int>();
for (int i = 10; i < 20; i++)
GridView1.DataSource = obj;

4) On the GridView RowDataBound Event Put Below Code.

  protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
if (e.Row.RowType == DataControlRowType.DataRow)
//change the row color and change mouse display hand
      "  = 'pink';'hand';");
//change the cell at that time the row color set white
e.Row.Attributes.Add("onmouseout", "style.backgroundColor = 'white';");
//on row click -pass row selected row index,row clientid and cell 0 value
      "showClickPage('" + e.Row.RowIndex  + "','" + e.Row.ClientID + "','" 
      + e.Row.Cells[0].Text + "');");

5) In the JavaScript put the below code.

<script language="javascript" type ="text/javascript" >
function MouseOver(obj)
document.getElementById(obj).style.backgroundColor ="Red";
//get the row index and client id ,cell value
function showClickPage(rowid,id,selectedid)
alert("Selected Row ->" + rowid);
var gridViewCtl = document.getElementById('<%=GridView1.ClientID%>');
alert("Selected Cell [0] Value" + selectedid);



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s