Grid cancel event not firing

8 posts, 0 answers
  1. Larissa
    Larissa avatar
    19 posts
    Member since:
    Dec 2015

    Posted 05 May 2016 Link to this post

    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!

  2. Patrick
    Admin
    Patrick avatar
    230 posts

    Posted 05 May 2016 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Larissa
    Larissa avatar
    19 posts
    Member since:
    Dec 2015

    Posted 09 May 2016 in reply to Patrick Link to this post

    Thanks! I misunderstood.
  4. Patrick
    Admin
    Patrick avatar
    230 posts

    Posted 09 May 2016 Link to this post

    Hi Larissa,

    Glad that helped clear things!

    Regards,
    Patrick
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Ashley
    Ashley avatar
    7 posts
    Member since:
    Mar 2017

    Posted 29 Jun 2017 in reply to Patrick Link to this post

    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.

    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

     

     

  6. Patrick
    Admin
    Patrick avatar
    230 posts

    Posted 30 Jun 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Ashley
    Ashley avatar
    7 posts
    Member since:
    Mar 2017

    Posted 02 Jul 2017 in reply to Patrick Link to this post

     
    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

    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 

  8. Stefan
    Admin
    Stefan avatar
    2915 posts

    Posted 05 Jul 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top