Using jqwidgets grid. I have grid and under the indicator column, the values in this column actually don't has dashes between them since thats the way these will be stored. The actual value is without the dashes. But i am using a cellsrenderer to format a the existing value and placing '-' between the value to look like this 11111-1111-11

Original Value: 11111111111

Displayed value: 11111-1111-11

So the problem I have is in the filtering, since the value now has dashes now I can only filter the data if I remove the dashes. So trying to figure out a solution. I need an example if there is a way to ignore the dashes even if I input that in the filtering.with dashes.

Example output:

In the filter: 11111-1111-11

Result: Shows the filtered row: 11111-1111-11

Reference(Shows live preview of code): https://jsfiddle.net/vopy8nup/11/

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) {

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

});

} },

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

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

]

});