Description:
In this
example we explain that Highlight rows of the WebGrid on Mouse over using CSS
in Asp.Net MVC.or how to Highlight row of WebGrid in MVC when mouse hover using
CSS.or how to change the colour of the row of the WebGrid in MVC Razor view
using CSS.
So here we demonstrate
that how to highlight the web grid or grid view row when mouse is hover using
CSS in MVC Razor view.
public ActionResult Index()
{
NorthwindEntities entities = new NorthwindEntities();
return
View(entities.Employees.ToList());
}
View:
@model
IEnumerable<WebGrid_Row_Highlight_MVC.Employee>
@{
Layout = null;
WebGrid webGrid = new WebGrid(source:
Model, canSort: false);
}
<!DOCTYPE html>
<html>
<head>
<title>How to
Highlight row of WebGrid on Mouseover (Mouse Hover) using CSS in ASP.Net MVC</title>
<style type="text/css">
body
{
font-family:
Arial;
font-size:
10pt;
}
.Grid
{
border:
1px solid #ccc;
border-collapse:
collapse;
}
.Grid
th
{
background-color:
#F7F7F7;
font-weight:
bold;
}
.Grid
th, .Grid td
{
padding:
5px;
border:
1px solid #ccc;
}
.Grid,
.Grid table
td
{
border:
0px solid #ccc;
}
.Grid
th a, .Grid th a:visited
{
color:
#333;
}
.Grid
.row:hover td
{
background-color:gold;
cursor:pointer;
}
</style>
</head>
<body>
@webGrid.GetHtml(
rowStyle: "row",
alternatingRowStyle: "row",
htmlAttributes: new { @id =
"WebGrid", @class = "Grid" },
columns: webGrid.Columns(
webGrid.Column("EmployeeID", "Employee Id"),
webGrid.Column("EmployeeName", "Employee Name"),
webGrid.Column("City", "City"),
webGrid.Column("Country", "Country")
))
</body>
</html>
0 comments:
Post a Comment