ag-grid custom filter options for date filter in angular2

Question

Currently i'm using below way to assign new options to assigned date column field. But it's not getting displayed in grid.

let dateValues = ["equals", "inRange","quarter1","quarter2","quarter3","quarter4"];

{
    headerName: "Assigned Date",
    field: "assignedDate",              
    filter: "date",
    filterParams: {apply: true, newRowsAction: 'keep'},
    sort: 'desc',
    filterOptions: this.dateValues
 }

And looking for some pointers how can i set predefined date values for quater1,quater2,quater3 & quarter4 when use selects that option in drop down filter. I have gone through the ag-grid filters section, i don't find any option to customize this.

Any help is appreciated.

Shubham Tiwari Shubham Tiwari · Accepted Answer · 2018-05-08T00:45:26

This is certainly not the way to do it as you have done. Instead use it like this:

{
    headerName: "Assigned Date",
    field: "assignedDate",              
    filter: "date",
    filterParams: {apply: true, newRowsAction: 'keep'},
    sort: 'desc',
    filter: DropDownFilter
 }

function DropDownFilter() {
}

DropDownFilter.prototype.init = function (params) {
    this.valueGetter = params.valueGetter;
    this.filterText = null;
    this.setupGui(params);
};

// not called by ag-Grid, just for us to help setup
DropDownFilter.prototype.setupGui = function (params) {
    this.gui = document.createElement('div');
    this.gui.innerHTML =
        '<select><option value="equals">equals</option><option value="inRange">inRange</option></select>';

    this.eFilterText = this.gui.querySelector('#filterText');
    this.eFilterText.addEventListener("changed", listener); 
    var that = this;
    function listener(event) {
        that.filterText = event.target.value;
        params.filterChangedCallback();
    }
};

DropDownFilter.prototype.getGui = function () {
    return this.gui;
};
DropDownFilter.prototype.isFilterActive = function () {
    return this.filterText !== null && this.filterText !== undefined && this.filterText !== '';
};

DropDownFilter.prototype.getModel = function() {
    var model = {value: this.filterText.value};
    return model;
};

DropDownFilter.prototype.doesFilterPass = function (params) {
    return params.data.value === this.filterText.value;
}
DropDownFilter.prototype.setModel = function(model) {
    this.eFilterText.value = model.value;
};

Reference: agGrid Filter

ag-grid custom filter options for date filter in angular2

2 Answers