ASP.NET MVC Web Grid Style

If you see the construction of web grid it nothing but table structure. So it’s very easy to apply style to web grid. There are some properties to customize the web grid style.

tableStyle: “webgrid”,
headerStyle: “webgrid-header”,
footerStyle: “webgrid-footer”,
alternatingRowStyle: “webgrid-alternating-row”,
selectedRowStyle: “webgrid-selected-row”,
rowStyle: “webgrid-row-style”

* where webgrid is base style class.

Instead of using all styles we can use only one property tableStyle. As below

Web Grid

@model IEnumerable<Sample.Models.Product>
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Product</h2>

<style>
    table
    {
        font-family: verdana,arial,sans-serif;
        font-size: 11px;
        color: #333333;
        border-width: 1px;
        border-color: #999999;
        border-collapse: collapse;
    }
    table th
    {
        background: #b5cfd2;
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #999999;
    }
    table td
    {
        background: #dcddc0;
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #999999;
    }
    .foot
    {
        text-align: center;
    }
</style>
@{
    var grid = new WebGrid(Model, defaultSort: "Name", rowsPerPage: 5);
}
@grid.GetHtml(tableStyle: "table", footerStyle: "foot",
    columns:
        grid.Columns(
            grid.Column("Name", format: @<text>@Html.ActionLink((string)item.Name, "Details", "Product", new { id = item.ID }, null)</text>),
            grid.Column("Price", header: "Product Price", format: @<text>@item.Price.ToString("0.00")</text>))

Relevant links
Sorting in webgrid in ASP.NET MVC
Delete Multiple webgrid row using jQuery
Efficient Paging and Sorting with WebGrid Web Helper – ASP.NET MVC
ASP.NET MVC3 webgrid conditional statement on column (if, if else loop)
Efficient Paging with WebGrid Web Helper – ASP.NET MVC
ASP.NET MVC Web Grid Style