5 
<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>

在这里，当我在编辑模式下按 Enter 键（插入新记录）时，我需要进入下一个单元格（就像我按Tab 键一样）。

以及如果我在任何行的最后一个单元格（最后一列）中按下回车键，它应该移动到下一行的第一个单元格（第一列）。

我认为问题出在我的脚本中。但不知道确切的位置。

请在这里帮我..

4

6 回答 6

2

试试这个代码： -

<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>

注意：- 除了 keypress function(e)，您还可以使用 keydown function(e){}。

如果代码不起作用或有一些缺陷，请提出您的意见。我在 MVC5 中尝试过这个，它与 Kendo Grid 一起工作。

于 2015-02-13T19:03:57.077 回答
2

你也可以试试这个

$("#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()); 

        });

    }
});

});

于 2015-12-01T07:55:07.650 回答
0

试试这个代码，它可以帮助你在输入按键时移动下一个单元格，

  $(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())));
于 2013-07-04T08:38:17.953 回答
0

这已经晚了一年，但也许有人可以从中得到一些东西。我有一张 Telerik 的票，他们的回答是切换到下一个可编辑单元格是设计使然。不可接受。

我需要从一个可编辑的单元格转到另一个并忽略不可编辑的单元格，所以我就是这样做的： http: //dojo.telerik.com/@barbedCoil/OhaYo/3

这并不漂亮，因为我混合了硬编码的单元格索引，理想情况下我想使用 css 属性从一个单元格导航到另一个单元格（下一个版本）

无论如何这是一个好的开始

于 2015-05-26T14:29:43.787 回答
0 
  $("#GridID").keypress(function (e) {
            if (e.keyCode === 13) {
                e.preventDefault();
            }
        });

参考测试代码：

https://www.telerik.com/forums/how-to-prevent-kendo-validation-on-pressing-enter-key

http://dojo.telerik.com/@c0re/iMaBi

于 2020-01-24T13:28:21.677 回答
-2

尝试这个

    $('.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
});

您可以使用由剑道网格附加的剑道编辑网格文本框的类

于 2013-07-04T08:32:03.343 回答