Kendo Grid: Canceling edit deletes new row

Question

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.

Answer 1

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

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

2. 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: ' ', 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: ' ', 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>

Answer 2

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.

Answer 3

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