'JSGRID - Excel-like keyboard navigation

I have a jsgrid gride and I want to activate edit mode in next line after hit enter key (or arrow down key) in "inline edition" and focus on the same column but next line, as Excel -like keyboard navigation.

The only achievement is to fire update with enter key but how to activate edition in the next line in the same column?

var clients = [
    { "Name": "Otto Clay", "Age": 25, "Country": 1, "Address": "Ap #897-1459 Quam Avenue", "Married": false },
    { "Name": "Connor Johnston", "Age": 45, "Country": 2, "Address": "Ap #370-4647 Dis Av.", "Married": true },
    { "Name": "Lacey Hess", "Age": 29, "Country": 3, "Address": "Ap #365-8835 Integer St.", "Married": false },
    { "Name": "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true },
    { "Name": "Ramona Benton", "Age": 32, "Country": 3, "Address": "Ap #614-689 Vehicula Street", "Married": false }
];

var countries = [
    { Name: "", Id: 0 },
    { Name: "United States", Id: 1 },
    { Name: "Canada", Id: 2 },
    { Name: "United Kingdom", Id: 3 }
];

$("#jsGrid").jsGrid({
    width: "100%",
    height: "400px",

    inserting: false,
    editing: true,
    sorting: true,
    paging: true,

    data: clients,

    fields: [
        { name: "Name", type: "text", width: 150, validate: "required" },
        { name: "Age", type: "number", width: 50 },
        { name: "Address", type: "text", width: 200 },
        { name: "Country", type: "select", items: countries, valueField: "Id", textField: "Name" },
        { name: "Married", type: "checkbox", title: "Is Married", sorting: false },
        { type: "control" }
    ],
    onError: function (args) {
        console.log("ERR");
        console.log(args);

    },
});

$('#jsGrid').off().on('keydown', 'input[type=text], input[type=number]', (event) => {
    if (event.which === 13) { // Detect enter keypress

        $('#jsGrid').jsGrid("updateItem"); // Update the row
    }

});

UPDATE: I developed an alternative that use Enter (or arrow down key) con updateitem, activate the edit mode in the next row and focus on the same previous column control. But I think there is an easy way.

            var LastIndexInputs = -1;
            var LastIndexSelect = -1;


            function ActivateEditNextLine(NewIndex) {
                var gridBody = $("#jsGrid").find('.jsgrid-grid-body');

                gridBody.find('.jsgrid-table tr').each(function (index, tr) {
                    if (index == NewIndex) {
                        $(tr).trigger('click');
                        RowTarget = gridBody.find(".jsgrid-edit-row");

                        if (LastIndexInputs != -1) {
                            RowTarget.find('.Campo')[LastIndexInputs].focus();
                            RowTarget.find('.Campo')[LastIndexInputs].select();
                        }
                        else {
                            if (LastIndexSelect != -1) {
                                RowTarget.find('select')[LastIndexSelect].focus();
                            }
                        }

                    }
                });

            };


            var clients = [
                { "Name": "Otto Clay", "Age": 25, "Country": 1, "Address": "Ap #897-1459 Quam Avenue", "Married": false },
                { "Name": "Connor Johnston", "Age": 45, "Country": 2, "Address": "Ap #370-4647 Dis Av.", "Married": true },
                { "Name": "Lacey Hess", "Age": 29, "Country": 3, "Address": "Ap #365-8835 Integer St.", "Married": false },
                { "Name": "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true },
                { "Name": "Ramona Benton", "Age": 32, "Country": 3, "Address": "Ap #614-689 Vehicula Street", "Married": false }
            ];

            var countries = [
                { Name: "", Id: 0 },
                { Name: "United States", Id: 1 },
                { Name: "Canada", Id: 2 },
                { Name: "United Kingdom", Id: 3 }
            ];

            $("#jsGrid").jsGrid({
                width: "100%",
                height: "400px",

                inserting: false,
                editing: true,
                sorting: true,
                paging: true,
                data: clients,
                fields: [

                    { name: "Name", type: "text", width: 150, validate: "required" },
                    { name: "Address", type: "text", width: 200 },
                    { name: "Country", type: "select", items: countries, valueField: "Id", textField: "Name" },
                    { name: "Age", type: "text", width: 50 },
                    { name: "Married", type: "checkbox", title: "Is Married", sorting: false },
                    { type: "control" },
                ],

                onItemUpdating: function (args) {

                    console.log("confirm edition");

                    // pointer to last control index for jump to the same colum
                    var gridBody = $("#jsGrid").find('.jsgrid-grid-body');
                    Registro = gridBody.find(".jsgrid-edit-row");

                    var inputs = Registro.find('.Campo');
                    LastIndexInputs = inputs.index(inputs.filter(':focus'))

                    var selects = Registro.find('select');
                    LastIndexSelect = selects.index(selects.filter(':focus'))

                },
                onItemUpdated: function (args) {
                    if (args.grid.data.length != (args.itemIndex + 1)) {
                        ActivateEditNextLine(args.itemIndex + 1);
                    }
                },
                editItem: function (item) {

                    console.log("Enter in edition mode")
                    var $row = this.rowByItem(item);
                    if ($row.length) {
                        //console.log('$row: ' + JSON.stringify($row)); 
                        this._editRow($row);
                    }
                },

                onError: function (args) {
                    console.log("ERR");
                    console.log(args);

                },
            });

            $('#jsGrid').off().on('keydown', 'input[type!=hidden], select', (event) => {

                if (event.which === 13) { // Detect enter keypress
                    $('#jsGrid').jsGrid("updateItem"); // Update the row
                }
                if (event.which === 40) { // arrow down keypress
                    $('#jsGrid').jsGrid("updateItem"); // Update the row
                }
            });


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source