Highlight GridView Row On MouseOver Using Javascript

Highlighting GridView Row On MouseOver Using Javascript And CSS In Asp.Net. If you want to highlight rows in Gridview on mouse hover or mouseover event by using client side javascript than you can do it in following way.

For this we need to create a css class and define the color we want to use for highlighting in html source of page.



Add following css style in head section of page.

---

HTML SOURCE OF PAGE

---

   1:  <asp:ScriptManager ID="ScriptManager1" runat="server"/>

   2:   

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

   4:                AutoGenerateColumns="False"

   5:                DataSourceID="SqlDataSource1" 

   6:                OnRowCreated="GridView1_RowCreated">

   7:                <SelectedRowStyle BackColor="BurlyWood"/>

   8:  <Columns>

   9:  <asp:CommandField ShowSelectButton="True"/>

  10:  <asp:BoundField DataField="Name" HeaderText="Name"/>

  11:  <asp:BoundField DataField="City" HeaderText="City"/>

  12:  <asp:BoundField DataField="Country" HeaderText="Country"/>

  13:  </Columns>

  14:  </asp:GridView>

  15:  <asp:SqlDataSource ID="SqlDataSource1" runat="server"

  16:  ConnectionString="<%$ ConnectionStrings:ConnectionString %>"

  17:  SelectCommand="SELECT [Name], [City], [Country] FROM [Location]">

  18:  </asp:SqlDataSource>

Add onmouseover and onmouseout attributes to gridview rows in RowCreated event in code behind.

C#

---

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            GridView1.DataBind();
        }
    }
    protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.Attributes.Add("onmouseover", "this.className='highlight'");
            e.Row.Attributes.Add("onmouseout", "this.className='normal'");
        }
    }

VB.NET

---

Protected Sub Page_Load(sender As Object, e As EventArgs)
 If Not IsPostBack Then
  GridView1.DataBind()
 End If
End Sub
Protected Sub GridView1_RowCreated(sender As Object, e As GridViewRowEventArgs)
 If e.Row.RowType = DataControlRowType.DataRow Then
  e.Row.Attributes.Add("onmouseover", "this.className='highlight'")
  e.Row.Attributes.Add("onmouseout", "this.className='normal'")
 End If
End Sub

Now row will be highlighted on mouse hover

Tweet

If you like this post than join us or share