如何将Kendo Grid的单元格标记为已编辑?

时间:2015-06-13 05:27:59

标签: kendo-ui kendo-grid kendo-asp.net-mvc

我正在使用JavaScript动态编辑某些字段。但问题是Kendo的dataSource不会将它们识别为已更改的单元格。

网格的编辑模式为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");

1 个答案:

答案 0 :(得分:0)

嗯,我提出的最佳解决方案是当鼠标进入该单元格时将单元格置于编辑模式!因此,我只是使用这个而不是问题中的整个JS代码。

fileX-1

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