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

Steps:

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

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

  <asp:GridView ID="GridView1" runat="server" 
   OnRowDataBound="GridView1_RowDataBound">
</asp:GridView>

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++)
{
obj.Add(i);
}
GridView1.DataSource = obj;
GridView1.DataBind();
}

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
e.Row.Attributes.Add("onmouseover", 
      "this.style.backgroundColor  = 'pink';this.style.cursor='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
e.Row.Attributes.Add("onclick", 
      "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)
{
alert(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);
}
</script>

Thanks

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s