如何在 Kendo 网格中将字符串数据类型的列设置为复选框？

Question

我有一个字符串字段IsEnabled，它是字符串。值可以是 Yes、No 或 null。我将此列绑定到网格列。它按预期工作。但我想在 UI 上将其显示为复选框。对于值 Yes，应该选中它或者 No 或 null 应该取消选中。用户可以根据用户的操作 check/uncheck。是或否将被插入数据库。

我找不到合适的方法，那么处理这种情况的最佳方法是什么？

我尝试通过添加一个 bool 字段并根据值 Yes、No 或 null 来设置它。并将此字段绑定到网格。

但我正在寻找一种干净的方法

Answer 1

您可以使用列模板 (documentation) return 当记录的 IsEnabled 为 是[=24= 时检查值的复选框].

然后在网格 (documentation) 的 dataBound 事件中，您将为复选框设置事件绑定，以便在值更改时获取。

这是一个例子：

$('#grid').kendoGrid({
  columns: [
    {
        field: 'Name'
    },
    {
        field: 'name',
        template: function(dataItem) {
        var checkbox = $('<input />', {
          checked: dataItem.IsEnabled === 'Yes',
          type: 'checkbox'
        });
        return checkbox.prop('outerHTML');
      }
    }
  ],
  dataSource: [
    {
      Id: 1,
      Name: 'Person1',
      IsEnabled: 'Yes'
    },
    {
      Id: 2,
      Name: 'Person2',
      IsEnabled: 'No'
    },
    {
      Id: 3,
      Name: 'Person3',
      IsEnabled: 'No'
    }
  ],
  dataBound: function(e) {
    e.sender.table.on('change', 'input[type="checkbox"]', function() {
      var checked = this.checked;
      // send your AJAX request
    });
  }
});

Fiddle: https://dojo.telerik.com/igiTASAc

Answer 2

因为我一直在寻找 Kendo MVC 解决方案，所以我实现了如下所示。

像这样声明 属性。

[UIHint("DropDownTemplate")]
public IsAllowedCls IsAllowed { get; set; }

public class IsAllowedCls
{
    public int IsAllowedKey { get; set; }
    public string IsAllowedValue { get; set; }
}

在 Views\Shared\EditorTemplates 下添加视图 创建名为 DropDownTemplate 的视图，内容如下

@model FxTrader.Models.IsAllowedCls

    @(Html.Kendo().DropDownList()
        .Name("DropDownTemplate")
        .DataValueField("IsAllowedKey")
        .DataTextField("IsAllowedValue")
        .BindTo((System.Collections.IEnumerable)ViewData["IsAllowedData"])
    )

在控制器操作方法中，添加以下代码。

ViewData["IsAllowedData"] = new List<IsAllowedCls>() { new IsAllowedCls { IsAllowedKey = 1, IsAllowedValue = "Yes" },
    new IsAllowedCls { IsAllowedKey = 0, IsAllowedValue = "No" } };