How to style rows in the MVCContrib Grid based on their data?

Question

I am tinkering with the MVCContrib Grid and am stuck on how to format a row of data in the grid based on the data.

For example, say we have a grid of products, where each product has data fields like name, price, and discontinued. I'd like to highlight all product rows that are discontinued.

One workaround would be to use jQuery on the client-side to apply a CSS class to those rows where the discontinued cell is TRUE, but that seems like a brittle solution. I'm hoping there's a way to do it on the server-side via the Html.Grid method call.

Thanks

Fluorescein

Answer 1

Hello Scott: Try something like the following to add RowAttributes -

@Html.Grid(Model)
    .WithModel(new CustomerGridModel())
    .Sort(ViewData["sort"] as GridSortOptions)
    .Attributes(id => "grid", style => "width: 100%;")
    .RowAttributes(data => new MvcContrib.Hash(
        @class => data.Item.Discontinued ? "discontinued" : ""))

This will add a class attribute to the tr element. Then, create a class along the lines of:

tr.discontinued td {background-color: red;}

Sorry for the long code snippet...

Management

Have an upvote! This worked great for me in my project. Cheers! – Spiraea

Wrap the grid in round brackets and you can make the fluent-syntax multi-lined ;-) @(Html.Grid(Model) .WithModel(..) ... ) – Steamy