How to display mouseover effect on GridView rows using CSS?

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.