This is a migrated thread and some comments may be shown as answers.

Grid Inline editing return key to auto update

7 Answers 648 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Louise
Top achievements
Rank 1
Louise asked on 11 Nov 2012, 07:55 PM
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.

7 Answers, 1 is accepted

Sort by
0
Connections Academy Developer
Top achievements
Rank 1
answered on 22 Feb 2013, 02:40 PM
bump, I have the same question and can't find an answer anywhere...
0
Vladimir Iliev
Telerik team
answered on 27 Feb 2013, 09:40 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Ross Micheals
Top achievements
Rank 1
answered on 27 Mar 2013, 03:00 PM
(misleading post removed by author)
0
Ross Micheals
Top achievements
Rank 1
answered on 27 Mar 2013, 03:12 PM
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.
0
Vladimir Iliev
Telerik team
answered on 01 Apr 2013, 07:49 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
mark baer
Top achievements
Rank 1
answered on 20 Aug 2014, 08:16 PM
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
0
Vladimir Iliev
Telerik team
answered on 21 Aug 2014, 07:29 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Grid
Asked by
Louise
Top achievements
Rank 1
Answers by
Connections Academy Developer
Top achievements
Rank 1
Vladimir Iliev
Telerik team
Ross Micheals
Top achievements
Rank 1
mark baer
Top achievements
Rank 1
Share this question
or