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

Question

如何在 kendo ui 网格内联编辑中使用此功能 blockSpecialChar？基本上我希望 ProductName 列不允许 space 或除 / 之外的其他符号。我尝试使用 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: "&nbsp;", 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

您必须将函数绑定到编辑事件。 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: "&nbsp;", 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));
}

Answer 2

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

productNameEditor to add onkeypress event

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

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

blockSpecialChar method to return boolean value based on the provided input value

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

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

Kendo UI Inline checking not allow space and other symbols

kendo-ui

kendo-grid