Eddie
Eddie

Reputation: 1228

ag-grid: Create a filter drop-down on column values?

I'm trying to add a dropdown filter to a column in an ag-grid. I've managed to get the column to display using this code (in an Angular 8 app):

  columnDefs = [
{ headerName: 'Id'              , field: 'id'              , type: 'number' },
{ headerName: 'Message'         , field: 'message'         , type: 'text' },
{ headerName: 'Level'           , field: 'level'           , type: 'text' , width: 90,
  filterParams: {
    filterOptions: [
      'empty',
      {
        displayKey: 'errors',
        displayName: 'Errors',
        test: (cellValue)  => cellValue != null && cellValue === 'Error'
      },
      {
        displayKey: 'info',
        displayName: 'Information',
        test: (cellValue) => cellValue != null && cellValue === 'Information'
      },
      {
        displayKey: 'verbose',
        displayName: 'Verbose',
        test: (cellValue) => cellValue == null && cellValue === 'Verbose'
      },
    ],
    applyButton: true,
    clearButton: true,
    debounceMs: 200,
    suppressAndOrCondition: true
  }
},
{ headerName: 'Source'          , field: 'source'          , type: 'text' , width: 80 }  ];

What this gives me is a dropdown when I click the hamburger menu on the column. But when I select one of the options from above I just get a text field below it where I have to enter text to filter. What I'm trying to do is just select one of the options, for example "Errors", and it automatically filters the grid by that test function. Is that possible? It seems very simple, but I've spent all day reading through documentation and trying different things and nothing seems to work...

Thanks!

Upvotes: 2

Views: 4349

Answers (1)

GreyBeardedGeek
GreyBeardedGeek

Reputation: 30088

According to the documentation at https://www.ag-grid.com/javascript-grid-filter-provided-simple/#customFilterOptions, the 'test' function takes two paramters - the filter value and the cell value.

It also looks like you haven't specified a filter type.

Upvotes: 1

Related Questions