Asp.net GridView gives us huge facility that we can't imagine few years ago. But still we have a lot of chance to improve look & feel as well as GridView functionality. Here in this article i will describe how you can highlight a gridview row when move the mouse over the row and also how to retain the original background color when user leaves the mouse from a row or in mouseout event. After googling i found a lot of series on Gridview row highlighting issues but unfortunately most of them uses style sheet to change GridView row colour. But my observation is if you strict on using CSS to highlight GridView row then you will face difficulties when your Grid contains different background color for rowstyle and alternative rowstyle. I hope you will not face this problem if you use my technique. In a small quote i can say that how i can do this. First when user moves mouse pointer over the row then at first i copied the rows original color & then change the color to highlight the rows using javascript. And when user leaves the row or mouseout then i assign the previously copied color as row backgroud using javascript. So if your gridview contains different color for different row style highlight will works nicely.

As you knew that Gridview won't gives us the highlighting facility by default but we can achieve highlighting functionality by using simple javascript. To do that we need to use two javascript event. The one is onmouseover event which is also termed as Mouse Hover effect. The another one is onmouseout event. By using this two strong javascript events we will highlight our GridView rows. Ok now we know which javascript event we will use but how we can add these two javascript event handler with our GridView rows? The answer is simple. GridView gives us an event named RowCreated which we can use to bind
javascript event with our GridView rows. Let’s look how we can do this.

To do that first add a page in your project and give the name GridView_Row_Highlight.aspx. Now copy the following HTML markup code into the page:

Now go to the code behind and write following code:


Now run the project & hope you will get output like below: