Using jqwidgets grid. I have grid and under the indicator column, I want to rest
ID: 3886171 • Letter: U
Question
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
<div id="jqxgrid"></div>
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 '<span>' + answer + '</span>';
}, 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'}
]
});
Explanation / Answer
Solution :
Pasted value will not be availble in "event.key".And also for "keyup","key down","key control" u will get one character at a time.But for "paste" event it is not the case.You will get whole the pasted data.So here i m just providing you code regarding how to modify your paste event.Based on that you will get pasted data.And u can write the logic as u wish.
==============================================================================
widget.bind("paste", function(e){
var pastedData = e.originalEvent.clipboardData.getData('text');
if(pastedData.indexOf('-') !== -1){
alert("- is present in pasted data");
return false
}
else{
alert("- is not present in pasted data");
}
});
===============================================================================
If u replace this peice of code with your paste event then it will work.The function checkes whether the '-' is there or not in pasted content.If it is there it wont paste it.if It is not there it will paste the content.
Note : For best practices write console.log statements where ever u struck.And also it will be useful for u to know the folw or data at a particular instance of program.
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.