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

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

Advertisements
This entry was posted in ASP.NET MVC Web Grid, css and tagged , . Bookmark the permalink.

2 Responses to ASP.NET MVC Web Grid Style

  1. Margie says:

    It’s the best time to make some plans for the future and it is time to be happy. I have read this post and if I could I wish to suggest you some interesting things or advice. Perhaps you can write next articles referring to this article. I desire to read more things about it!

  2. Justin Blog says:

    It’s awesome for me to have a web page, which is useful designed for my experience.
    thanks admin

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s