Kendo Grid：取消编辑会删除新行

Question

这是我正在经历的行为的demo。

如果您编辑 id 为 1 的现有行，将文本更改为其他内容，然后按取消按钮，该行将正确恢复到之前的状态。

为了重现我的问题，您需要：

• 添加新行
• 按更新按钮进行保存。
• 再次选择该行并按下更新按钮。
• 按取消按钮
• 该行消失了！

虽然这个问题有类似的问题，但我还没有找到满意的答案。

有人说我需要定义一个id。从我的演示中可以看出，这没有任何区别，新行有一个 id 并且它仍然消失。

当你使用远程数据源时有一些建议，但这在我的情况下不起作用，我需要使用本地数据。

终于有this的答案了。虽然它确实可以防止新行消失，但取消该行不会将数据恢复到其旧状态，它只会关闭编辑器，并且数据在编辑后保持原样。

Answer 1

遇到了同样的问题。我通过调用 DataSource 的 cancelChanges() 方法解决了这个问题：

..
cancel: function(e) {
            $('#mainGrid').data('kendoGrid').dataSource.cancelChanges();
        },
..

Answer 2

这似乎只是错误。但您仍然可以通过以下代码获得所需的输出。

1. 我引入了新变量 tempSavedRecords 和 update 使用剑道保存或删除记录时的该变量 数据源数据。

2. 当用户点击取消按钮时用 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();
           }
       });
   

希望这会有所帮助。谢谢。

$(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>

Answer 3

发生这种情况是因为 id 仍设置为其默认值。数据源将此类数据项视为“新的”，取消它们会删除它们。保存“新”项目后，您需要将其 id 设置为非默认值。

Answer 4

我用这个pluckr 修改了你的更改，它似乎有效。 我所做的唯一更改是将“id”列重命名为“ided”。

不知何故，剑道示例中显示的“id”列名不起作用，对我来说这似乎是一个错误。

model: {
  id: 'ided',
  fields: {
    ided: { type: 'number' },
    description: { type: 'string' },
    begin: { type: 'date' }
  }
}

Answer 5

我可以通过在添加新行后重新设置数据对象来解决这个问题。

例如：

function onInsertNewRow(dataItem) {
  myDataSource.insert(dataItem);
  myDataSource.data(myDataSource.data());
}

通过调用 data() 方法，你告诉网格分配的新数据是基础数据，新行不再是新的。

希望对你有所帮助。