javascript Kendo Grid：取消编辑会删除新行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23132357/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Kendo Grid: Canceling edit deletes new row
提问by mavroprovato
Here is a demoto for the behavior I am experiencing.
这是我遇到的行为的演示。
If you edit the existing row with id 1, change the text to something else and then press the cancel button, the row is reverted correctly to its previous state.
如果您编辑 id 为 1 的现有行，将文本更改为其他内容，然后按取消按钮，该行将正确恢复到以前的状态。
In order to reproduce my problem you need to:
为了重现我的问题，您需要：
- Add a new row
- Press the update button to save it.
- Select the row again and press the update button.
- Press the cancel button
- The row disappears!
- 添加新行
- 按更新按钮保存它。
- 再次选择该行并按下更新按钮。
- 按取消按钮
- 行消失！
Even though there are similar questions on this problem, I have yet to find a satisfactory answer.
尽管这个问题有类似的问题，但我还没有找到满意的答案。
Some people say that I need to define an id. As you can see from my demo, this does not make any difference, the new row has an id and it still disappears.
有人说我需要定义一个id。正如你从我的演示中看到的，这没有任何区别，新行有一个 id，它仍然消失。
There are some suggestions when you are using a remote datasource, but this does not work in my case, I need to use local data.
当您使用远程数据源时，有一些建议，但这在我的情况下不起作用，我需要使用本地数据。
Finally, there is thisanswer. While it does prevent the new row from disappearing, Canceling the row does not revert the data to its old state, it only closes the editor and the data are as they where after the edit.
最后，有这个答案。虽然它确实可以防止新行消失，但取消该行不会将数据恢复到旧状态，它只会关闭编辑器，数据和编辑后的数据一样。
回答by alessalessio
Had the same problem. I had it solved by simply calling the cancelChanges() method of the DataSource:
有同样的问题。我通过简单地调用数据源的 cancelChanges() 方法解决了这个问题：
..
cancel: function(e) {
$('#mainGrid').data('kendoGrid').dataSource.cancelChanges();
},
..
回答by ManirajSS
It seems like bug only.But still you could acheive desired output through the below code.
这似乎只是错误。但您仍然可以通过以下代码实现所需的输出。
- I have introduced new variable tempSavedRecordsand update that variable when you are save or delete the record with kendo datasource data.
When the user clicks cancel button fill the kendo datasource with tempSavedRecords.
$(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(); } });
- 我引入了新变量tempSavedRecords并在您保存或删除带有剑道数据源数据的记录时更新该变量。
当用户单击取消按钮时，用 tempSavedRecords 填充剑道数据源。
$(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(); } });
Hope this helps.Thanks.
希望这有帮助。谢谢。
$(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>回答by demesne
I modified your changes with this pluckr, and it seems to work. The only change that I did was to rename 'id' column to 'ided'.
我用这个pluckr修改了你的更改，它似乎有效。我所做的唯一更改是将“id”列重命名为“ided”。
Somehow the 'id' column name, as shown in kendo examples does not work, and to me it seems like a bug.
不知何故，剑道示例中显示的“id”列名称不起作用，对我来说这似乎是一个错误。
model: {
id: 'ided',
fields: {
ided: { type: 'number' },
description: { type: 'string' },
begin: { type: 'date' }
}
}
回答by Atanas Korchev
This happens because the id remains set to its default value. The data source considers such data items as "new" and cancelling them removes them. Once you save a "new" item you need to set its idto a non-default value.
发生这种情况是因为 id 仍然设置为其默认值。数据源将此类数据项视为“新”数据项，取消它们将删除它们。保存“新”项目后，您需要将其设置id为非默认值。
回答by L. Quety
I could resolve this problem by re-setting the data object after add new row.
我可以通过在添加新行后重新设置数据对象来解决这个问题。
For example:
例如：
function onInsertNewRow(dataItem) {
myDataSource.insert(dataItem);
myDataSource.data(myDataSource.data());
}
By calling data() method you say to grid that the new data asigned is the base data and the new rows are no longer new.
通过调用 data() 方法，你告诉网格分配的新数据是基础数据，新行不再是新的。
I hope this help you.
我希望这对你有帮助。
