1

How can I use this function blockSpecialChar in kendo ui grid inline editing? Basically I want ProductName column not allow space or others symbols except /. I try to call the function with editor and template but it not working.

$("#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));
}
Nixoderm
  • 355
  • 4
  • 23

2 Answers2

1

You can use column.editor to add onkeypress event for the input box.

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

IamVenkatReddy
  • 331
  • 1
  • 8
0

You have to bind the function to the edit event. 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));
}
CMartins
  • 3,247
  • 5
  • 38
  • 53
  • 1
    but how do I specify those function only to validate `Product Name` only? .Demo [here in Dojo](https://dojo.telerik.com/aZoWeXOd) – Nixoderm Oct 08 '19 at 06:56
  • that was already unser here with different solutions. Here is one that I found and you can add some char codes that you would like to include https://stackoverflow.com/questions/37681828/javascript-validation-to-allow-only-numbers-and-alphabets – CMartins Oct 08 '19 at 07:52