Tuesday, June 19, 2012

Grid Row Html Attributes & Row Color in Telerik MVC Grid

There are two ways of get this done in Telerik MVC Grid component.

If you are using server side binding, I think it is a little handy in several cases. You can add this in your aspx page to Grid component:


        .RowAction(row =>
        {
            if (row.DataItem.GridKey == 2012)
            {
                row.HtmlAttributes["style"] = "background:red;";
            }
        })


You can custumize as you wish the string assigned to HtmlAttributes["style"] element. It will work the style element in a html tag.


If you are using Ajax binding that means you have to do the style thing in OnRowDataBound event. It has to be in javascript and sometimes you may not able to access your control attributes. Here is the code:



          .ClientEvents(events => events.OnRowDataBound("Grid_OnRowDataBound"))


         <script type="text/javascript">
          function Grid_OnRowDataBound(e) {
             if (e.dataItem.GridKey == 2012) {
                e.row.style.backgroundColor = "red";
             }
          }
          </script>



We have added the style attribute for each row seperately at OnRowDataBound event. You can add anything like font-size, bold or not, italic, etc.

If there is any mistakes let me know, so I can fix :)


Regards,
Mehmet.

2 comments: