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的方法 - 它更快（对网格操作更少）并且比使用上述方法应用额外逻辑来处理两次点击更容易

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

2 个答案: