在KendoUI網格中限制用戶輸入

Question

我想限制KendoUI網格控件中特定列的用戶輸入（比如20個字符的限制）。這裏是我的網格代碼（添加一個空行）

$("button").click(function() { 
var grid = $("#grid").data("kendoGrid"); 
grid.dataSource.insert(0, { 
    itmExtId: "", 
    itmDesc: "" 
}); 
}); 
$(document).ready(function() { 
    $("#grid").kendoGrid({ 
     groupable: true, 
     scrollable: true, 
     sortable: true, 
     pageable: true, 
     columns: [{ title: "Item ID", field: "itmExtId", width: 75 }, 
        { title: "Desc", field: "itmDesc", width: 200 }] 
     , 
     editable: true, 
     toolbar: [{ 
      template: 
      '<a class="k-button k-button-icontext k-grid-add" href="\\#"> <span class="k-icon k-add"></span>New Item</a> <a class="k-button k-button-icontext" href="\\#">Item List</a>' 
    }], 
}); 

我可以限制輸入的字段沒有在這裏設立一個外部數據源？

Answer 1

你可以這樣做： 首先在編輯事件的kendoGrid中定義一個方法。

$("#grid").kendoGrid({ 
    groupable: true, 
    scrollable: true, 
    sortable: true, 
    pageable: true, 
    columns: [{ title: "Item ID", field: "itmExtId", width: 75 }, 
       { title: "Desc", field: "itmDesc", width: 200 }] 
    , 
    editable: true, 
    edit: onEdit, 
    toolbar: [{ 
     template: 
     '<a class="k-button k-button-icontext k-grid-add" href="\\#"> <span class="k-icon k-add"></span>New Item</a> <a class="k-button k-button-icontext" href="\\#">Item List</a>' 
}],}); 

然後函數：

function onEdit(arg) { 
    arg.container.find("input[name='ProductName']").attr('maxlength', '20'); 
} 

這個例子就是從這裏開始：Limiting maximum input length of cell