how to go to new line in kendo grid with enter key press

Question

here i have developed a web application in mvc4 razor using some kendo ui widgets.in my appication there is a kendo grid which has used to view, update and insert records.

when i press the "add new record" button in grid, inserting a new record will available and with the press of "enter key" i can go to next cell(next column) of the current row.

it will help to insert data in each cell and go to next cell just pressing enter key without clicking each column(with the low number of mouse clicks).

but my next challenge is i need to go to next row(a new record) when i press the enter key at the last cell(last column) of the current row.

here is the code of grid and script i'm using.

<button class="k-button" id="batchGrid">
    Batch Edit</button>
<div id="example" class="k-content">
    <div id="batchgrid">
    </div>
</div>
<script>
    $("#batchGrid").click(function () {
        var crudServiceBaseUrl = "http://demos.kendoui.com/service",
                        dataSource = new kendo.data.DataSource({
                            transport: {
                                read: {
                                    url: crudServiceBaseUrl + "/Products",
                                    dataType: "jsonp"
                                },
                                update: {
                                    url: crudServiceBaseUrl + "/Products/Update",
                                    dataType: "jsonp"
                                },
                                destroy: {
                                    url: crudServiceBaseUrl + "/Products/Destroy",
                                    dataType: "jsonp"
                                },
                                create: {
                                    url: crudServiceBaseUrl + "/Products/Create",
                                    dataType: "jsonp"
                                },
                                parameterMap: function (options, operation) {
                                    if (operation !== "read" && options.models) {
                                        return { models: kendo.stringify(options.models) };
                                    }
                                }
                            },
                            batch: true,
                            pageSize: 20,
                            schema: {
                                model: {
                                    id: "ProductID",
                                    fields: {
                                        ProductID: { editable: false, nullable: true },
                                        ProductName: { validation: { required: true} },
                                        UnitPrice: { type: "number", validation: { required: true, min: 1} },
                                        UnitsInStock: { type: "number", validation: { min: 0, required: true} }
                                    }
                                }
                            }
                        });

        $("#batchgrid").kendoGrid({
            dataSource: dataSource,
            dataBound: onDataBound,
            navigatable: true,
            filterable: true,
            pageable: true,
            height: 430,
            width: 300,
            toolbar: ["create", "save", "cancel"],
            columns: [
                            { field: "ProductID", title: "No", width: "90px" },
                            { field: "ProductName", title: "Product Name" },
                            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
                            { field: "UnitsInStock", title: "Units In Stock", width: "130px" },
                            { command: ["destroy"], title: "&nbsp;", width: "175px" }
            //                            { field: "", title: "No", template: "#= ++record #", width: "30px" },
            ],
            editable: { mode: "incell", createAt: "bottom" }
        });
    });
</script>
<script type="text/javascript">
    function onDataBound(e) {
        $("#batchgrid").on("focus", "td", function (e) {

            var rowIndex = $(this).parent().index();
            var cellIndex = $(this).index();
            $("input").on("keydown", function (event) {
                if (event.keyCode == 13) {
                    $("#batchgrid")
                    .data("kendoGrid")
                    .editCell($(".k-grid-content")
                    .find("table").find("tbody")
                    .find("tr:eq(" + rowIndex + ")")
                    .find("td:eq(" + cellIndex + ")")
                    .next()
                    .focusin($("#batchgrid")
                    .data("kendoGrid")
                    .closeCell($(".k-grid-content")
                    .find("table")
                    .find("tbody")
                    .find("tr:eq(" + rowIndex + ")")
                    .find("td:eq(" + cellIndex + ")")
                    .parent())));
                    return false;
                }
            });
        });
    }
</script>

but the problem is when i press the enter key at the last cell of any row it will not give me a new record(new line).

please help me here..

Answer 1

I'm having same issue, I was able to create new row with enter key press, but the problem is on the page, when ever I press enter key, its creating a new row in the grid, which is not desired. I need to filter the event say for example when the grid is in focus. but I'm not being able to do that yet. Here is my code:

$(document.body).keypress(function (e) {
    if (e.keyCode == 13) {
        var grid = $("#grid").data("kendoGrid");
        grid.addRow();
}
});

If you can set the filter, it will work fine. Let me know if you can sort it out. Thanks.