Kendo UI Встроенная проверка не допускает пробелов и других символов - PullRequest
Новая
       25

Kendo UI Встроенная проверка не допускает пробелов и других символов

1 голос
/ 08 октября 2019

Как я могу использовать эту функцию blockSpecialChar в редактировании сетки Kendo UI? По сути, я хочу, чтобы в столбце 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));
}

Ответы [ 2 ]

1 голос
/ 08 октября 2019

Вы можете использовать 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));
}

Рабочий DOJO

0 голосов
/ 08 октября 2019

Вы должны привязать функцию к событию редактирования. 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));
}
...