Search by actual value instead of formatted value

Question

Hi!

I'm writing to you because I have a question with the grid component.

In the example attached, there is a price column formatted in EUR currency.

The problem is that to find the values you have to do it by the data without formatting.

For example, in the first record, I would like to find results by searching 7,50 instead of 7.50.

In the second record, I would like to search for 9.999,99.

Is this possible?

Thank you very much in advance and have a great weekend :-)

Attachment: searchcurrency_20e30dbe.zip

Ajith Govarthan · Accepted Answer

Hi Alex, 
 
Thanks for contacting Syncfusion support and sorry for the delayed response. 
 
Query: The problem is that to find the values you have to do it by the data without formatting.For example, in the first record, I would like to find results by searching 7,50 instead of 7.50.In the second record, I would like to search for 9.999,99. 
 
Based on your query you want to perform searching for numeric columns as shown in the UI of the grid component. By default in EJ2 Grid the searching operation is done only based on the dataSource values and we do not perform searching based on the formatted type values. 
 
Number formats are only used to show the values in the UI and it will not affect the dataSource values. However, we have achieved your query by customizing the search action using the actionBegin and actionComplete events. For your convenience we have attached the sample. Please refer the sample for your reference. 
 
Code Example: 




App.vue 
 
export default { 
provide: { 
grid: [Toolbar] 
}, 
data () { 
return { 
data: [ 
{ Turtle: 'Leonardo', Price: 7.5, Pizza: 'Carbonara' }, 
{ Turtle: 'Donatello', Price: 9999.99, Pizza: 'Prosciuto' } 
], 
searchFlag : true, 
actionBegin: (args)=>{ 
if(args.requestType === "searching"){ 
var patt1 = /[0-9]/g;  
if (args.searchString.match(patt1) && searchFlag ){ // find the entered value is number or not. 
searchString = args.searchString; 
var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 
var actualValue = grid.valueFormatterService.fromView(args.searchString,grid.getColumns()[1].getParser(),"number"); // get the actual value from the formatted search text 
searchFlag = false; 
grid.searchSettings.key = actualValue.toString(); 
} 
} 
}, 
 
actionComplete: (args)=>{ 
if(args.requestType === "searching"){ 
var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 
if(document.getElementById(grid.element.id+"_searchbar").value.match(/[0-9]/g)){ 
document.getElementById(grid.element.id+"_searchbar").value = searchString;  // set the searchbox value  
} 
searchFlag = true; 
} 
} 
} 
} 
} 
 
 
Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/search_currency-2131940535.zip 
 
Note: To search the number columns with above solution you need to use same formats for all the number columns in your grid application. 
 
Please get back to us if you need further assistance. 
 
Regards, 
Ajith G.