Grid Inline editing return key to auto update

[Louise]

I have a grid with incell editing, I need to be able to double-click the line to enter edit mode then have return key press save changes and exit edit mode. I have the edit working by clicking edit then update but return key press automatically cancels the change, I expected that to automatically save. Can anyone help, this seems like a simple request that someone else must have figured out a workaround.

[Connections Academy Developer]

bump, I have the same question and can't find an answer anywhere...

[Vladimir Iliev]

Hi Louise,

Please find the answers of your questions below:

• To be able to enter edit mode using double click on given row of the grid you can use the jQuery on method to attach "dblclick" event handler to the grid "tbody" element and use the editRow method to switch the current row to edit mode. Please check the example below:

  $("#Grid tbody").on("dblclick", "tr", function (e) {
      var grid = $("#Grid").data("kendoGrid");
  
      //Edit row
      grid.editRow($(e.srcElement).closest("tr"));
  })4

• To be able to save the current row and close the edit mode by pressing the "Enter" key you can attach "keydown" event handler to the grid "tbody" element which checks if the currently pressed key is "Enter" key to use the saveRow method - please check the example below:  

  $("#Grid tbody").on("keydown", "tr", function (e) {
      var grid = $("#Grid").data("kendoGrid");
  
      //get the pressed key code
      var code = (e.keyCode ? e.keyCode : e.which);
      if (code == 13) { //Enter keycode
          $(e.srcElement).closest("tbody").focus();
          setTimeout(function () {
              grid.saveRow();
          })
      }
  })

          

Kind Regards,
Vladimir Iliev
the Telerik team

[Ross Micheals]

(misleading post removed by author)

[Ross Micheals]

Vladimir's proposed solution does not work consistently. If I delete a single character with a backspace, and then hit ENTER, the model is not updated correctly. However, sometimes the model *is* updated correctly. Also, IE seems to require that I handle the event on a 'keyup.'

In addition, for the doubleclick handler, 'e.srcElement' is undefined as well.

[Vladimir Iliev]

Hi Ross,

Indeed the proposed solution doesn't work correctly in all cases - please check the updated event handlers below (tested on IE7-10, Chrome & FF using KendoUI Q1 2013):

$(function () {
    $("#grid table").on("dblclick", "tr", function (e) {
        var grid = $("#grid").data("kendoGrid");
        grid.editRow($(this));
    })

    $("#grid table").on("keydown", "tr", function (e) {
        var grid = $("#grid").data("kendoGrid");
        var code = (e.keyCode ? e.keyCode : e.which);

        if (code == 13) { //Enter keycode
            $(e.srcElement).closest("tbody").focus();
            setTimeout(function () {
                grid.saveRow();
            })
        }
    })
})

 
Kind Regards,
Vladimir Iliev
the Telerik team

[mark baer]

Vladimir, will that work if I have multiple grids on the same page?  Will the grids get confused?  At what point should I attach the code, document.ready?  On Edit?

thanks

[Vladimir Iliev]

Hi Mark,


Basically the code should be executed in "document.ready" event handler after the corresponding Grid is initialized. The code can be used for more than one Grid on the same page as the selectors are using "id" attribute to find the correct one. If you need to use the same code block for all Grids on the page you should modify it to get the current Grid based on the clicked element (custom code required).

Regards,
Vladimir Iliev
Telerik