Search code examples
angulardatagridangular-materialejssyncfusion

How to change default FilterSettings in ejs-grid


As total newby in Angular and Material technologies, I have created a grid as explained here. Here is the html template for the table:

<ejs-grid #grid [dataSource]='data' allowFiltering='true' 
  allowPaging='true' allowSorting='true' [pageSettings]='pageSettings'
  [editSettings]='editSettings' [filterSettings]='filterSettings'
  [toolbar]='toolbar'>

    <e-columns> 

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

        [... and so on with other columns ...]

    </e-columns>

</ejs-grid>

I successfully used individual column filtering, sorting and paging, edit guided by form (inline command in column where also delete is available) and create new option in toolbar. However, in individual column filtering, when i search a string the search mode is by default "startsWith", while I need "contains".

In my component I set the filter settings inside the ngOnInit function, and it works, but only for the starting condition of the filter ("needle" string in the example, or whatever else is set in the filterSettings object's value, including ""):

ngOnInit(): void {

    [... paging, commands, toolbar settings, not inherent here ...]

    // Filter default settings
    this.filterSettings = {
        columns: [{ field: 'CustomerName', matchCase: false, 
        operator: 'contains', predicate: 'and', value: 'needle' }]
    };

    [... other logic not inherent here ...]
}

As soon as I change manually by interface the field's content the search is performed again with "startsWith" operator. I need, instead of changing initial searching conditions, set the permanent filter behaviour; I was not able after a lot of searching and attempts.

How can I achieve default filtering settings?

NOTE: I tried to paste only relevant code here, but if more extensive coverage is needed I can provide.


Solution

  • The operator provided in the “filterSettings.columns” property will be valid only for initial filtering action. And then it will be reset to the default operator. This is the default behavior of Essential JavaScript 2 Grid Component. However you can achieve your requirement by extending filterModule.filterOperators property in dataBound event.

    We have discussed the same in the below documentation page. https://ej2.syncfusion.com/angular/documentation/grid/filtering/#change-default-filterbar-operator

    Regards,

    Thavasianand S.