tabalinas / jsgrid

Lightweight Grid jQuery Plugin
http://js-grid.com
MIT License
1.53k stars 353 forks source link

Key press event on more than one column in a grid. #1391

Open rowter opened 3 years ago

rowter commented 3 years ago

Hello,

I have a grid with around 6 columns. I have a keypress event which allows only alphabets and numbers with some special characters. This code below works for me. However, I need the same keypress on more thant one column, Instead of repeating the same keypress event code under each column, I wanted to call a centralized function.

### Working Code:

{ name: "FundName", type: "text", width: 150, title: "Fund", filtering: false, editing: true, validate:[ "required" ], insertTemplate: function () { var valField = this._grid.fields[1]; var $insertControl = jsGrid.fields.text.prototype.insertTemplate.call(this); $insertControl.on("keypress", function (e) { if (e.which == 45 || (e.which > 47 && e.which < 58) || (e.which > 64 && e.which < 91) || (e.which > 96 && e.which < 123) || (e.which == 8) || (e.which == 32) || (e.which == 127)) { } else { e.preventDefault(); e.stopPropagation(); } }); return $insertControl; } }

### Modified code that does not work:

My modified code looks like below. If I use this code, when i click on insert, this particular column appears as read only field. I can type anything into it.

{ name: "FundName", type: "text", width: 150, title: "Fund", filtering: false, editing: true, validate:[ "required" ], insertTemplate: function () { var valField = this._grid.fields[1]; var $insertControl = jsGrid.fields.text.prototype.insertTemplate.call(this); AlphaNumericWithHyphenSpaceDeleteBackSpace($insertControl); }

function AlphaNumericWithHyphenSpaceDeleteBackSpace($insertControl) { $insertControl.on("keypress", function (e) { if (e.which == 45 || (e.which > 47 && e.which < 58) || (e.which > 64 && e.which < 91) || (e.which > 96 && e.which < 123) || (e.which == 8) || (e.which == 32) || (e.which == 127)) { } else { e.preventDefault(); e.stopPropagation(); } }); return $insertControl; }

I am not sure why this function call does not work. I do not see any errors on the browser. Can you point out if there is any mistake in my code?

Thanks in advance

nandakumar-a commented 3 years ago

in your code return for insertTemplate is missing, try with the return statement

var field = {
name : "FundName",
type : "text",
width : 150,
title : "Fund",
filtering : false,
editing : true,
validate : [ "required" ],
insertTemplate : function()
{
    var valField = this._grid.fields[1];
    var $insertControl = jsGrid.fields.text.prototype.insertTemplate.call(this);
 return   AlphaNumericWithHyphenSpaceDeleteBackSpace($insertControl);
}
}