telerik - 如何使用复选框控件设置 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>