如何在kendo網格中使用Enter鍵進入新行

Question

這裏我已經開發了一個在mvc4剃鬚刀中使用一些kendo ui widgets的web應用程序。在我的appication中有一個kendo網格用於查看，更新和插入記錄。

當我按網格中的「添加新記錄」按鈕，插入一個新的記錄將可用，並按下「回車鍵」我可以去當前行的下一個單元格（下一列）。

它將有助於在每個單元格中插入數據，並按下回車鍵轉到下一個單元格，而無需單擊每列（鼠標點擊次數較少）。

但我的下一個挑戰是我需要轉到下一行（新記錄）當我按下回車鍵在當前行的最後一個單元格（最後一列）。

這裏是我使用的網格和腳本的代碼。

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

如果你可以設置過濾器，它會正常工作。讓我知道你是否可以把它整理出來。謝謝。