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

Posted 2023-05-07

【中文标题】Kendo Grid：取消编辑会删除新行

【英文标题】：Kendo Grid: Canceling edit deletes new row

【发布时间】：2014-06-01 16:17:09

【问题描述】：

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

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

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

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

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

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

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

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

【问题讨论】：

听起来像一个错误，不是吗？你举报了吗？

是的。但是由于我对剑道没有那么丰富的经验，所以我总是认为我做错了什么:-) 当然，如果没有人指出我的代码中的错误，我会将其报告为错误

您可以尝试使用一个局部变量来存储新值并在用户单击取消时恢复为旧值（如我的回答中所述）。

你试过我提供的解决方案了吗？

抱歉，我还没有尝试过你的解决方案，而且距离我上次使用 Kendo UI 已经有好几年了

【参考方案1】：

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

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

【讨论】：

如果我们不更新记录，您的解决方案将起作用。如果我们更新记录，它将创建新记录，因为没有唯一的方式来引用行。检查这个plnkr.co/edit/txCRIJsJoAyQcP5IPMti?p=preview

【参考方案2】：

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

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

当用户点击取消按钮时用 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>

【讨论】：

这实际上很完美。对于任何未来的读者 -> 非常重要

【参考方案3】：

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

【讨论】：

我确实设置了 id 的值，该列是可编辑的。即使我没有，我也不明白为什么取消新项目的编辑会删除它们，这对我来说毫无意义。

【参考方案4】：

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

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

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

【参考方案5】：

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

例如：

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

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

希望对你有所帮助。