How to display mouseover effect in GridView rows using only CSS?

Itfunda
Posted by in ASP.NET category on for Intermediate level | Points: 250 | Views : 35855 red flag
Rating: 4.17 out of 5  
 6 vote(s)

This article explains how to display mouseover effect in GridView rows using only CSS. In this article, we are not going to use jQuery or JavaScript.

Introduction

Here we have used CSS style class which defines the GridView’s row property that helps to display the hover effect when we will move mouse over that. The RowStyle-CssClass property of the GridView has been set as “rowHover”; when GridView renders on the page, each row of the GridView (GridView is rendered on the page as html table) is rendered with “rowHover” CSS class that only takes effect when we mouse hover on the GridView row.

Get solution hundreds of real time .NET How to’s like this, click here.

Steps to follow

Define following CSS style in the .css file or on the .aspx page itself.

ASPX Page:

 

<style type="text/css">

#GridView1 tr.rowHover:hover

{

background-color: Yellow;

font-family: Arial;

}

</style>

<asp:GridView ID="GridView1" runat="server" EnableViewState="false" RowStyle-CssClass="rowHover" ClientIDMode="Static" />

Note that the important thing here is the ID of the GridView. When GridView rendered on the page it’s id should be GridView1 that is why we have set ClientIDMode=static.

The CSS class name is rowHover with filtration that instruct the browser that this CSS class should be applied only to the element having id as “GridView1” with “tr” element having class=”rowHover” and only when user mouse over it.

In this CSS class we have specified the background color to “Yellow” and font family to “Arial”.

CODE Behind:

 

string _connStr = ConfigurationManager.ConnectionStrings["ConnStr"].ConnectionString;

 

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

GetData();

}

}


 

private void GetData()

{

DataTable table = new DataTable();

// get the connection

using (SqlConnection conn = new SqlConnection(_connStr))

{

// write the sql statement to execute

string sql = "SELECT AutoId, FirstName, LastName, Age, Active FROM PersonalDetail ORDER By AutoId";

// instantiate the command object to fire

using (SqlCommand cmd = new SqlCommand(sql, conn))

{

// get the adapter object and attach the command object to it

using (SqlDataAdapter ad = new SqlDataAdapter(cmd))

{

// fire Fill method to fetch the data and fill into DataTable

ad.Fill(table);

}

}

}

// specify the data source for the GridView

GridView1.DataSource = table;

// bind the data now

GridView1.DataBind();

}

In the above code snippet, the code behind code is just to populate records from the database to the GridView.

Now when we run this page, we get the output as shown below. When user mouse hover the background color of the rows are changed to Yellow and font is changed to Arial.

Conclusion

By setting the RowStyle-CssClass property to filtered CSS class, we can display mouseover effect on GridView rows.

Page copy protected against web site content infringement by Copyscape

About the Author

Itfunda
Full Name: IT Funda
Member Level: Starter
Member Status: Member
Member Since: 5/21/2011 3:32:40 AM
Country: India
Thanks Regards
http://www.itfunda.com/
Get .NET How to | jQuery How to.

Login to vote for this post.

Comments or Responses

Posted by: A4u6178 on: 5/26/2011 | Points: 25
very nice article, thanks for sharing this article.
Posted by: A4u6178 on: 5/26/2011 | Points: 25
very nice article, thanks for sharing this article.
Posted by: Susanthampy on: 5/26/2011 | Points: 25
Good
Posted by: Prabhakar on: 5/27/2011 | Points: 25
Gud one Article. . . it's a gud thing to . . Designing Purpose . .
Posted by: Tripati_tutu on: 5/27/2011 | Points: 25
Looking nice and simple to understand...

Thanks ITFunda for sharing.
Posted by: Ksuresh on: 5/27/2011 | Points: 25
Very good Article,Thanks for sharing.
Posted by: Anilbabu.M on: 8/2/2012 | Points: 25
What is URL REDIRECTION?How can i use this concept in my .net?
my task is i have generated one url like this "http://example.com/"
I am passing one pearameter like "http://example.com/Empno=1"
I want to display Ename in Database table that corresponding "Empno"
plz Help me Give me one simple example

I am new this concepts
plz Help me send source code to my mailID:mandla.anilbabu@gmail.com

Login to post response

Comment using Facebook(Author doesn't get notification)