未在telerik kendo网格中调用Cell Action

时间:2017-12-04 09:20:03

标签: asp.net-mvc telerik-grid

我试图改变telerik网格中单元格中文本的颜色。 我使用的是ASP.NET MVC 以下是我尝试这样做的方法:

@{
        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();

}

这是我从telerik文档中获取的内容:

         .CellAction(cell =>
         {

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

我应该为我网格的每个单元格调用CellAction的lambda,但没有任何反应,当我在CellAction lambda中放置一个断点时,它永远不会中断。 我没有收到任何错误,它什么也没做。 我知道我的代码应该改变背景颜色而不是文本颜色,但我只是从文档中获取了这些代码,并试图弄清楚为什么它甚至不起作用。

1 个答案:

答案 0 :(得分:1)

注意CellAction仅适用于服务器端数据绑定。
实施例

@(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()
      )

对于ajax绑定,只需订阅一个javascript绑定事件并在那里更改单元格样式。