Cell Action not called in a telerik kendo grid

Question

I'm trying to change text's color in cells in a telerik grid. I'm using ASP.NET MVC Here is how I'm trying to do it :

@{
        Html.Kendo()
             .Grid<DellZapFast.BackOffice.ViewModels.EventInstance.EventInstanceViewModelMin>()
             .Name("grid")
             .Columns(c =>
             {
                 c.Bound(a => a.Country);
                 c.Bound(a => a.Town);
                 c.Bound(a => a.StartDate).Format("{0:d}");
                 c.Bound(a => a.EndDate).Format("{0:d}");
                 c.Bound(a => a.GlobalEventName).Title("Type");
                 c.Bound(a => a.Id)
                      .Title("Actions")
                      .Sortable(false)
                      .Filterable(false)
                      .Width(180)
                      .ClientTemplate
                      (
                            "<button class='btn btn-default' data-toggle='modal' rel='tooltip' data-original-title='Dashboard' title='Dashboard' onclick='goToDashboard(\"" + "#=Id#" + "\")'><span class='glyphicon glyphicon-dashboard'></span></button>" +
                            "<button class='btn btn-default' data-toggle='modal' rel='tooltip' data-original-title='Edit this event Instance' title='Edit this eventInstance' data-target='\\#editeventInstance' onclick='getEditeventInstance(\"" + @Url.RouteUrl("EditEventInstance", new { eventInstanceId = "#=Id#" }) + "\")'><span class='glyphicon glyphicon-edit'></span></button>" +
                            "<button class='btn btn-default' data-toggle='modal' rel='tooltip' data-original-title='Copy this event Instance' title='Copy this event Instance' data-target='\\#copyEventInstance' onclick='getCopyEventInstance(\"" + @Url.RouteUrl("CopyEventInstance", new { eventInstanceId = "#=Id#" }) + "\")'><span class='glyphicon glyphicon-export'></span></button>" +
                            "<button type='button' class='btn btn-default' data-toggle='modal' rel='tooltip' data-original-title='Delete this event' title='Delete this event' data-target='\\#deleteeventInstance' onclick='deleteeventInstance(\"" + @Url.Action("delete", "EventInstance", new { eventInstanceId = "#=Id#" }) + "\");'><span class='glyphicon glyphicon-remove'></span></button>"
                      );
             })
         .CellAction(cell =>
         {
             // if (cell.Column.Title == "Registered")
             cell.HtmlAttributes["style"] = "background:red;";
         })
         .Scrollable(s => s.Height("auto"))
         .Sortable()
         .Groupable()
         .Filterable()
         .Pageable(p => p.Refresh(true).ButtonCount(3))
         .Deferred()
         .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("GetEvents", "eventInstance"))
            .PageSize(50)
         )
         .ToolBar(toolbar =>
                  toolbar.Template(
                    @<text>
                        @if (@ViewBag.NumberOfEventsArchived > 0)
                        {
                            <button id="btn-event-archived" class="btn btn-default"> @ViewBag.NumberOfEventsArchived Archived </button>
                        }
                    </text>)
                                       )
                      .Deferred()
             .Render();

}

Here's what I took from telerik documentation :

         .CellAction(cell =>
         {

             cell.HtmlAttributes["style"] = "background:red;";
         })

CellAction's lambda is supposed to be invoked for each cell of my grid, but nothing happen, when I put a breakpoint in the CellAction lambda, it never breaks. I don't get any error, it just don't do anything. I know my code is supposed to change background color instead of text color, but I just took this code from the documentation and I try to figure out why it does not even work.

Answer 1

Notice CellAction is applicable only with server-side data binding.
Example:

@(Html.Kendo().Grid(Model.Data)    
      .Name("Grid")
      .Columns(columns => {
          columns.Bound(c => c.Id);
          columns.Bound(c => c.Name).HtmlAttributes(new { style = "background:red;" });
      })
      .CellAction(cell =>
      {
          if (cell.Column.Title == "Name")
          {
              cell.HtmlAttributes["style"] = "background:blue;";
          }
      })
      .Pageable()
      .Sortable()
      .Scrollable() 
      .Filterable()
      .Groupable()
      )

For ajax binding, simply subscribe to one of javascript bound events and change cell styling there.