Is there a way to make data entry on a kendo ui grid behave like excel?

i.e using the arrow keys and just entering data without pressing the enter key.

I am using the javascript version of kendo ui grid. Our users have an excel background, so we are trying to make the transition easy.

Thanks in advance

Is there a way to make data entry on a kendo ui grid behave like excel?

i.e using the arrow keys and just entering data without pressing the enter key.

I am using the javascript version of kendo ui grid. Our users have an excel background, so we are trying to make the transition easy.

Thanks in advance

• javascript
• kendo-ui
• kendo-grid

1 Answer 1

There's no default way, but you can emulate it to a certain extent by adding custom behaviour to certain key navigation actions.

This answer will emulate the following from Excel:

1. Excel Navigation - Grid should be navigatable by arrow keys
2. Automatic Cell Entry - When a grid cell is navigated to, typing will automatically start editing the cell
3. Next Cell Navigation - When done editing the cell, pressing enter will exit the cell and then navigate to the next row's corresponding cell if the same data type (so that user can keep entering data concerning a specific data column)

Here is a DEMO, explanation is below.

Excel Navigation

Make your grid navigatable, this allows user to use keys to move to each cell with arrow keys just like excel. Also ensure your grid's editable property is set to "incell". This sets the grid into a cell by cell edit mode.

navigatable: true,
editable: "incell",

Automatic Cell Entry

Excel allows data editing without pressing Enter. Typically, Kendo Grid will only allow you to start editing after pressing enter. As long as the cell is focused, this code will allow user to immediately start typing without the Enter step. Put this after the initialization of your grid, bind the keypress event:

var grid = $("#grid").data("kendoGrid");
grid.table.bind("keypress", function (e) {
    if (e.which !== 0 && e.charCode !== 0 && !e.ctrlKey && !e.metaKey && !e.altKey) {

        //get currently navigated cell, this id follows user's navigation
        var activeCell = $("#grid_active_cell");

        //don't do anything if already editing cell        
        if (activeCell.hasClass("k-edit-cell")) return;

        grid.editCell(activeCell);
        var input = activeCell.find("input");

        //number datatype editor loses key press character when entering edit
        if (input.last().attr('data-type')==='number') {
            input.val(String.fromCharCode(e.keyCode | e.charCode));
        } else {
            input.val("");
        }
    }
});

Basically I just make sure that the key pressed is a text character and not something like "ALT" or "ESC" for example. Then I programmatically set the cell into edit mode.

There are some quirks with different data types and different column editors. I found that the numeric datatype editor loses the keypress value, which is why I had to make a special case for it and re-enter the key character.

Next Cell Navigation

In excel, after you are satisfied with the data edit and you press Enter, the navigation goes to cell directly below it. This allows user to continuously go down a list of items and edit a specific column of information. To do this with Kendo Grid, add this code:

//Kendo "Enter" key input is captured through this binding
$("#grid table").on("keydown", "tr", function (e) {
    var code = (e.keyCode ? e.keyCode : e.which);
    if (code == 13) { //If key is ENTER
        //find index of the td element
        var tdIndex = $(e.target).closest('td').index();

        //get the next row's cell
        var nextRow = $(e.target).closest('tr').next();
        var nextRowCell = $(nextRow).find('td:eq(' + tdIndex + ')');

        //focus the next cell on a different context
        setTimeout(function () {
            var grid = $("#grid").data("kendoGrid");
            grid.current(nextRowCell);
        }, 0);
    }
});

The reason why this is different function binding is because Kendo Grid has a default keydown binding on the table object, so we must add our custom functionality to the tr element before the event bubbles up.

Notes

• This is a baseline demo, more plicated things will most likely break this code like custom data editors, grid grouping, etc... in which case you'll have to add more code to handle all the situations as necessary.
• Keypress event is used for automatic cell entry because it is more reliable in terms of character code determination.
• Keypress event may not work on mobile, in which case keyup might be a better replacement event binding.
• If you are using your mouse to edit the grid on my demo, it will still work as normal Kendo Grids do, but you're missing out on the point of my demo.