How to undo the modification of a single data row in the datagrid?

[officecode]

When I submit the modified data to the server in onAfterEdit, if the submission fails, how can I cancel the modification of the current row? Even if I add the cancelEdit method to it, I can't get back to the original data. I can't use rejectChanges here because it will undo all the changes in the table.
Please help, thank you.

Code:

      onAfterEdit:function(index,row,changes){
            var inserted = $(this).datagrid('getChanges','inserted');
            var updated = $(this).datagrid('getChanges','updated');
            $.post('crud.php',{
                type: (inserted.length > 0) ? 'add' : 'update',
                row:row
            },function(data){
		if(data){
		            row.editing = false;
        		    $('#test').datagrid('refreshRow', index);
                }else{
        		    $('#test').datagrid('cancelEdit', index);
        		    $('#test').datagrid('beginEdit', index);
		}
            })
      },

[officecode]

I tried to add a data property to the row in the onBeforeEdit event to save the pre-edit value, then get the data in onAfterEdit and set the value to the row.
However, it is invalid!

Code:

onBeforeEdit:function(index,row){
            row.editing = true;
            $(this).datagrid('refreshRow', index);
  	    row.data = row;
},

onAfterEdit:function(index,row,changes){
            var oldrow = row.data;
            delete row.data;
            var inserted = $(this).datagrid('getChanges','inserted');
            var updated = $(this).datagrid('getChanges','updated');
            $.post('crud.php',{
                type: (inserted.length > 0) ? 'add' : 'update',
                row:row
            },function(data){
		if(data){
		            row.editing = false;
        		    $('#test').datagrid('refreshRow', index);
                }else{
                            row = oldrow;
        		    $('#test').datagrid('cancelEdit', index);
        		    $('#test').datagrid('beginEdit', index);
		}
            })
},

[stworthy]

Please look at this code. It does no any changes although editing it.

Code:

$('#dg').datagrid({
  onBeforeEdit: function(index,row){
    row.originalData = $.extend({},row);
  },
  onAfterEdit: function(index,row){
    if (row.originalData){
      $(this).datagrid('updateRow', {index:index,row:row.originalData});
      row.originalData = null;
    }
  }
})

[officecode]

Oh, it's my object reference problem.
Thank you for your reply and help!

After testing, if all the columns have content before editing, this processing method is no problem. If it is a newly added row, the row in the onBeforeEdit event is {}, and then it is useless when updating with the updateRow method in the onAfterEdit event.
How can I get the full value of the row in the onBeforeEdit event?

[officecode]

Moreover, even if data is restored using updateRow, this data row will still exist when using ‘getChanges’.
Is there any way to deal with it more perfect?

[stworthy]

For the newly added row, you should delete it if you want to cancel the row.