Как перейти к новой строке в сетке кендо с нажатием клавиши ввода

Question

здесь я разработал веб-приложение в бритве mvc4, используя некоторые виджеты kendo ui. В моем приложении есть сетка кендо, которая использовалась для просмотра, обновления и вставки записей ,

Когда я нажимаю кнопку «Добавить новую запись» в сетке, вставка новой записи будет доступна и с нажатием клавиши «Ввод» я могу перейти к следующей ячейке (следующий столбец) текущей строки.

это поможет вставить данные в каждую ячейку и перейти к следующей ячейке, просто нажав клавишу ввода, не нажимая каждый столбец (с низким количеством щелчков мыши).

но моя следующая задача: мне нужно перейти к следующей строке (новая запись), когда я нажимаю клавишу ввода в последней ячейке (последний столбец) текущей строки.

вот код сетки и скрипта, который я использую.

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

, но проблема в том, когда я нажмите клавишу ввода в последней ячейке любой строки она не даст мне новую запись (новая линия).

пожалуйста, помогите мне здесь ..

Answer 1

Я, имеющему такой же вопрос, я был в состоянии создать новую строку с клавишей ввода нажмите, но проблема на странице, когда я когда-либо нажать клавишу ввод, его создавшей новая строка в сетке, что нежелательно. Мне нужно отфильтровать событие, например, когда сетка находится в фокусе. но я пока не могу этого сделать. Вот мой код:

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

Если вы можете установить фильтр, он будет работать нормально. Дайте мне знать, можете ли вы разобраться. Благодарю.