I'm using Telerik Grid. I need to set background color for the entire row based on some property in view model. I've tried to do it as below by setting a background in IF statement for each column but backgound applies only on element not all cell (td). Also it seems it's a very "dirty" way to accomplish this task.
@(Html.Telerik().Grid(Model.SomeItems).Name("Grid")
.Columns(columns =>
{
columns.Template(
@<text>
@if (Model.IsOfSpecialColor)
{
<div class="gridRowBackground">
@Html.ActionLink(...)
</div>
}
else
{
@Html.ActionLink(...)
}
</text>).Title("Blabla");
});
You can change it using onRowDataBound
event
@(Html.Telerik().Grid<Customer>()
.Name("Grid2")
.DataBinding(d => d.Ajax().Select("Select", "Home"))
.ClientEvents(e => e.OnRowDataBound("onRowDataBound"))
)
and the function is
<script>
function onRowDataBound(e) {
if (e.dataItem.ID == 2) {
e.row.style.backgroundColor = "grey";
}
}
</script>
If you are using server data binding, you can use CellAction. However, if you are using ajax data binding, you will need to use a solution like Tassadaque suggests.
@(Html.Telerik().Grid(Model.SomeItems)
.Name("Grid")
.CellAction(cell =>
{
if (cell.DataItem.IsOfSpecialColor.Value)
{
cell.HtmlAttributes["style"] = "background-color: red";
}
})
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