How to reduce the filter options from the defaultColDef in ag-grid?

Viewed 73

I am trying to incorporate AG-Grid in my Angular app. I am using the defaultColDef which provides a lot of filter option namely: contains, not contains, starts with, ends with, equals, and not equals. I only need three which are starts with, equals, and contains.

<div *ngIf="tableOption">
  <ag-grid-angular class="ag-theme-alpine" id="ag-grid" 
    [pagination]="true" 
    paginationPageSize=10 
    [rowData]="rowData" 
    domLayout='autoHeight' 
    [columnDefs]="ColumnHeader" 
    [defaultColDef]="defaultColDef" 
    [enableRangeSelection]="true" 
    [rowSelection]="rowSelection" 
    [rowGroupPanelShow]="rowGroupPanelShow" 
    [pivotPanelShow]="pivotPanelShow">
  </ag-grid-angular>
</div>

I tried to set filter options in my component but it is not taking effect.

 public columnTitles = [{
     field: 'importance',
     maxWidth: 120,
     valueGetter: 'node.Importance',
     cellRenderer: 'loadingCellRenderer',
     sortable: true,
     suppressMenu: true,
     filter: 'ImportanceFilter',
     filterParams: {
       filterOptions: ['equals', 'contains', 'startsWith']
     }
   }
   //,...
 ];

 constructor(
   private route: ActivatedRoute,
   private singleUrlService: SingleUrlService,
   private formBuilder: FormBuilder) {
   this.defaultColDef = {
     enableRowGroup: true,
     enablePivot: true,
     enableValue: true,
     sortable: true,
     resizable: true,
     flex: 1,
     minWidth: 150,
     filter: true,
     enableRangeSelection: true,
     pagination: true,
     filterOptions: ['equals', 'contains', 'startWith']
   };
 }
1 Answers

You're setting the filterOptions on the defaultColDef object, whereas you need to set the filterParams on defaultColDef. Try the following:

this.defaultColDef = {
  enableRowGroup: true,
  enablePivot: true,
  enableValue: true,
  sortable: true,
  resizable: true,
  flex: 1,
  minWidth: 150,
  filter: true,
  enableRangeSelection: true,
  pagination: true,
  filterParams: {
      filterOptions: ['equals', 'contains', 'startWith']
    }
};
Related