这是我正在经历的行为的演示。
如果编辑 id 为 1 的现有行，将文本更改为其他内容，然后按取消按钮，该行将正确恢复到之前的状态。
为了重现我的问题，您需要：
尽管这个问题也有类似的问题，但我还没有找到满意的答案。
有人说我需要定义一个id。正如你从我的演示中看到的，这没有任何区别，新行有一个 id，但它仍然消失。
当您使用远程数据源时，有一些建议，但这在我的情况下不起作用，我需要使用本地数据。
最后，有这个答案。虽然它确实可以防止新行消失，但取消行不会将数据恢复到旧状态，它只会关闭编辑器，并且数据与编辑后的状态相同。
有同样的问题。我通过简单地调用 DataSource 的 cancelChanges() 方法解决了这个问题：
..
cancel: function(e) {
$('#mainGrid').data('kendoGrid').dataSource.cancelChanges();
},
..
这似乎只是错误。但您仍然可以通过下面的代码实现所需的输出。
当用户单击取消按钮时 用 tempSavedRecords 填充 kendo 数据源。
$(document).ready(function() {
var tempSavedRecords = null;
var gridDataSource = new kendo.data.DataSource({
data: [
{ id: 1, description: 'Test 1', begin: new Date() }
],
schema: {
model: {
id: 'id',
fields: {
id: { type: 'number' },
description: { type: 'string' },
begin: { type: 'date' }
}
}
}
});
$('#grid').kendoGrid({
dataSource: gridDataSource,
scrollable: true,
sortable: true,
toolbar: ['create'],
columns: [
{ field: 'id', title: 'ID', width: 'auto' },
{ field: 'description', title: 'Description', width: 'auto' },
{ field: 'begin', title: 'Begin', width: 'auto', format: '{0:d}' },
{ command: ['edit', 'destroy'], title: ' ', width: '172px'}],
editable: {
mode: 'inline',
confirmation: false
},
save:function(e){
updateTempRecords();
},
cancel:function(e){
if(tempSavedRecords != null){
$('#grid').data('kendoGrid').dataSource.data(tempSavedRecords);
}
else{
$('#grid').data('kendoGrid').dataSource.cancelChanges();
}
},
remove:function(e){
$('#grid').data('kendoGrid').dataSource.remove(e.model)
updateTempRecords();
}
});
function updateTempRecords(){
tempSavedRecords = $('#grid').data('kendoGrid').dataSource.data();
tempSavedRecords = tempSavedRecords.toJSON();
}
});
希望这有帮助。谢谢。
$(document).ready(function() {
var tempSavedRecords = null;
var gridDataSource = new kendo.data.DataSource({
data: [
{ id: 1, description: 'Test 1', begin: new Date() }
],
schema: {
model: {
id: 'id',
fields: {
id: { type: 'number' },
description: { type: 'string' },
begin: { type: 'date' }
}
}
}
});
$('#grid').kendoGrid({
dataSource: gridDataSource,
scrollable: true,
sortable: true,
toolbar: ['create'],
columns: [
{ field: 'id', title: 'ID', width: 'auto' },
{ field: 'description', title: 'Description', width: 'auto' },
{ field: 'begin', title: 'Begin', width: 'auto', format: '{0:d}' },
{ command: ['edit', 'destroy'], title: ' ', width: '172px' }
],
editable: {
mode: 'inline',
confirmation: false
},
save:function(e){
updateTempRecords();
},
cancel:function(e){
if(tempSavedRecords != null){
$('#grid').data('kendoGrid').dataSource.data(tempSavedRecords);
}
else{
$('#grid').data('kendoGrid').dataSource.cancelChanges();
}
},
remove:function(e){
$('#grid').data('kendoGrid').dataSource.remove(e.model)
updateTempRecords();
}
});
function updateTempRecords(){
tempSavedRecords = $('#grid').data('kendoGrid').dataSource.data();
tempSavedRecords = tempSavedRecords.toJSON();
}
});<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="grid"></div>
<script src="http://cdn.kendostatic.com/2014.1.318/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<script src="script.js"></script>
</body>
</html>发生这种情况是因为 id 仍设置为其默认值。数据源将此类数据项视为“新”数据项，并取消它们将删除它们。保存“新”项目后，您需要将其
id我用这个pluckr修改了你的更改，它似乎有效。 我所做的唯一更改是将“id”列重命名为“ided”。
不知何故，剑道示例中所示的“id”列名称不起作用，对我来说这似乎是一个错误。
model: {
id: 'ided',
fields: {
ided: { type: 'number' },
description: { type: 'string' },
begin: { type: 'date' }
}
}
我可以通过在添加新行后重新设置数据对象来解决这个问题。
例如：
function onInsertNewRow(dataItem) {
myDataSource.insert(dataItem);
myDataSource.data(myDataSource.data());
}
通过调用 data() 方法，您可以向 grid 表示分配的新数据是基础数据，并且新行不再是新的。
我希望这对你有帮助。
在使用本地数据时我也遇到了这个问题，而且我不喜欢之前的任何建议，因为两者都有副作用。
解决方案很简单。不要使用
addpushCreatedataSource.pushCreate({ name: 'Something' })
但是，如果您不想在集合末尾添加新项目，则会变得更加复杂。
我仍然认为取消后消失行为是 Kendo 库中的一个错误。