Question

嘿，我遇到了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小提琴显示了问题：

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

Answer 1

如果您为复选框列指定了一个类名，则可以挂钩一个click事件，该事件处理具有相同类名的元素的所有点击。

例如，您的ClientTemplate将成为：

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

在您的脚本中，使用以下内容挂钩click事件：

<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

带有incell编辑的Telerik网格复选框编辑器问题

1 个答案: