Kendo Grid: Trigger Update click on enter key press for popup editing

Question

I'm using the Kendo UI Grid with popup editing. By default, when the user is editing a field in the popup editor and hits the enter key the data is rendered to the grid (behind the popup editor) but the popup stays visible and the save event is not fired until you click the 'Update' button.

I'm trying to change that functionality so that when a user hits enter while editing a field it would trigger the 'Update' button click - meaning it would render the data to the grid, fire the save event and close the popup editor.

My current attempt will just close the popup editor but does not fire the save event and undoes the changes made to any fields for the selected row. Almost like the cancel button was triggered instead.

options.edit = function (e) {
    $('.k-edit-field .k-input').on('keypress', function (e) {
        utils.onEnter(e, function () {
            $('.k-grid-update').trigger('click');
        });
    });
};

How can I trigger the 'Update' button click, or at least simulate what it does?

Answer 1

I wasn't able to find a kendo method to cause the changed fields to become dirty and then be saved, so I used a little jQuery and just shifted the focus to the update button then triggered the click event. Works as expected...

options.edit = function (e) {
    $('.k-edit-field .k-input').on('keypress', function (e) {
        utils.onEnter(e, function () {
            $('.k-grid-update').focus().trigger('click');

        });
    });
};

Answer 2

I would suggest to use the saveRow method which will save the current data and close the PopUp editor.

e.g.:

$("#grid").data("kendoGrid").saveRow();