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.

Simas

Sounds like a bug, no? Have you reported it? – Denier

Yes it does. But as I'm not that experienced with Kendo, I always assume that I did something wrong :-) Of course if no one points out a mistake in my code I will report it as a bug – Simas

you may try with one local variable to store new values and revert back to old values when user clicks cancel(As stated in my answer). – Duello

have you tried the solution i provided? – Kahlil

Sorry but I haven't tried your solution, and it's been years since I last used Kendo UI – Simas

Answer 1

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

Kahlil

Your solution will work if we don't update the record. If we update the record it will create new records since there is no unique way to refer row. Check this plnkr.co/edit/txCRIJsJoAyQcP5IPMti?p=preview – Prelature

Answer 2

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>

Duello

this actually works perfect. For any future readers -> VERY IMPORTANT <- make sure to include his code for remove event. otherwise ur in for another bug. – Harve

Answer 3

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.

Pah

I do set the value of the id, the column is editable. And even if I didn't, I do not understand why canceling the editing of new items should remove them, it makes no sense to me. – Simas

Answer 4

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' }
  }
}

Holsinger

Answer 5

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.

Capello