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.

Highlight GridView Row On MouseOver Using Javascript

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

If you like this post than join us or share

19 comments:

Anonymous said...

thanks for this code but when i do it for datalist it i failure i have master conten page i want to happen it on conten page datalist my code saome like .

onItemCreated
e.Item.Attributes.Add("onmouseover", "this.className='highlight'");
e.Item.Attributes.Add("onmouseout", "this.className='normal'");

Please help me


sanju said...

why i can't do for datalist
i using same code on hte place of
e.Row i use e.item.Atribute as like please imgiately help me .

July 22, 2009 5:24 PM

why i can't do for datalist
i using same code on hte place of
e.Row i use e.item.Atribute as like please imgiately help me .


amiT jaiN said...

@sanju:

To highlight DataList Item on mouseover you can write code like this

Put this inside ItemTemplate of DataList


<div style="background-color: White;" onmouseover="this.style.background = '#cccccc'" onmouseout="this.style.background = 'white'">


Like this
<asp:DataList ID="DataList1" runat="server" DataKeyField="ID" DataSourceID="SqlDataSource1">
<ItemTemplate>
<div style="background-color: White;" onmouseover="this.style.background = '#cccccc'" onmouseout="this.style.background = 'white'">
ID:
<asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>'></asp:Label><br />
Name:
<asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>'></asp:Label><br />
Amount:
<asp:Label ID="AmountLabel" runat="server" Text='<%# Eval("Amount") %>'></asp:Label><br />
<br />
</div>
</ItemTemplate>

It should work

Download sample code attached here

Do let me know whether this fix ur problem or not ?


Anonymous said...

Hello friend,

I get 1 problem. The row is still highlighted even I choose another page of the grid view.
I wonder there should be writing some code in the gvSearch_PageIndexChanging.
Can you please help me to solve this?

Thank you.


Hakimtea said...

Thanks ever so much, very useful article. If you do not mind, please visit my article related to travel to Pandeglang district in Banten, Indonesia at Kenali dan Kunjungi Objek Wisata di Pandeglang

Best regards


Anonymous said...

what if i have Gridview in content page?
where should i put style tag block?


Anonymous said...

I don’t know If I said it already, but this so good stuff keep up the good work. I read a lot of blogs on a daily basis and for the most part Kenali dan Kunjungi Objek Wisata di Pandeglang just wanted to make a quick comment to say I’m glad I found your blog. Thanks.

Best regards
Seo Motivation automotive


Anonymous said...

nice article sir

i have created also same application in grid view.

i have used div inside dive a used anchor tag to redirect and inside the anchor tag i used a image control which is 80*60 so i have to provide mouse over effect like following site
actually i have already try to put my div here but it couldn't accept so i have write which gives u idea

want like this mouse over effect
"http://blog.ysatech.com/"

mouse over for that i have tried to use mouse over and mouse out in row data bound adding this attributes but and also use some java script but it's not working. can u help me in this situation..

thanks in advance

regards
omkar


Anonymous said...

Nice brief and this enter helped me alot in my college assignement. Gratefulness you for your information.


Anonymous said...

i surely love all your writing choice, very exciting,
don't give up as well as keep creating for the reason that it simply well worth to look through it,
excited to look at more and more of your articles, cheers!


Anonymous said...

i actually adore all your posting type, very exciting.
don't give up and also keep writing mainly because it just simply nicely to follow it.
looking forward to look over far more of your own stories, thankx ;)


Term Papers said...

I have been visiting various blogs for my term papers writing research. I have found your blog to be quite useful. Keep updating your blog with valuable information... Regards


Term Papers said...

I have been visiting various blogs for my term papers writing research. I have found your blog to be quite useful. Keep updating your blog with valuable information... Regards


viagra suppliers said...

Good review and thanks for code repair.


most expensive said...

Iwas very encouraged to find this site. I wanted to thank you for this special read. I definitely savored every little bit of it and I have you bookmarked to check out new stuff you post.


Anonymous said...

cool


Term papers Help said...

Your blog is really helps for my search and i really like it.. Thanks a lot..:)
Term Papers Writing Services


Anonymous said...

You certainly deserve a round of applause for your post and more specifically, your blog in general. Very high quality material


SEO tools said...

Excellent pieces. Keep posting such kind of information on your blog. I really impressed by your blog.


Find More Articles