Using jqwidgets grid. I have grid and under the indicator column, I want to restrict the use of - or minus, when doing a paste into the filter input field. I tried adding logic and It still keeps pasting the minus sign no matter the logic i have.

Reference: https://jsfiddle.net/vopy8nup/3/

Code:

Html

Javascript:

// prepare the data

function format(input, format, sep) {

var output = "";

var idx = 0;

for (var i = 0; i < format.length && idx < input.length; i++) {

output += input.substr(idx, format[i]);

if (idx + format[i] < input.length) output += sep;

idx += format[i];

}

output += input.substr(idx);

return output;

}

var source =

{

datafields: [

{ name: 'CustomerID' },

{ name: 'CompanyName' },

{ name: 'ContactName' },

{ name: 'Indicator', type: 'string' },

{ name: 'Address' },

{ name: 'City' },

{ name: 'Country' }

],

localdata: [{ "CustomerID": "ALFKI", "CompanyName": "Alfreds Futterkiste", "ContactName": "Maria Anders", "Indicator": "11111111111"}, { "CustomerID": "ANATR", "CompanyName": "Ana Trujillo Emparedados y helados", "ContactName": "Ana Trujillo", "Indicator": "22222222222"}]

};

var local_length = source.localdata.length;

var dataAdapter = new $.jqx.dataAdapter(source);

var columnCheckBox = null;

var updatingCheckState = false;

$("#jqxgrid").jqxGrid(

{

width: 850,

height: 250,

source: dataAdapter,

columnsresize: true,

filterable: true,

sortable: true,

enabletooltips: true,

showfilterrow: true,

pageable: true,

enablebrowserselection: true,

pagesize: 5,

editmode: 'dblclick',

editable: true,

selectionmode: "singlerow",

autoheight: true,

altrows: true,

columns: [

{ text: 'Company Name', datafield: 'CompanyName', width: 250

},

{ text: 'Contact Name', datafield: 'ContactName', width: 150 },

{ text: 'Indicator', datafield: 'Indicator', width: 180, cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {

var foo = value.toString().replace(/-/g, ""); // remove hyphens

// You may want to remove all non-digits here

// var foo = $(this).val().replace(/\D/g, "");

var foo = format(foo, [5, 4, 2], "-");

var answer = foo;

return '' + answer + '';

}, createfilterwidget: function (column, columnElement, widget) {

var restricted = ['-']; // a list of restricted characters

widget.on('keydown', function (event) {

if (restricted.indexOf(event.key) !== -1) {

return false;

}

});

widget.on('keyup', function (event) {

if (restricted.indexOf(event.key) !== -1) {

return false;

}

});

widget.on('keypress', function (event) {

if (restricted.indexOf(event.key) !== -1) {

return false;

}

});

widget.bind("paste", function(event){

if (restricted.indexOf(event.key) !== -1) {

return false;

}

});

} },

{ text: 'City', datafield: 'City', width: 120 },

{ text: 'Country', datafield: 'Country'}

]

});