Ag-grid custom filter and server side filter, type is undefined

user_772893 0
Viewed 1197

According with this website: enter link description here

I build custom filter, but I want to have it as filter server side. When request is set to the server I have columnName from custom filter, but I don't have type:

 function whereSql(request) {
    debugger;
    var whereParts = [];
    var filterModel = request.filterModel;

    if (filterModel) {
      Object.keys(filterModel).forEach(function (key) {
        debugger;
        var item = filterModel[key];

In this line var item = filterModel[key]; key is undefined, I can see only column name on which my TxtCustomFilter is used. But type is undefined.

server side custom filter empty filter type

My custom filter looks like:

function TxtCustomFilter() {
}

TxtCustomFilter.prototype.init = function (params) {
  this.valueGetter = params.valueGetter;

  this.setupGui(params);
};

// not called by ag-Grid, just for us to help setup
TxtCustomFilter.prototype.setupGui = function (params) {
  this.gui = document.createElement('div');
  this.gui.innerHTML =
    '<div style="padding: 4px; width: 200px;">' +
  //  '<div style="font-weight: bold;">Custom Athlete Filter</div>' +
      '<div><input style="margin: 4px 0px 4px 0px;" type="text" id="filterText" placeholder="Full name search..."/></div>' +

...

this.filterText = this.gui.querySelector('#filterText');
  this.filterText.addEventListener("changed", listener);
  this.filterText.addEventListener("paste", listener);
  this.filterText.addEventListener("input", listener);

var that = this;

  function listener(event) {
    debugger;
   // that.filterText = event.target.value;
    params.filterChangedCallback();
  }
ag-grid-angular ag-grid angular
1 Answers

The interface for filter(inbuilt ones) have below structure

// text filter uses this filter model
interface TextFilterModel {
    // always 'text' for text filter
    filterType: string;

    // one of the filter options, e.g. 'equals'
    type: string;

    // the text value associated with the filter.
    // it's optional as custom filters may not
    // have a text value
    filter?: string;
}


// number filter uses this filter model
interface NumberFilterModel {
    // always 'number' for number filter
    filterType: string;

    // one of the filter options, e.g. 'equals'
    type: string;

    // the number value(s) associated with the filter.
    // custom filters can have no values (hence both are optional).
    // range filter has two values (from and to).
    filter?: number;
    filterTo?: number;
}

... same applies to other inbuilt filters.

as you can see Ag-Grid defines the filtertype as property. which type of filter is rendered is identified by column config provided by the user.

The filterType is not used by the grid when you call setFilterModel(). It is provided for information purposes only when you get the filter model. This is useful if you are doing server-side filtering, where the filter type may be used in building back-end queries.

now lets come to your question. you are defining a custom filter so its your responsibility to define the filtertype property on your own as AG-Grid is not involved in custom filter component.

TxtCustomFilter.prototype.init = function(params) {
    this.valueGetter = params.valueGetter;
    this.filterText = null;
    this.filterType = 'custom' // define your fitlertype property
    this.setupGui(params);
};
TxtCustomFilter.prototype.getModel = function() {
    return { value: this.filterText.value,
    filtertype : this.filterType };
};

Here is a simple demo which shows how to implement and use it.

user_82335480
Related