Telerik ASP.NET MVC 3 Grid - setting row background

Question

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");
                });

Tassadaque · Accepted Answer · 2012-07-03 12:46:41Z

11

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>

answered Jul 3, 2012 at 12:46

Tassadaque

8,19715 gold badges59 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Daniel · Accepted Answer · 2012-07-03 13:32:54Z

2

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";
    }
})

edited Jul 3, 2012 at 13:32

answered Jul 3, 2012 at 13:27

Daniel

5,7624 gold badges35 silver badges36 bronze badges

Collectives™ on Stack Overflow

Telerik ASP.NET MVC 3 Grid - setting row background

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related