Grid cancel event not firing

[Larissa]

Hi,

I'm trying to use the cancel event in a grid, but the event is never fired.

Code:

$("#grid").kendoGrid({
        editable: true,
        toolbar: ["create", "save", "cancel"],
        dataSource: _dataSource,
        columns: [{
            title: "Description",
            field: "description"
        }, {
            title: "Active",
            field: "active"
        }],
        edit: function (e) {
            console.log("add row");
        },
        cancel: function (e) {
            console.log("cancel row");
        }
});

When I click on "Add new record", the console shows "add row", but when I click on "Cancel changes" nothing shows up in the console.

It is a pretty simple code and it is following the documentation, but am I missing something?

Version: Kendo UI v2016.1.112

Thanks!

[Patrick | Technical Support Engineer, Senior]

Hi Larissa,

The cancel event for the Kendo Grid is not fired when the cancel button in the toolbar is clicked.  It is fired when a user the clicks the cancel button in inline or popup mode, or closes a popup window.

However, you can execute some logic when you bind to the mousedown event of the button itself .  Please take a look at this Telerik Dojo which illustrates this behavior for the add record and cancel changes buttons.

Here is the code used for this approach:

$("#grid").on("mousedown",".k-grid-cancel-changes", function(e){
  console.log("Cancel row");
});

$("#grid").on("mousedown",".k-grid-add", function(e){
  console.log("Add row");
});

Hope this helps steer you in the right direction.

Regards,
Patrick
Telerik

 

 

[Larissa]

Thanks! I misunderstood.

[Patrick | Technical Support Engineer, Senior]

Hi Larissa,

Glad that helped clear things!

Regards,
Patrick
Telerik

 

 

[Ashley]

[quote]Patrick said:Hi Larissa,

The cancel event for the Kendo Grid is not fired when the cancel button in the toolbar is clicked.  It is fired when a user the clicks the cancel button in inline or popup mode, or closes a popup window.

[/quote]

Hey Patrick, 

I created a small demo to test the cancelChanges() function. However, it only worked with "editable:true" instead of popup and inline.

Here is the link 

http://dojo.telerik.com/idAreK/16

 

 

[Patrick | Technical Support Engineer, Senior]

Hi Ashley,

To help clarify, the Cancel event is separate from the CancelChanges method.  

The cancelChanges method's functionality is to cancel any pending changes that have not already been updated or saved.  So pertaining to your dojo: when you are in edit mode, and you select Update, it saves the pending changes.  If you press refresh before hitting update, it'll exit edit mode and cancel any changes made.

Here is a Progress Kendo UI Dojo which can help further show cancelChanges().

Here are the steps to use in this demonstration:

1.  Click Add Row - This will add a row to the Grid.  It will be pending since there isn't really a way to save it.  You can add info the row if you would like to, and you'll see red flags which also signals it's pending data.

2.  Click Refresh - This will fire cancelChanges() and remove the added row because it was not saved.  

Here is a screencast of the above.

I hope this helps clear things!

Regards,
Patrick
Progress Telerik

[Ashley]

 [quote]Patrick said:Hi Ashley,

To help clarify, the Cancel event is separate from the CancelChanges method.  

The cancelChanges method's functionality is to cancel any pending changes that have not already been updated or saved.  So pertaining to your dojo: when you are in edit mode, and you select Update, it saves the pending changes.  If you press refresh before hitting update, it'll exit edit mode and cancel any changes made.

Here is a Progress Kendo UI Dojo which can help further show cancelChanges().

Here are the steps to use in this demonstration:

1.  Click Add Row - This will add a row to the Grid.  It will be pending since there isn't really a way to save it.  You can add info the row if you would like to, and you'll see red flags which also signals it's pending data.

2.  Click Refresh - This will fire cancelChanges() and remove the added row because it was not saved.  

Here is a screencast of the above.

I hope this helps clear things!

Regards,
Patrick
Progress Telerik

[/quote]

Hey Patrick, 

Thank you so much for your reply. It helped a lot.

I just wonder if I could cancel changes after data was saved. My scenario is that when I click a refresh button, all the changes user made could be cancelled. In other words, can I reload the original datasource after I modify it? 

I am using popup edit model.

Thank you so much 

[Stefan]

Hello Ashley,

Currently, the changes can be cancelled before saving them in the database. Once the modified data is saved in the database, the Kendo UI Grid has no control over it as it is a UI widget which is responsible for the client-side operations.

Also, which changes has to be reverted, for example, the user can save multiple changes for one session?

If only the initial state has to be reverted, I can suggest on the Grid initial load, to save the current data in a variable using the data method of the dataSource, and then when the refresh button is clicked to apply the old data to the Grid using the same method and to manually call saveChanges. Please have in mind that this will only work with client operations, as with server operations the Grid does not contain all of the data:

https://admin.telerik.com/docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-data

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-saveChanges

Regards,
Stefan
Progress Telerik