-2

I am using ag grid date filter. I want to apply and reset button on the filter. I use the following code to define a column. Its not working

const columnDef = {
    headerName: 'HELLO',
    field: "hello",
    resizable: false,
    cell: [],
    suppressMovable: true,
    filterParams: {
        buttons: ['apply'],
        filterOptions: ['inRange'],
        defaultOption: 'inRange',
        closeOnApply: true,
        //suppressAndOrCondition: true
    },
    sortable: true,
    filter: 'agDateColumnFilter',
    menuTabs: [],
    cellClass: 'aggrid-left-align',
}
Anton Dikarev
  • 335
  • 3
  • 11
biswaranjan maharana
  • 1
  • 1

1 Answers1

0

Date Filters are configured though the filterParams attribute of the column definition. All of the parameters from Provided Filters are available:

Specifies the buttons to be shown in the filter, in the order they should be displayed in. The options are:

  • 'apply': If the Apply button is present, the filter is only applied after the user hits the Apply button.
  • 'clear': The Clear button will clear the (form) details of the filter without removing any active filters on the column.
  • 'reset': The Reset button will clear the details of the filter and any active filters on that column.
  • 'cancel': The Cancel button will discard any changes that have been made to the filter in the UI, restoring the applied model.

In your case you need to add 'reset' value to array of buttons like that

const columnDef = {
    headerName: 'HELLO',
    field: "date",
    resizable: false,
    cell: [],
    suppressMovable: true,
    filterParams: {
        buttons: ['apply', 'reset'],
        filterOptions: ['inRange'],
        defaultOption: 'inRange',
        closeOnApply: true,
        //suppressAndOrCondition: true
    },
    sortable: true,
    filter: 'agDateColumnFilter',
    menuTabs: [],
    cellClass: 'aggrid-left-align',
}
Anton Dikarev
  • 335
  • 3
  • 11