Kendo Grid: Canceling edit deletes new row

Here is a demo to for the behavior I am experiencing.

If you edit the existing row with id 1, change the text to something else and then press the cancel button, the row is reverted correctly to its previous state.

In order to reproduce my problem you need to:

Add a new row
Press the update button to save it.
Select the row again and press the update button.
Press the cancel button
The row disappears!

Even though there are similar questions on this problem, I have yet to find a satisfactory answer.

Some people say that I need to define an id. As you can see from my demo, this does not make any difference, the new row has an id and it still disappears.

There are some suggestions when you are using a remote datasource, but this does not work in my case, I need to use local data.

Finally, there is this answer. While it does prevent the new row from disappearing, Canceling the row does not revert the data to its old state, it only closes the editor and the data are as they where after the edit.

Had the same problem. I had it solved by simply calling the cancelChanges() method of the DataSource:

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

It seems like bug only.But still you could acheive desired output through the below code.

I have introduced new variable tempSavedRecords and update that variable when you are save or delete the record with kendo datasource data.

When the user clicks cancel button fill the kendo datasource with 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: '&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();
        }
    });

Hope this helps.Thanks.

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

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

I modified your changes with this pluckr, and it seems to work. The only change that I did was to rename 'id' column to 'ided'.

Somehow the 'id' column name, as shown in kendo examples does not work, and to me it seems like a bug.

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

This happens because the id remains set to its default value. The data source considers such data items as "new" and cancelling them removes them. Once you save a "new" item you need to set its id to a non-default value.

I could resolve this problem by re-setting the data object after add new row.

For example:

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

By calling data() method you say to grid that the new data asigned is the base data and the new rows are no longer new.

I hope this help you.

来源：https://stackoverflow.com/questions/23132357/kendo-grid-canceling-edit-deletes-new-row

标签

javascript

kendo-ui

telerik

kendo-grid