[Solved] Batch Editing Grid

[Claudio]

I am interested in using the Batch Editing Grid, is there a way to use the TAB ( or UP DOWN ARROWS ) to move the focus from one cell to the adjacent cell  ?

[Petur Subev]

Hello Claudio,

To achieve it you can use the KeyboardNavigation option which provides useful keyboard shortcuts including the Up/Down/Left/Right arrow navigation through the cells. 

Regards,
Petur Subev
the Telerik team

[Oscar]

Hello Peter:
Arrows do not work if the cell is in edit mode. Is there a way to put the cell in edit mode when the cell gets focus? If a user has to change all the cells in a column, he/she has to:
1) Click the first cell of the column to change. Click makes the cell enters in edit mode. That's ok.
2) Change the cell value.
3) Press enter to update the value and leave the edit mode
4) Press down arrow to go to the next cell below in the same column.
5) Press enter so the cell gets in edit mode.
6) Repeat the steps from 2) for every cell in that column.

The user should press fewer keys to achieve this task, in a manner more similar to excel:
1) Click the first cell.
2) Change value
3) Press down arrow
4) Change value,
 and so on...

[Petur Subev]

Hello Claudio,

I am afraid that such functionality is not supported out-of-the-box. To achieve it you can use the editCell and saveCell methods exposed by the Grid client object (they accept a td element). The following snippet shows an example handling the right arrow key:

$('#Grid').keydown(function (e) {
    if (e.keyCode == 39) {
        debugger;
        var grid = $('#Grid').data('tGrid');
        var $currentCell = $(e.target).closest('td');
        grid.saveCell($currentCell);
        grid.editCell($currentCell.next());
    }
})

All the best,
Petur Subev
the Telerik team

[venky]

Hello Petur,
How can I achieve the same with an Up/Down arrow key. I am interested in finding the cell object just above/below the
currently edited cell. Thank you in advance.
venky

[Petur Subev]

Hello Claudio,

You can use the following approach to get the cell above the currently editing:

if (e.keyCode == 38) {
    var grid = $('#Grid').data('tGrid');
    var $currentCell = $(e.target).closest('td');
    var index = $currentCell.index();
    var $cellAbove = $currentCell.parent().prev().find('td').eq(index);
    grid.saveCell($currentCell);
    grid.editCell($cellAbove);
}

To get the cell below you should change the prev() with next() in the snippet.

All the best,
Petur Subev
the Telerik team

[David]

Unfortunately, I've tried this approach and it is a bit buggy.  When you click on another cell, the current cell does not leave edit mode.  Same if you press tab (which by the way tab will then select the wrong cell).  Are there any more workarounds to this?

I was able to trigger the tab button press when left or right are pressed, and this is working great.  Unfortunately, my users will not like having to press enter every time when they are editing a long column.  Any help here would be amazing!  I've been working on this for 10+ hours with no satisfactory solution...

Thanks!