How to display mouseover effect on GridView rows using CSS?

SheoNarayan
Posted by in ASP.NET category on for Intermediate level | Points: 250 | Views : 9196 red flag
Rating: 5 out of 5  
 1 vote(s)

To display mouseover effect on the GridView row, we can follow this approach.

GridView

GridvIew control is a powerful data grid control that allows us to display the data in tabular format
with sorting and pagination. It also allows us to manipulate the data.

To display mouseover effect on the GridView row, we can follow this approach.

Get hundreds of ASP.NET Tips and Tricks and ASP.NET Online training here.

In the previous article, we learnt about How to work with the nested GridView (a GridView inside another GridView) and populate the data? In this article, we shall learn how to display mouseover effect on the GridView row with following approach.

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" />

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. On the .aspx page in the GridView RowStyle-CssClass, we have specified ”rowHover” css class. In this CSS class we have changed the background color to “Yellow” and font family to “Arial”.

The “rowHover” CSS class style will only get applied when we hover the rows of the GridView (notice the CSS rowHover class declaration in the .aspx page and you should understand how this filteration is working).

OUTPUT

Thanks for reading, hope you liked it.

Keep reading my forth coming articles. To read my series of articles on ASP.NET,click here.

Page copy protected against web site content infringement by Copyscape

About the Author

SheoNarayan
Full Name: Sheo Narayan
Member Level: HonoraryPlatinum
Member Status: Administrator
Member Since: 7/8/2008 6:32:14 PM
Country: India
Regards, Sheo Narayan http://www.dotnetfunda.com
http://www.snarayan.com
Ex-Microsoft MVP, Author, Writer, Mentor & architecting applications since year 2001. Connect me on http://www.facebook.com/sheo.narayan | https://twitter.com/sheonarayan | http://www.linkedin.com/in/sheonarayan

Login to vote for this post.

Comments or Responses

Posted by: Udaysimha on: 2/22/2012 | Points: 25
Hi,

I try ed this article but i did`t gets the mouse over effect on gridview.
please find my code bellow:

.aspx page:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="gvmouseover._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">
<title>Untitled Page</title>
<style type ="text/css" >
#Gridview1 tr.rowHover:hover
{
background-color :Fuchsia;
font-family :Arial ;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>

<asp:GridView ID="GridView1" runat="server" EnableViewState ="false" RowStyle-CssClass ="rowHover">
</asp:GridView>
</div>
</form>
</body>
</html>

.aspx.cs page
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string connstring = ConfigurationManager.ConnectionStrings["dbconnection"].ToString ();
SqlConnection con = new SqlConnection(connstring);
string str = "select * from tblChargeGroup";
//SqlCommand cmd = new SqlCommand(str, con);
DataSet ds = new DataSet();
SqlDataAdapter da = new SqlDataAdapter(str ,con);
da.Fill(ds, "temp");
GridView1.DataSource = ds.Tables[0];
GridView1.DataBind();

}
}

please help me to find out the reason.
Thanks

Login to post response

Comment using Facebook(Author doesn't get notification)