writing a custom Search Function for the Grid

[Nastaran]

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]

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; 

  } 

} 

Sample :  http://www.syncfusion.com/downloads/support/directtrac/general/ze/custom-sample-389064703  

Regards, 

Hariharan