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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

writing a custom Search Function for the Grid

Thread ID:

Created:

Updated:

Platform:

Replies:

144020 Apr 15,2019 09:26 AM UTC Apr 23,2019 04:25 AM UTC Angular - EJ 2 1
loading
Tags: Grid
Nastaran
Asked On April 15, 2019 09:26 AM UTC

Hi,
I want to have a search function for my Grids and it has to be a little different than the Syncfusion search method for Grid. I want to search on multiple things and my searchString should be combination of multiple things I want to run search for them. for example when user enters "(prod , 13) | (mechanics)" in search input, the result should be all the record that contain both "prod" and "13" plus all records contain "mechanics" and also eliminates the duplicate records. 
I thought I can use the grid.search() method for each part of the searchString and then combine the results. but It seems this solution is impossible because search() method doesn't return the filtered results and just show them in the grid... can you help me with this? how can I just filter the data and then combine multiple results and then display them in the grid?

Hariharan J V [Syncfusion]
Replied On April 23, 2019 04:25 AM UTC

Hi Nastaran, 
 
Thanks for your patience. 
 
We have checked your query and we could see that your requirement involves performing searching with multiple values in Grid. We would like to inform you that we don’t have support for “Multi-value search” in Grid. Since you are trying to perform searching based on the value in particular columns in Grid, We suggest you to use filtering instead of searching to achieve your requirement. We have prepared a sample where Predicate is used to filter the records and set this predicate value to grid query by using Search button. We have used distinct() method to remove the duplicate records after the filtering. You can clear all the filtered records by using Clear button. 

[app.component.ts] 
@Component({ 
  selector: 'app-root', 
  template: `<button id='show' ej-button class='e-flat' (click)='show()'> Search </button> 
  <button id='clear' ej-button class='e-flat' (click)='clear()'> Clear </button> 
  <ejs-grid #grid [dataSource]='data' [searchSettings]='searchOptions' [allowPaging]='true' [toolbar]='toolbarOptions' height='272px'> 
  <e-columns> 
      <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column> 
      .  .  .  .  .  
  </e-columns> 
  </ejs-grid>`, 
  styleUrls: ['./app.component.css'] 
}) 

export class AppComponent implements OnInit { 
  public data: object[]; 
    public toolbarOptions: ToolbarItems[]; 
     .  .  .  . 
    @ViewChild('grid') public grid: GridComponent; 

    ngOnInit(): void { 
        this.data = data; 
        this.toolbarOptions = ['Search']; 
    } 
    show()
      const searchText = (document.getElementsByClassName('e-input')[0] as any).value; 
      const text = searchText.split(/[" (,)|]/);       //Split your entered text and get the values 
      console.log(text);        // See your test and get the values 
      var  filterCharges = new Predicate('CustomerID', 'startswith', text[2], true); 
      filterCharges = filterCharges.and('EmployeeID', 'contains', text[4], true); 
      filterCharges = filterCharges.or('ShipName', 'startswith', text[7], true); 
      this.grid.query = new Query().where(filterCharges); 
      this.grid.refresh(); 
       this.fdata = new DataManager({ json: data }).executeQuery(this.grid.query).then((e: any) => { 
        this.pdfdata = <Object[]>e.result;  // to get the filtered records 
        this.grid.dataSource = DataUtil.distinct(this.pdfdata, 'OrderID', true); // Remove duplication  
          }); 
  } 
  clear()
    this.grid.query = new Query(); 
    this.grid.dataSource = this.data; 

  } 


Regards, 
Hariharan 


CONFIRMATION

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