Highlight GridView Row On MouseOver Using Javascript and CSS

Highlight GridView Row On MouseOver Using Javascript and CSS

Hello Friend,

Sometimes we need to give attractive look to a GridView by highlighting rows.

Now the query is how to make row hightlight?

Here i am giving a simple solution to make it workable. I am using the mousehover event and some javascript to make it workable.

First define two css class as below :

<style type="text/css">

Now we have to put the below code in row databound method of the gridview.

void GridView1_RowDataBound(Object sender, GridViewRowEventArgs e)

if(e.Row.RowType == DataControlRowType.DataRow)
e.Row.Attributes.Add("onmouseover", "this.className='highlightrow'");
e.Row.Attributes.Add("onmouseout", "this.className='normalrow'");



Now you will get the highlighted row when mouse over.

Just run the application and check the output.

Reference: http://blog.dotnetsquare.com/net/asp-net/highlight-gridview-row-mouseover-javascript-css/


Guest Author: Triz20 Mar 2012

my gridview got lberpom with edit row state..so i figure out it must be involving alternate edit= 5i put a validation like this(e.Row.RowState = 4 OrElse e.Row.RowState = 5)to make it happened,#its microsoft rules we must follow,even though it's suck

Guest Author: Sachin18 Dec 2012

How to remove underline for LinkButton in Gridview?

  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name: