In
this article I am going to explain how to apply or set the custom style on MVC webgrid.
In
the previous article I have explained how to apply the conditional statement onwebgrid column in mvc, how Create, read, update and Delete (CRUD) opratuionusing Store procedure in asp.net mvc and how to validate the email address ofusers in MVC application using Data Annotation.
Description:
I
am using webgrid to display the data in View. I want change the row style and
apply custom color. Webgrid have some inbuilt property to apply custom
formatting. Here are these properies:
tableStyle: "webgrid",
headerStyle: "header",
footerStyle: "footer",
rowStyle: "row-style",
alternatingRowStyle: "alternating-row",
You
have to write the custom CSS for given property. You can also apply the CSS
style (put all class style in CSS file and include it in your view).
Implementation:
I
have created style for header, row and alternate row. Below is the example of it.
View
(index.cshtml) :
@model IEnumerable<MVC_Project.Models.Employee>
<style
type="text/css">
.webgrid {
font-size: 1.2em;
width: 80%;
display: table;
border-collapse: collapse;
}
.header {
background-color: #3F95C5;
color: #fff;
padding-bottom: 4px;
padding-top: 5px;
text-align: center;
}
.header a {
text-decoration: none;
color: #fff;
}
td {
text-align:
center;
}
table img
{
width:150px;
}
.row-style {
background-color :#E6E6E6;
}
.row-style:hover {
background-color: #C0C0C0;
}
.alternating-row {
background-color: #DEEDF5;
}
.alternating-row:hover {
background-color: #6EA0C3;
}
</style>
@{var grid = new WebGrid(Model, canSort: true, canPage: true);
}
@grid.GetHtml(
tableStyle: "webgrid",
headerStyle: "header",
footerStyle: "footer",
fillEmptyRows: true,
rowStyle: "row-style",
alternatingRowStyle: "alternating-row",
mode: WebGridPagerModes.All,
columns: grid.Columns
(
grid.Column("Name","Name"),
grid.Column("Phone","Phone"),
grid.Column("Salary","Salary"),
grid.Column("Department","Department"),
//if else condition
to check email id
grid.Column("Email",format: (item) =>
{
if (item.emailid == null)
return
Html.Raw("Email not
available");
else
return (item.EmailId);
}),
//if else condition
to display image
grid.Column("Image",format: (item) =>
{
if (item.ImagePath == null)
return Html.Raw (string.Format("<text><img
src=\"{0}\" alt=\"Image\"/></text>", Url.Content("~/images/image.jpg")));
else
return Html.Raw(string.Format("<text><img
src=\"{0}\" alt=\"Image\" /></text>",
Url.Content(item.ImagePath)));
}),
grid.Column("Edit",format:@<text>@Html.ActionLink("Edit", "Update", new { id = item.ID })</text>),
grid.Column("Delete",format:@<text>@Html.ActionLink("Delete", "Delete", new { id = item.ID })</text>)
)
)
.png)
No comments:
Post a Comment