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?
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With