Telerik 网格复选框编辑器问题与 incell 编辑答案

【问题标题】：Telerik grid checkbox editor issue with incell editingTelerik 网格复选框编辑器问题与 incell 编辑
【发布时间】：2017-05-26 15:12:24
【问题描述】：

嘿，我遇到了 Telerik Grid 的问题。如您所见，我的网格中嵌入了一个复选框作为模板。

问题是使用上面显示的模板，当我单击模板显示的复选框时，我无法编辑单元格。相反，我必须单击单元格中的其他位置以启用单元格的“编辑”，然后显示默认编辑器，我可以更改文本框。

我怎样才能有一个复选框显示，允许用户使用复选框执行“incell”编辑，并且没有奇怪的行为，即必须单击单元格中的某处（而不是复选框）以启用编辑模式之前复选框可以修改吗？

@(Html.Kendo().Grid<Model>()
            .Columns(columns =>
            {
              columns.Bound(kunde => kunde.Name);
              columns.Bound(kunde => kunde.Street);
              columns.Bound(kunde => kunde.Erledigt).ClientTemplate(
                "<input type='checkbox' disabled='disabled'" +
                    "# if (Erledigt) { #" +
                        "checked='checked'" +
                    "# } #" +
                "/>"
            );

下面的 JS fiddle 显示了问题：

http://jsfiddle.net/cn172/EntQX/2/

【问题讨论】：

标签： asp.net-mvc telerik telerik-grid

【解决方案1】：

如果您为复选框列分配类名，则可以连接一个单击事件，该事件处理对具有相同类名的元素的所有点击。

例如，您的ClientTemplate 将变为：

.ClientTemplate("<input type='checkbox' #= Erledigt ? checked='checked' : checked='' # class='checkboxColumn' />");

在您的脚本中，使用以下内容连接点击事件：

<script>
    $(function () {
        $('#NameOfYourGrid').on('click', '.checkboxColumn', function () {
            var checked = $(this).is(':checked');
            var grid = $('#NameOfYourGrid').data().kendoGrid;
            grid.closeCell();
            var dataItem = grid.dataItem($(this).closest('tr'));
            var col = $(this).closest('td');
            grid.editCell(col);
            dataItem.set(grid.columns[col.index()].field, checked);
            grid.closeCell(col);
        });
    });
</script>

注意：为此，您需要将Name 属性分配给您的网格，如果您还没有这样做，例如：

@(Html.Kendo().Grid<Model>()
    .Name("NameOfYourGrid")
    .Columns(columns => ... columnDefinition

【讨论】：