Asp.net GridView Row Hover Effect using Css Style

Asp.Net GridView Row Hover Effect using CSS Style

Introduction : This Tutorial Explain how to make hover effect in Gridview row using the Css Style sheet from the Gridview RowCreate event you can type or add the css class whatever you want alternate effect in Gridview rows. as following Source code Explain how the css Style can work.

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;

codelearne

Asp.net GridView Row Hover Effect using Css Style

Asp.Net GridView Row Hover Effect using CSS Style

1 comments: