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

Question

这是我正在经历的行为的演示.

如果编辑id为1的现有行,将文本更改为其他行,然后按取消按钮,该行将正确恢复为其先前状态.

为了重现我的问题,您需要:

• 添加一个新行
• 按更新按钮进行保存.
• 再次选择该行,然后按更新按钮.
• 按取消按钮
• 这一行消失了!

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

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

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

最后,有这个答案.虽然它确实可以防止新行消失,但取消该行不会将数据恢复到旧状态,它只会关闭编辑器,并且数据与编辑后的数据相同.

Answer 1

有同样的问题.我通过简单地调用DataSource的cancelChanges()方法解决了它:

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

Answer 2

看起来好像只是bug，但是仍然可以通过以下代码实现所需的输出。

1. 我引入了新变量tempSavedRecords，并在使用kendo 数据源数据保存或删除记录时更新该变量。

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

$(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();
    }
});

Answer 3

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