How to change predicate type in grid filter bar

[Raj Maheshwari]

Hi Team

i am evaluating Syncfusion Angular Grid 

i am trying to change the default predicate for filterbar to contains 

can you please help me with this

sample at https://stackblitz.com/edit/syncfusion-angular-filter-bar-predicate-2kzevs?file=app.component.html 

Thank you

Mohit

[Raj Maheshwari]

Hello Team

let me know if you need more details for this

Thanks

Mohit

[Ajith Govarthan]

Hi Mohit, 

 

Thanks for contacting Syncfusion support. 

 

Query: i am trying to change the default predicate for filterbar to contains can you please help me with this 

 

Based on your query you want to set default operator for the CustomerName column to filter the values. So, we have prepared sample and in that sample we have used the filter property of the column to set the default operator.  

 

For your convenience we have attached the sample so please refer the sample for your reference. 

 

Code Example: 

App.componnent.html 

 

<div class="control-section"> 

<div class="select-wrap"> 

<ejs-dropdownlist id='ddlelement' [dataSource]='ddldata' value='Menu' [fields]='ddlfields' 

(change)="onChange($event)"></ejs-dropdownlist> 

</div> 

<ejs-grid #grid [dataSource]='data' allowPaging='true' allowFiltering='true' [pageSettings]='pageSettings' 

[filterSettings]='filterSettings'> 

<e-columns> 

<e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column> 

<e-column field='CustomerName' headerText='Customer Name' [filter]="filterOptions" type="string" 

width='150'></e-column> 

<e-column field='OrderDate' headerText='Order Date' width='130' [format]='formatoptions' textAlign='Right'> 

</e-column> 

<e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'></e-column> 

<e-column field='ShippedDate' headerText='Shipped Date' width='130' type='date' format="yMd" 

textAlign='Right'></e-column> 

<e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column> 

</e-columns> 

</ejs-grid> 

 

App.component.ts 

 

export class AppComponent { 

  public data: Object[]; 

  public ddldata: Object[]; 

  public pageSettings: Object; 

  public filterSettings: Object; 

  public filteringType: Object[] = [ 

    { Id: "Menu", type: "Menu" }, 

    { Id: "CheckBox", type: "Checkbox" }, 

    { Id: "Excel", type: "Excel" } 

  ]; 

  filterOptions:IFilter = { operator: "contains" }; 

  public ddlfields: Object = { text: "type", value: "Id" }; 

  public formatoptions: Object; 

 

  @ViewChild("grid") 

  public grid: GridComponent; 

 

Sample link: https://stackblitz.com/edit/syncfusion-angular-filter-bar-predicate-qwaaku?file=app.component.ts 

 

UG-Link: https://ej2.syncfusion.com/angular/documentation/api/grid/column/#filter 

 

Please get back to us If you need further assistance. 

 

Regards, 

Ajith G. 

[Raj Maheshwari]

Thank you Ajith

This resolved the issue :)

Thanks

Mohit

[Ajith Govarthan]

Hi Mohit,  

  

Thanks for the update. 

 

We are happy to hear that your issue has been resolved. 

 

Please get back to us if you need further assistance. 

 

Regards, 

Ajith G.