How to focus the next cell in a kendo grid by pressing the enter key

Question

<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} }, Discontinued: { type: "boolean" }, 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: [ "ProductName", { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" }, { field: "UnitsInStock", title: "Units In Stock", width: "130px" }, { field: "Discontinued", width: "130px" }, // { field: "", title: "No", template: "#= ++record #", width: "30px" }, {command: ["destroy"], title: "&nbsp;", width: "100px"}], editable: true }); }); </script> <script> function onDataBound(e) { var grid = $("#batchgrid").data("kendoGrid"); $(grid.tbody).on("keydown", "td", function (e) { if ((e.keyCode ? e.keyCode : e.which) == 13) { //Enter keycode var row = $(this).closest("tr"); var rowIdx = $("tr", grid.tbody).index(row); var colIdx = $("td", row).index(this); alert(rowIdx + '-' + colIdx); $this.closest('tr').next().find('td').eq(index).focus(); e.preventDefault(); } }); } </script> 

here, when I press the enter key in edit mode (inserting a new record), I need to go to the next cell (as if I press the key )

and also if I press the enter key in the last cell (last column) of any row that it should move to the first cell (first column) of the next row.

I think the problem is in my script. but I don’t know exactly where.

Please help me here.

Answer 1

Try this code: -

 <script> $(document).ready(function(){ $("#KendoGridName").keypress(function(e){ var keyCode = e.keyCode || e.which; if (keyCode == 13) { var grid = $("#KendoGridName").data("kendoGrid"); var curCell = grid.find(".k-edit-cell"); grid.editCell(curCell.next()); // To move the cursor to the next cell and put the cell in edit mode grid.select(curCell.next()); // To select the next cell grid.focus(curCell.next()); // To set focus on to next cell e.preventDefault(); // To prevent the default behavior of the enter key press } }); }); </script> 

Note. - Instead of the keypress (e) function, you can also use the keydown (e) {} function.

Please convey your comments if the code does not work or has some flaws. I tried this in MVC5 and it worked with Kendo Grid.

Answer 2

you can try it too

 $("#grid").on("focus", "td", function (e) { $("input").on("keydown", function (event) { if (event.keyCode == 13) { setTimeout(function () { var grid = $("#grid").data("kendoGrid"); var curCell = $("#grid").find(".k-edit-cell"); grid.editCell(curCell.next()); }); } }); 

});

Answer 3

try this code, it will help you move the next cell while entering a keystroke,

  $(document).ready(function () { $("#batchGrid").on("click", "td", function (e) { var rowIndex = $(this).parent().index(); var cellIndex = $(this).index(); window.onkeydown = 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()))); 

Answer 4

This is a year later, but maybe someone can get something from him. I had a ticket to Telerik, and their answer was that the transition to the next edited cell was by design. Unacceptably.

I needed to switch from one editable cell to another and ignore non-editable cells, this is how I did it: http://dojo.telerik.com/@barbedCoil/OhaYo/3

This is not very good, since I have a combination of hardcoded cell indices, where ideally I would like to use the css attribute to go from cell to cell (next version)

It's a good start anyway

Answer 5

try it

  $('.k-edit-field .k-input').on('keypress', function (e) { if(event.keyCode == 13) $('.k-edit-field .k-input').next().focus(); //This statement will be used where you want to provide focus }); 

you can use the kendo edit grid text box class that is added by the kendo grid