如何使用复选框控件设置 Kendo UI mvc 网格

Question

我正在使用 Kendo UI MVC 网格。模型的属性之一是 bool，所以我需要在网格中将其显示为复选框。默认情况下，Kendo UI 在列中将其显示为“true”和“false”值。因此，您需要第一次单击以获取复选框，然后第二次单击以更改组合框的值。我没有从网格中获取默认值，而是设置了 ClientTemplate，所以我得到了复选框而不是“true”和“false”值。

              c.Bound(p => p.GiveUp)
                  .Title("Giveup")
                  .ClientTemplate("<input type='checkbox' id='GiveUp' name='GiveUp' #if(GiveUp){#checked#}# value='#=GiveUp#' />")
                  .Width(50);

此网格使用批量编辑和网格内编辑 (GridEditMode.InCell)

      .Editable(x => x.Mode(GridEditMode.InCell))
      .DataSource(ds => ds.Ajax()
                            .ServerOperation(false)
                            .Events(events => events.Error("error"))
                            .Batch(true)
                            .Model(model => model.Id(p => p.Id))
                            .Read(read => read.Action("Orders", "Order").Data("formattedParameters"))))

所以我希望用户能够点击复选框并更改我的模型的值，但不幸的是这不起作用。我可以直观地看到复选框的值已更改，但我没有看到将单元格标记为已更改的红色三角形，当我单击添加新项目按钮时，复选框中的值消失了。

请指教我做错了什么。

提前致谢。

Answer 1

对于那些想看看完整代码是什么样子的人。

Home.cshtml

    @(Html.Kendo().Grid<OrdersViewModel>()
          .Name("Orders")
          .Columns(c =>
          {
              c.Bound(p => p.Error)
                  .Title("Error")
                  .ClientTemplate("<input type='checkbox' #= Error ? checked='checked': '' # class='chkbx' />")
                  .HtmlAttributes(new {style = "text-align: center"})
                  .Width(50);


<script>
    $(function() {
        $('#Orders').on('click', '.chkbx', function() {
            var checked = $(this).is(':checked');
            var grid = $('#Orders').data().kendoGrid;
            var dataItem = grid.dataItem($(this).closest('tr'));
            dataItem.set('Error', checked);
        });
    });
</script>

Answer 2

基本上，当您从网格中添加/删除记录时，红色三角形总是消失（或者当您排序/分页/过滤等时），复选框不是红色三角形的问题。

现在对于复选框，如果您创建一个 ClientTemplate 这又是一个复选框，您需要单击一次以将单元格置于编辑模式（您将看到没有区别，因为编辑器模板再次是一个复选框）所以您需要单击第二次以实际更改值。

我建议您作为最佳做法的最佳做法是使用 here 所涵盖的方法 - 它比使用上述方法应用额外的逻辑来处理两次点击要快得多（网格的操作更少）并且更容易。