Kendo UI 内联检查不允许空格和其他符号

Question

如何在剑道ui网格内联编辑中使用blockSpecialChar这个功能？基本上我想要ProductName 列不允许空格或除/ 之外的其他符号。我尝试使用editor 和template 调用该函数，但它不起作用。

$("#grid").kendoGrid({
  dataSource: dataSource,
  pageable: true,
  height: 550,
  toolbar: ["create"],
  columns: [
    { field: "ProductName", title: "Product Name" }, 
    { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
    { field: "UnitsInStock", title:"Units In Stock", width: "120px" },
    { field: "Discontinued", width: "120px", editor: customBoolEditor },
    { command: ["edit", "destroy"], title: " ", width: "250px" }],
  editable: "inline"
});

function blockSpecialChar(e){
  var k;
  document.all ? k = e.keyCode : k = e.which;
  return ((k > 64 && k < 91) || (k > 96 && k < 123) || k == 8 && k == 32 || k == 47 || (k >= 48 && k <= 57));
} 

Answer 1

您可以使用column.editor为输入框添加onkeypress事件。

productNameEditor 添加 onkeypress 事件

{ field: "ProductName", title: "Product Name", editor: productNameEditor }, 

function productNameEditor(container, options) {
    $('<input onkeypress="return blockSpecialChar(event);" required name="' + options.field + '"/>').appendTo(container);
}

blockSpecialChar 方法根据提供的输入值返回布尔值

function blockSpecialChar(event){
    var k = window.event ? event.keyCode : event.which;
    return ((k > 64 && k < 91) || (k > 96 && k < 123) || k == 8 && k == 32 || k == 47 || (k >= 48 && k <= 57));
}

Working DOJO

Answer 2

您必须将函数绑定到编辑事件。 https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/edit

$("#grid").kendoGrid({
  dataSource: dataSource,
  pageable: true,
  height: 550,
  toolbar: ["create"],
  columns: [
    { field: "ProductName", title: "Product Name" }, 
    { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
    { field: "UnitsInStock", title:"Units In Stock", width: "120px" },
    { field: "Discontinued", width: "120px", editor: customBoolEditor },
    { command: ["edit", "destroy"], title: " ", width: "250px" }],
  editable: "inline"
});

var grid = $("#grid").data("kendoGrid");
grid.bind("edit", blockSpecialChar);

function blockSpecialChar(e){
  var k;
  document.all ? k = e.keyCode : k = e.which;
  return ((k > 64 && k < 91) || (k > 96 && k < 123) || k == 8 && k == 32 || k == 47 || (k >= 48 && k <= 57));
}