Kendo UI 网格复选框列

Posted 2023-05-07

【中文标题】Kendo UI 网格复选框列

【英文标题】：KendoUI grid checkbox column

【发布时间】：2016-12-31 15:56:26

【问题描述】：

目前我正在使用此代码来显示 KendoUI 网格：

@(html.Kendo().Grid<CleverFit.Models.MyHistorie>()
      .Name("grid")
      .DataSource(dataSource => dataSource // Configure the grid data source
          .Ajax() // Specify that ajax binding is used
          .Read(read => read.Action("Products_Read", "Action")) // Set the action method which will return the data in JSON format
       )
      .Columns(columns =>
      
        columns.Bound(product => product.Datum).Format("0:dd.MM.yyyy");
        columns.Bound(product => product.Aktion);
        columns.Bound(product => product.Ergebnis);
        columns.Bound(product => product.Wiedervorlage).Format("0:dd.MM.yyyy H:mm");
        columns.Bound(product => product.Bemerkung);
        columns.Bound(product => product.Erledigt);
      )
      .Pageable() // Enable paging
      .Sortable() // Enable sorting
)

我已经试过了：

columns.Bound(product => product.Erledigt).ClientTemplate(
    "<input type='checkbox' value='#= ProductID #' " +
        "# if (Enabled)  #" +
            "checked='checked'" +
        "#  #" +
    "/>"
);

但是如果我添加这个，网格中没有显示数据...

最后一列product.Erledigt 的值显示为真或假。是否可以将它们显示为复选框？

我正在使用 Telerik KendoUI 并通过 AJAX 加载模板的内容。

【参考方案1】：

您可以查看以下常见问题页面：

http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/faq#how-to-display-checkboxes-in-ajax-bound-grids

此外，您可以将复选框设置为只读或禁用，以防止用户对其进行编辑并期望更改被保留。

更新

您尝试过的代码包含两个数据字段值，它们显然不存在于您的网格中：ProductID 和Enabled。您很可能在浏览器控制台中收到 javascript 错误。将Enabled 替换为Erledigt 并删除value='#= ProductID #'，如果您不需要这样的东西。

【讨论】：

感谢您的快速回答，但如果我添加完全相同的代码，网格不会显示任何数据

完美的做到了！

您还知道如何禁用它的编辑功能吗？我更愿意使用 Kendo (HtmlHelper) 而不是 ClientTemplate 中的 html