Hover Effects for GridView Rows Using CSS

In this tutorial we have learn Hover Effects for GridView Rows Using CSS in asp.net c#, This is done by attaching jQuery Mouseover event handler to GridView Row Cells, thus when a Mouse is hovered over GridView Row or Cell its background color is changed thus making it look highlighted

Step 1: Now you can create the css class for GridView row to change alternate ,Normal,header effect on GridView row for below Style Sheet.

gridView
{
width:50%;
padding: 5px;
margin: 0;
border: 1px solid #333;
font-family: “Arial”;
padding:4px 50px 4px 4px;
font-size:12px;
border-bottom:1px solid #333333;
border-top:1px solid #333333;
padding-left:5px;
padding-right:5px;
}
.gridView tr.header
{
color:#FFFFFF;
background-color:#333;
height: 25px;
vertical-align: middle;
font-family: “Arial”;
text-align: center;
font-weight: bold;
font-size: 14px;
padding: 4px 50px 4px 4px;
border-width:1px;
border-radius:5px;
}
.gridView tr.normal
{
color: #000000;
background-color: #F5F5F5;
font-family: “Arial”;
font-size: 12px;
font-weight: bold;
height: 25px;
vertical-align: middle;
text-align: center;
}
.gridView tr.alternate
{
color:#000000;
background-color:#F5F5F5;
height: 25px;
vertical-align: middle;
font-weight: bold;
font-family: “Arial”;
text-align: center;
font-size: 12px;
}
.gridView tr.normal:hover, .gridView tr.alternate:hover
{
background-color:#CCCCCC;
color:#000000;
font-weight: bold;
font-family: “Arial”;
font-size: 12px;
}

Step 2:  Now You can need to Add Css Class in Gridview RowCreate Event As Following.

 <asp:GridView ID=”GridView1″ runat=”server” class=”gridView”
onrowcreated=”GridView1_RowCreated”>
</asp:GridView>

Now, In codeBehind File,

  protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.Header)
e.Row.CssClass = “header“;
if (e.Row.RowType == DataControlRowType.DataRow &&
e.Row.RowState == DataControlRowState.Normal)
e.Row.CssClass = “normal“;
if (e.Row.RowType == DataControlRowType.DataRow &&
e.Row.RowState == DataControlRowState.Alternate)
e.Row.CssClass = “alternate“;
}

Now, You can Run Project You can see the Below Output;

Hover Effects for GridView Rows Using CSS

SEE MORE

4 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *