Question

以下是我遇到的行为的demo。

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

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

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

即使在这个问题上有类似的问题，我还没有找到一个满意的答案。

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

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

最后，有this个答案。虽然它确实可以防止新行消失，但是取消行不会将数据恢复到旧状态，它只会关闭编辑器，数据就像编辑后的数据一样。

Answer 1

有同样的问题。我通过简单地调用DataSource的cancelChanges（）方法解决了它：

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

Answer 2

它似乎只是bug。但是你仍然可以通过下面的代码实现所需的输出。

我引入了新变量 tempSavedRecords 和更新使用kendo保存或删除记录时的变量数据源数据。

当用户点击取消按钮时使用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: '&nbsp;', 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();
        }
    });

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

＆＃13;

$(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: '&nbsp;', 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();
    }
});

＆＃13;

<!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>

＆＃13;

Answer 3

我使用此pluckr修改了您的更改，但它似乎有效。我做的唯一改变是重命名＆＃39; id＆＃39;列到＆＃39; ided＆＃39;。

不知何故，＆＃39; id＆＃39;列名，如kendo示例中所示不起作用，对我而言似乎是一个错误。

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

Answer 4

这是因为id仍然设置为其默认值。数据源将此类数据视为＆＃34; new＆＃34;并取消它们将其删除。一旦你保存了一个新的＆＃34;您需要将其id设置为非默认值的项目。

Answer 5

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

例如：

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

通过调用data（）方法，您说要网格化分配的新数据是基础数据，而新行不再是新数据。

希望对您有帮助。

Kendo Grid：取消编辑删除新行

5 个答案: