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

Question

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

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

我怎样才能显示一个复选框，允许用户使用复选框执行 '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/

Answer 1

如果您将 class 名称分配给您的复选框列，您可以连接一个点击事件来处理对具有相同 class 名称的元素的所有点击。

例如，您的 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

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

Telerik grid checkbox editor issue with incell editing

asp.net-mvc

telerik

telerik-grid