Question

我是Kendo和Kendo网格的新手，但我正在尝试学习如何使用主细节Kendo网格，其中细节网格应该支持批量编辑。数据在本地JavaScript对象中可用。

This jsFiddle展示了我所看到的问题。

以下是如何创建网格 - 请参阅jsFiddle获取完整代码段

$("#grid").kendoGrid({
    dataSource: items,
    detailInit: createDetail,
    columns: [
        { field: "Item", width: "200px" },
    ]
});

function createDetail(e) {
    $("<div/>")
        .appendTo(e.detailCell)
        .kendoGrid({
            dataSource: {
                batch:true,
                transport: {
                    read: function (options) {
                        options.success(e.data.SubItems);
                    }
                }
            },
            editable:true,
            pageable:true,
            toolbar: ["save", "cancel"],
            columns: [
                { field: "SubItem", title: "Sub Item", width: 200 },
                { field: "Heading1", title: "Heading 1", width: 100 }
            ]
        });
}

当您编辑网格中的项目并单击下一个单元格时，即使在相邻的单元格中，详细信息网格也会自动折叠，无论我在何处单击。当我再次打开它时，我没有看到单元格中的更改指示器（红色缺口），但新值已存在。如果我将保存连接到ajax调用，Kendo会发送已编辑的正确详细信息。
点击取消更改后没有任何反应。

如何让网格不崩溃并查看更改指示符？

如何取消更改才能正常工作？

[更新] - 进一步的调查显示，如果我使用较旧的剑道版本2011.3.1129，这可以按预期工作。但如果我使用较新的2012.3.1114，它就没有。不知道这是一个错误还是行为的改变。

Answer 1

经过多方努力，我发现原因似乎是主网格自动重新绑定导致我观察到的行为。我能够通过处理主网格中的dataBinding事件并在其中解决这个问题，检查是否有任何详细数据源是脏的，如果是，则调用preventDefault。

以下是相关的代码段：

    dataBinding: function (e) {
               if (masterGrid.AreChangesPending()) {
                   e.preventDefault();
               } 
    }

    AreChangesPending : function () {
        var pendingChanges = false;
        // I gave each detail div an id so that I can get a "handle" to it 
        $('div[id^="detail_"]').each(function (index) {
            var dsrc = $(this).data("kendoGrid").dataSource;
            $.each(dsrc._data, function () {
                if (this.dirty == true || this.isNew()) {
                    pendingChanges = true;
                }
            });

            // For some reason, Kendo did not detect new rows in the isNew() 
            // call above, hence the check below
            if (dsrc._data.length != dsrc._total) {
                pendingChanges = true;
            }
        });

        return pendingChanges;
    }

Kendo网格更改指示灯并取消不起作用

1 个答案: