Kendo Grid:取消编辑删除新行

时间:2014-04-17 11:51:15

标签: javascript kendo-ui telerik kendo-grid

以下是我遇到的行为的demo

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

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

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

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

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

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

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

5 个答案:

答案 0 :(得分:9)

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

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

答案 1 :(得分:4)

它似乎只是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();
            }
        });
    
  3. 希望这会有所帮助。谢谢。

    
    
    $(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>
    &#13;
    &#13;
    &#13;

答案 2 :(得分: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' }
  }
}

答案 3 :(得分:1)

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

答案 4 :(得分:0)

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

例如:

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

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

希望对您有帮助。