Search by actual value instead of formatted value

[Alex]

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]

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.