Sunday, November 20, 2016

Kendo Grid Tips: Adding New Row to Kendo Gird with Enter Key Press

There were requirements to add new row to editable gird when user click on last editable cell. Using addRow() function of kendo gird we can add new row to data gird. However to use that function we need to identify the correct key stroke and correct cell to invoke addRow() function. Following code snippet shows how to add new row to grid if user press enter key on 4th column.

We can change javascript key value to modify following script to trigger on any key (e.g. if change (code == 9) you can add new row with Tab key)

    $(document).ready(function () {
        $("#MyGrid").on("keyup", "tr", function (e) {
            var code = (e.keyCode ? e.keyCode : e.which);
            var td = $(e.target).closest('td');


            if (code == 13) {
                var tdIndex = td.index();


                if (tdIndex == 3) {
                    var grid = $("#MyGrid").data("kendoGrid");
                    grid.addRow();
                }
            }
        });
    });