We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Advanced search with multiple keywords

Thread ID:





146840 Aug 22,2019 11:30 AM UTC Aug 26,2019 01:02 PM UTC JavaScript - EJ 2 3
Tags: Grid
Asked On August 22, 2019 11:30 AM UTC


After trying to implement on the solution that you gave on this thread : 

I wanted to know if you think that is doable on your javascript grid that is in the file attached.



Attachment: grid_18e08d38.zip

Dhivya Rajendran [Syncfusion]
Replied On August 23, 2019 07:27 AM UTC

Hi Theo, 

Greeting from syncfusion. 

As per your requirement, we have created a sample. In the below sample, we have bind actionBegin event and prevent(args.cancel as true) the default search action and customize the filter query based on the multiple keywords(search).  

Please refer the below code example and sample for more information. 

actionBegin(args){  //Beverages_Condiments 
  if(args.requestType  === "searching" && args.searchString.length > 0){ 
  args.cancel = true;  // prevent the default search action 
  const text = args.searchString.split('_');       //Split your search text and get the values  
  let flag = true; 
  let predicate: Predicate; 
  this.val = args.searchString; 
  // preparing filter query 
  text.forEach((key) => { 
      this.grid.getColumns().forEach((col: any) => { 
        if (flag) { 
          predicate = new Predicate(col.field, 'contains', key); 
          flag = false; 
        } else { 
          predicate = predicate.or(col.field, 'contains', key); 
    this.gquery = this.grid.query; 
    this.grid.query = new Query().where(predicate); 
    this.grid.searchSettings.key = '';   //  resetting the search value 
Complete(e) { 
  if (e.requestType === 'refresh') { 
    this.grid.query = this.gquery; 
    (document.getElementById(this.grid.element.id + '_searchbar') as HTMLInputElement).value = this.val; // reset the searchstring  



Replied On August 23, 2019 08:22 AM UTC

Hi Dhivya,

Thank you for your quick answer that's exactly what I was looking for,

Just a little thing that I'm trying to correct on your code I want to make the predicate with an "predicate.and(field, value)" but not the "or", this is not working every time any records are found even on a simple search.

Just replacing "or" with "and" in the predicate when the flag is false, it should work right ?

Thank you,


Dhivya Rajendran [Syncfusion]
Replied On August 26, 2019 01:02 PM UTC

Hi Theo, 

Thanks for your update. 

In the provided sample, we are generate query for all columns and check whether the column data contains search string value or not(so it check with all the columns). if any single column or data contains the values then it return the corresponding row data but when you change predicate as “and” then it check, all the columns contains the search value if every column has the same value then only it return the result. 

Could you please share more information or video to demonstrate your requirement(like how did you define the column data and what is your expectation) that will helpful for us to validate further at our end. 



This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon