如何将 Kendo 网格的单元格标记为已编辑？

Question

我正在使用 JavaScript 动态编辑一些字段。但问题是 Kendo 的数据源无法将它们识别为已更改的单元格。

网格的编辑模式是InCell。

这是我当前的 JavaScript 代码：

tablesGrid.tbody.find("input[type='checkbox']").each(function () {
    $(this).on('change', function () {
        var isChecked = $(this).prop('checked');
        var dataItem = tablesGrid.dataItem($(this).closest('tr'));
        var currentTr = $(this).closest('tr');
        var i = $('td:visible', currentTr).index($(this).closest('td'));
        var head = tablesGrid.thead.find('th:visible')[i];
        var headName = $(head).prop('dataset').field;
        tablesGrid.editCell($(this).closest('td'));
        dataItem[headName] = isChecked;
        tablesGrid.refresh();
    });
});

如果您对这段代码感到疑惑，请注意我使用的是客户端模板来显示复选框。但我不希望用户双击单元格进行编辑，一次将其置于编辑模式，而另一次则更改复选框。我不确定我是否使用了正确的解决方案，但 JS 代码确实有效。如果我单击单元格并将其置于编辑模式，我将看到更改。

@(Html.Kendo().Grid<grid>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(x => x.field)
            .ClientTemplate("<input type='checkbox' class='checkbox-inline' #=field? checked='checked':''# />")
            .EditorTemplateName("Checkbox");

Answer 1

好吧，我想到的最佳解决方案是当鼠标进入单元格时将单元格置于编辑模式！所以我没有使用问题中的整个 JS 代码，而是简单地使用了这个。

tablesGrid.bind('dataBound', function () {

    tablesGrid.tbody.find('td').each(function () {
        $(this).mouseenter(function () {
            tablesGrid.editCell(this);
        });
    });
});

如果您有任何更好或更有效的使用可编辑的方法，请告诉我网格内的复选框。

如何将 Kendo 网格的单元格标记为已编辑？

How to mark Kendo Grid's cell as edited?

kendo-ui

kendo-grid

kendo-asp.net-mvc