Filter operator not working for FilterBar type

[Dave]

Hi,

I have a grid where I enabled "alloweFiltering". Now, for each column I specify the operator type 'contains' but it is not accepted.

However, when I change the filterOption-type to 'Menu', the popup has the filters I wish (I provde them with the filterOptions.operators property then).

<ejs-grid :dataSource="gridData.data" :allowFiltering='true' :filterSettings="gridData.filterOptions">

            <e-columns>

                <e-column field='IdName' headerText='Id' textAlign='Left' width=Auto></e-column>

            </e-columns>

        </ejs-grid>

with my filter options:

filterOptions: {

                        type: 'FilterBar',

                        columns: [

                            { field: 'IdName', matchCase: false, operator: 'contains', value: '' }, //this is not working. The filter is not 'contains', but 'startsWith'

                        ],

                        //used when using "type: 'Menu'" and it is working

                        operators: {

                            stringOperator: [

                                { value: 'startsWith', text: 'starts with' },

                                { value: 'endsWith', text: 'ends with' },

                                { value: 'contains', text: 'contains' }

                            ],

                        }

I didnt find an option to paste code, hope it's readable.

[Rajapandiyan Settu]

Hi Dave, 

  

Greetings from Syncfusion support.  

By analyzing your query, we suspect that you want to dynamically choose the filter operator for all the columns when the filterSettings type as FilterBar. 

If so, you can achieve your requirement by enabling the showFilterBarOperator property of filterSettings. Now, we can choose the filter operator for the column by using the dropdown placed in the filterBar input. Refer to the below code example and documentation for more information. 

showFilterBarOperator: https://ej2.syncfusion.com/vue/documentation/api/grid/filterSettings/#showfilterbaroperator 

<ejs-grid 

      ref="grid" 

      :dataSource="data" 

      :allowFiltering="true" 

      :filterSettings="filterOptions" 

      height="273px" 

    > 

    </ejs-grid> 

------ 

      filterOptions: { 

        type: "FilterBar", 

        showFilterBarOperator: true, 

      } 

Screenshot: filter operators with filterBar 

 

You can also select the filter operator for particular column by using filter property. Refer to the below code example 

<e-column field="ShipCity"  headerText="Ship City"   :filter="colfilter" width="100"  ></e-column> 

------- 

colfilter: { operator: "contains" }, 

Sample: https://codesandbox.io/s/vue-template-forked-nwhjx 

Please get back to us if you need further assistance with us. 

  

Regards,  

Rajapandiyan S

[Dave]

Thanks for your answer.

I added typescript to the project and it seems like Syncfusion does not work very well with typescript, at least the filter part.

Since typescript was added, the filter option for my grid disappeared because the import does no longer work (see the d.ts file for grid).

How would you provide the filter then to the grid? Setting "allowFiltering" to true seems to be not enough.

Got it working with typescript by providing the module within the @Component({provide: { grid: [Filter]}) decorator.

Additionally, I used the actionBegin event to set the operator to contains like this

actionBegin(e: any) {
  if (e.requestType === 'filtering') {
    if (e.columns)
      e.columns.forEach((col: any) => {
        col.operator = 'contains';
      });
  }
}

[Rajapandiyan Settu]

Hi Dave,  

  

We are glad that you have resolved the reported problem at your end. 

Be default, we need to inject the respective feature modules to use the Grid features. Please refer to the below documentation for more information. 

Feature modules: https://ej2.syncfusion.com/documentation/grid/module/ 

You can define the filter operator to a column either by using actionBegin or column property filter. 

Please get back to us if you need further assistance with us.  

  

Regards,  

Rajapandiyan S