如何使用Enter鍵添加新記錄在kendo網格中

Question

我開發了一個簡單的web應用程序，使用一些kendo ui工具。

在那裏我用劍道網工具來查看和插入產品詳細信息的數據。

但我的問題是編輯模式（當我插入新記錄），當我按下回車鍵我需要去下一個單元格（在同一行的下一列），後最後一列然後進入下一行（新記錄）。

這裏是利用電網的代碼IM在我視圖「index.cshtml」

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, 
      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" }, 
          { command: ["destroy"], title: "&nbsp;", width: "100px"}], 
      editable: true 
     }); 
    }); 
</script> 

如何處理劍道電網輸入按鍵事件，辦理行和列？

請幫我這裏。

Answer 1

試試這個代碼。

$("#batchgrid").on("click", "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; 
       } 
      }); 

     }); 

Answer 2

試試這個代碼就幫你們把下一個單元格輸入時按鍵，

$(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 3

試試這個

$("#batchgrid").on("click", "td", function (e) { 

      var rowIndex = $(this).parent().index(); 
      var cellIndex = $(this).index(); 
      $(".k-textbox").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; 
       } 
      }); 

     });