Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 524
LukLed Avatar asked Nov 19 '25 00:11

LukLed


1 Answers

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>
like image 155
LukLed Avatar answered Nov 20 '25 14:11

LukLed



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!