Format WebGrid in CSS FIle

Question

I have a webgrid in one of my view. I want to add some style properties but it does not work when I add these in the project's css file. However, when I add it withing the style tag in the view, it works. Also, all other elements of the view get formatted according to the css file expect the webgrid.

Can the webgrid be formatted from a CSS file?

EDIT

var grid = new WebGrid(canPage: true, rowsPerPage: 10, canSort: true, ajaxUpdateContainerId: "grid");
grid.Bind(model, rowCount: Model.ToList().Count(), autoSortAndPage: false);
grid.Pager(mode:WebGridPagerModes.All, 
    firstText:"First", lastText:"Last", 
    previousText:"Previous", 
    nextText:"Next", 
    numericLinksCount: 15);
    @grid.GetHtml(htmlAttributes: new { id = "grid" },
    tableStyle: "webgrid",
    headerStyle: "webgrid-header",
    footerStyle: "webgrid-footer",
    alternatingRowStyle: "webgrid-alternating-row",
    selectedRowStyle: "webgrid-selected-row",
    rowStyle: "webgrid-row-style",
    columns: grid.Columns(
        grid.Column(columnName: "column1", header: "column 1r"),
        grid.Column(columnName: "column2", header: "column 2", canSort:true),
        grid.Column(format: (item) => Html.ActionLink("Detail", "Detail", new { JobNumber = item.JobNumber, @style="color:#CCC;" })),
        grid.Column(format: (item) => Html.ActionLink("Edit", "Edit", new { EmployeeID = item.JobNumber }))
));

And here is the css

.webgrid
{
 width: 100%;
 border: 0px;
 border-collapse: collapse;
 white-space:nowrap;
 }

.des {
    width:50%;
}

.webgrid a
{
color: #000;
}

.webgrid-header
{
padding: 6px 5px;
text-align: center;
background-color: #e8eef4;
border-bottom: 2px solid #3966A2;
height: 40px;
border-top: 2px solid #D6E8FF;
border-left: 2px solid #D6E8FF;
border-right: 2px solid #D6E8FF;
}

.webgrid-footer
{
padding: 6px 5px;
text-align: center;
background-color: #e8eef4;
border-top: 2px solid #3966A2;
height: 30px;
border-bottom: 2px solid #D6E8FF;
border-left: 2px solid #D6E8FF;
border-right: 2px solid #D6E8FF;
 }

.webgrid-alternating-row
{
height: 30px;
background-color: #f2f2f2;
border-bottom: 1px solid #d2d2d2;
border-left: 2px solid #D6E8FF;
border-right: 2px solid #D6E8FF;
}

Can you post some code? The issue is probably just that your CSS selectors aren't targeting the grid elements correctly. — McGarnagle, Dec 13 '12 at 20:39
All looks correct ... I'm not sure what could be up. All I can really suggest is, use Firebug or something similar to pinpoint exactly why the styles aren't getting applied. — McGarnagle, Dec 13 '12 at 21:06

score 1 · Accepted Answer · answered Dec 13 '12 at 21:05

I guess you wrongly included the CSS file. Make sure you have used an url helper to reference the file instead of hardcoding the url. So put those rules in a custom CSS file and then include this file like this:

<link href="@Url.Content("~/Content/MyCustomStyle.css")" rel="stylesheet" type="text/css" />

Format WebGrid in CSS FIle

1 Answers1