Angular grid filter operator and menu not recognized

Question

My grid isn’t recognizing individual column filter adjustments, either changing the operator or the filterType.

html

[toolbar]='toolbarOptions' [allowGrouping]='true' (queryCellInfo)='queryCellInfo($event)'

[allowExcelExport]='true' (toolbarClick)='toolbarClick($event)' [allowFiltering]='true'

[showColumnChooser]= 'true'

allowTextWrap='true' [textWrapSettings]='wrapSettings' [allowSorting]="true"

[columns]='columns'>

ts

public grid: GridComponent; dataBound() {

Object.assign((this.grid.filterModule as any).filterOperators, { startsWith: 'contains' }); //if I turn this off, everything defaults to equal and it doesn’t respond to individual columns = contains

var grid: GridComponent = this.grid;

public filter: IFilter; //I’ve also tried these as ‘any’

public colfilter: IFilter;

OnInit

this.filter = {

type: 'Menu'

};

this.colfilter= { operator: "equal" },

//I’ve tried setting ‘equal’ two different ways. In the Screen shot, you can see both are contains. And the menu doesn’t show

this.columns = [

{field: 'requirementType',filter:'colfilter',visible:false ,matchCase: false, headerText:'Type', textAlign:'Center', width: 160},

{field: 'threatCategory', operator: 'equal' ,matchCase: false, headerText:'Threat Category', textAlign:'Center',width: 180},

{field: 'isActive', filter:'filter' ,headerText:'In Use', textAlign:'Center',template: this.checkboxCol,editType:'booleanedit',width: 80} ….

So what am I missing?

Thanks

Attachment: FilterBar_beda638d.zip

Sujith Kumar Rajkumar · Answer

Hi Walter, 
 
Greetings from Syncfusion support. 
 
Based on the query we suspect that your requirement is to customize the default filter menu operators for the columns. If so you can achieve it by using the operators property of the filterSettings to define the required filter operators for the column types. This requirement is documented in the below documentation link so please check it for more details, 
 
Documentation: https://ej2.syncfusion.com/angular/documentation/grid/how-to/customizing-filter-menu-operators-list/ 
 
You can also find the list of filter operators available for each column type from the below documentation, 
 
Documentation: https://ej2.syncfusion.com/angular/documentation/grid/filtering/#filter-operators 
 
If we misunderstood your query or if you require any further assistance, then please get back to us. 
 
Regards, 
Sujith R

Walter Cook · Answer

since I can't solve mixing operator types, Trying a different approach. I’ve stripped this all down. I just want one filter bar and one checkbox.If I omit filterSettings, I get a standard two-columns with filter bars, even though I declare filter types in the columns.

public filter: IFilter; public filterBar: IFilter;this.filterOptions = {type: 'Menu'};this.filter = {type: 'CheckBox'}; this.filterBar = {type: 'FilterBar'};If I turn on filterOptions, it gives me a menu and a checkbox. So it’s closer. Here if I set filterOptions = ‘FilterBar’, the checkbox goes away and is just a filterbar.

So I tried overriding the 1st column with a filterbarBut that kicks out an errorthis.type[type] is not a constructor atHow do I mix a filterbar and a checkbox?Attachment: filter_options_b3733005.zip

Walter Cook · Answer

If it can't be done, that takes me back to my original problem.How do I make one of those columns 'equal' and one 'contains' as I can't get that to work either.Thanks!

Sujith Kumar Rajkumar · Answer

Hi Walter, 
 
Based on the query we could understand that you are trying to render filter bar along with filter menu for columns. We would like to let you know that the filter bar is a separate functionality and it cannot be integrated with the menu/checkbox filter. This is the default structure of the Grid’s filter functionality. So you can only combine the Menu, Checkbox and Excel filter types for different columns. 
 
However, if you need to use different operators based on the filtered columns, then you can achieve it by modifying the filter operator for the particular filter column model in the Grid’s actionBegin event handler. 
 
This is demonstrated in the below code snippet, 
 




// Grid’s actionBegin event handler 
onActionBegin(args) { 
    // Check if the required column is getting filtered 
    if (args.requestType === "filtering" && args.currentFilteringColumn === "ShipCountry") { 
        // Filter operator is changed for the required column in the filter columns model 
        args.columns.forEach(col => { 
            if (col.field === "ShipCountry") 
                col.operator = "contains" 
        }) 
    } 
} 
 
We have prepared a sample based on this for your reference. You can find it below, 
 
Sample: https://stackblitz.com/edit/angular-cerdbs?file=app.component.ts 
 
You can also display the available filter operators in the filter bar by enabling the showFilterBarOperator of the Grid’s filterSettings. This case can be checked in the below online demo sample link, 
 
Online demo sample: https://ej2.syncfusion.com/angular/demos/#/material/grid/filtering 
 
API links: https://ej2.syncfusion.com/angular/documentation/api/grid/#actionbegin 
                  https://ej2.syncfusion.com/angular/documentation/api/grid/filterSettingsModel/#showfilterbaroperator 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R

Walter Cook · Answer

that's disappointing I can't mix filterBar and a checkbox but that's just the way it is.

As to having one column equals and one column contains, that seems an awfully complicated way to do that. But ok, I'll give it a go. Thanks!

Walter Cook · Answer

It works, so I'll go with that.Thanks for your support.Good job.

Sujith Kumar Rajkumar · Answer

Hi Walter, 

You’re welcome. We are glad to hear that your query has been resolved. 

Regards, 
Sujith R