Question

I am moving my application to MVC 3 and try to use System.Web.Helpers.WebGrid. I would like to get html code like:

<table>
    <tr style="background-color: <%= item.Color %>">
    </tr>
    <tr style="background-color: <%= item.Color %>">
    </tr>
    <tr style="background-color: <%= item.Color %>">
    </tr>
</table>

There is rowStyle property, that allows to define css class for every row, but there will be different style for every row. Is it achieveable easily?

Answer 1

So I had to finish with hack. First, include color as a part of another column. It had to be returned as MvcHtmlString to avoid additional encoding:

<%  
    var grid = new WebGrid(Model);
%>
<%= 
    grid.GetHtml(
        tableStyle: "table_class",
        columns:  grid.Columns(
            grid.Column("Importance", CTRes.Importance, (item) => 
                new MvcHtmlString(Html.Encode(item.Importance) + 
                "<div class='color' style='display: none;'>#" + item.Color + "</div>"))
        )
    ) 
%>

Then we are setting bacground color in $(document).ready():

<script type="text/javascript">
    $(document).ready(
        function () {
            $('.table_class .color').each(function (index, element) { $(element).parent().parent().css('background-color', $(element).html()); });
        }
    );
</script>