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;
SEE MORE
- Auto Refresh Partial View in ASP.NET MVC
- What is ASP.NET Core
- Difference between TempData keep() And Peek() in Asp.Net MVC
- Difference between viewbag,viewdata and tempdata in asp.net mvc
- ASP.NET MVC With AngularJS
- Retrieving Data Using Form Collection and Inserting Into ASP.Net MVC
- MVC CRUD Operations Using Entity Framework
- Search Functionality in ASP.NET MVC
- How to create a User Registration page using asp.net mvc
- Store Multiple Checkbox state from cookie using Jquery
- Cascading Dropdownlist using Ajax in Asp.Net Mvc with city state country
- Insert, Update, Delete In GridView Using ASP.Net C#
- Binding Dropdownlist With Database In Asp.Net MVC
- Search and Filter data in Gridview using Asp.net MVC
- Select Insert, Update And Delete With ASP.NET MVC
- Display Data in GridView Using Asp.net MVC
- Validation in ASP.NET MVC Razor view
- CRUD Operation Using 3-Tier Architecture In ASP.NET
- How to get Connection String from Web.Config in Asp.Net C#
- Login page using 3-Tier Architecture in ASP.Net
- Asp.Net Image Upload in 3-Tier Architecture and store in sql database
4 Comments