Defining inline row style in System.Web.Helpers.WebGrid

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>

Answer 2

You can use the alternatingRowStyle: "(your CSS class for the alternating row)" to do this, I believe.

Like:

<div id="grid">
    @grid.GetHtml(
        tableStyle: "grid",
        headerStyle: "head",
        alternatingRowStyle: "alt",
        columns: grid.Columns(
            grid.Column("FirstName"),
            grid.Column("LastName"),
            grid.Column("Salary",format:@<text>[email protected]</text>)
        )
    )
</div>

This should apply the css class "alt" to alternating rows in the resulting grid.

I took the example from:

http://weblogs.asp.net/shijuvarghese/archive/2010/10/08/using-the-webgrid-helper-in-asp-net-mvc-3-beta.aspx

Answer 3

As far as I know, WebGrid doesn't currently support styling on the row other than specifying the CSS class.

If you want to use WebGrid then the only alternative I can think of would be to:

1. Render the colour values in a column as text
2. Hide that column using a CSS class on the column with display:none
3. Use a bit of jQuery to set the background-color style to that of the text colour in the hidden column

That seems like an ugly hack to me, so I would suggest, if you really need that level of control over your table display, then don't bother with the WebGrid and render the HTML yourself. There is a lot of information out there on implementing your own paging and sorting.

Answer 4

Ok, I had a little difficulty implementing this so I wanted to show what I did based on the accepted answer. Maybe this will help you.

grid.Column("Status", "Status", (item) => 
     new MvcHtmlString(Html.Encode(item.Status) +
     "<div class='color' style='display: none;'>#" + item.RowColor + "</div>"))

I just retrieved the Color from my Row object like this:

public class MyRowType {
        public String Status { get; set; }

        public String RowColor
        {
            get{
                switch (Status)
                {
                    case "RUNNING":
                        return "0000FF";
                    case "FAILED":
                        return "FF0000";
                    default:
                        return "00FF00";
                }
            }
        }
    }

The Status column was there before, but now the whole row is colored based on the value in the Status field.

Answer 5

grid.Column("ColumnName", canSort: true,
    format: (item) =>
    {
        String Oabsent=string.Empty;
        if (item.ColumnName)
        {
            Oabsent += 
                 "<span style=\"color:#FF0000 ; display:table\">" 
                 + item.ColumnName+ "</span><br/>";
        }
        else { Oabsent += item.ColumnName; }

        return new HtmlString(Oabsent);
    }),