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

Manually commit cell change and move cell

3 Answers 406 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Paul
Top achievements
Rank 1
Paul asked on 29 Oct 2015, 08:26 PM

I am using in-line editing of data in the kendo grid.  When I am editing a cell I want to do the following:

  1. Press Enter should commit the cell value and close the edit.
  2. Press Tab should commit the cell value and move to the next cell.
  3. Press Escape should cancel the cell change (and revert the value) and stop editing.

At the minute I've tried the following from bits online:

01.$(function () {
02. 
03.            $("#mygrid").keypress(function (e) {
04. 
05.                var keyCode = e.keyCode || e.which;
06.                if (keyCode == 13) {
07.                    debugger;
08.                    var grid = $("#mygrid").data("kendoGrid");
09.                    var curCell = grid.table.find(".k-edit-cell");
10.                    grid.saveRow();
11.                    grid.editCell(curCell.next()); // To move the cursor to the next cell and put the cell in edit mode
12.                    grid.select(curCell.next()); // To select the next cell
13.                    //grid.focus(curCell.next()); // To set focus on to next cell  
14.                    e.preventDefault(); // To prevent the default behavior of the enter key press
15.                }
16.            });
17.        });

I cannot see any method on how to accept the grid cell changes.

Any help on how to accomplish the above greatly appreciated.

Andez

3 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 02 Nov 2015, 11:47 AM

Hello Paul,

 

This is exactly how the Grid behaves, when the navigable option is enabled. Please see this example:

 

http://dojo.telerik.com/ApubE

 

Regards,
Kiril Nikolov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Paul
Top achievements
Rank 1
answered on 03 Nov 2015, 07:29 PM

OK thanks Kiril.  That's what I wanted.

One thing though - if you click a cell then to start editing - as in the demo - the cell changes orange to indicate selection.  However, when you start tabbing/navigating, the background remains on the clicked cell - not as focus moves to other cells.  This doesn't feel right. 

Is this default behaviour?  Its the same on Edge and Chrome for me.

Thanks
0
Kiril Nikolov
Telerik team
answered on 05 Nov 2015, 09:34 AM

Hello Paul,

 

With the next release (scheduled for 11th of November) a navigate event will be introduced, so you can move the selection along with the navigation.

 

Just stay tuned :)

 

Regards,
Kiril Nikolov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Paul
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Paul
Top achievements
Rank 1
Share this question
or