How to filter with multiple condition text input in Ag-Grid? - ag-grid

Question

Using ag-grid-enterprise v5.4.0
create multiple textFilter input ex: [CONTAINS] filterText AND [NOT CONTAIN] filterText2 just like Excel data analysis
but both filterType2 and filterText are undefined after click [APPLY FILTER]
https://embed.plnkr.co/4nAjGKmChqJiRcqz6E2n/

Answer 1

I believe what you are trying to do would be best achieved with the Filter Component. This allows you full control of the filter pain, whether you are in enterprise or not. Here are the required methods for each custom filter:
function CustomFilter() {}
CustomFilter.prototype.init = function (params) {
//Put any initial functions you need here (such as setting values to null)
};
CustomFilter.prototype.getGui = function () {
//return a string of HTML or a DOM element/node
};
CustomFilter.prototype.doesFilterPass = function (params) {
//Logic for your custom Filter
//return True if the row should display, false otherwise
};
CustomFilter.prototype.isFilterActive = function () {
//logic for displaying the filter icon in the header
};
CustomFilter.prototype.getModel = function() {
//store the filter state
};
CustomFilter.prototype.setModel = function(model) {
//restore the filter state here
};
Here is an example of how to implement an "Includes x but Excludes y" filter:
function DoubleFilter() {
}
DoubleFilter.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
DoubleFilter.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>' +
'Include: <div><input style="margin: 4px 0px 4px 0px;" type="text" id="includesText" placeholder="Includes..."/></div>' +
'Exclude: <div><input style="margin: 4px 0px 4px 0px;" type="text" id="excludesText" placeholder="Excludes..."/></div>' +
'</div>';
// add listeners to both text fields
this.eIncludesText = this.gui.querySelector('#includesText');
this.eIncludesText.addEventListener("changed", listener);
this.eIncludesText.addEventListener("paste", listener);
this.eIncludesText.addEventListener("input", listener);
// IE doesn't fire changed for special keys (eg delete, backspace), so need to
// listen for this further ones
this.eIncludesText.addEventListener("keydown", listener);
this.eIncludesText.addEventListener("keyup", listener);
this.eExcludesText = this.gui.querySelector('#excludesText');
this.eExcludesText.addEventListener("changed", listener2);
this.eExcludesText.addEventListener("paste", listener2);
this.eExcludesText.addEventListener("input", listener2);
// IE doesn't fire changed for special keys (eg delete, backspace), so need to
// listen for this further ones
this.eExcludesText.addEventListener("keydown", listener2);
this.eExcludesText.addEventListener("keyup", listener2);
var that = this;
function listener(event) {
that.includesText = event.target.value;
params.filterChangedCallback();
}
function listener2(event) {
that.excludesText = event.target.value;
params.filterChangedCallback();
}
};
DoubleFilter.prototype.getGui = function () {
return this.gui;
};
DoubleFilter.prototype.doesFilterPass = function (params) {
var passed = true;
var valueGetter = this.valueGetter;
var include = this.includesText;
var exclude = this.excludesText;
var value = valueGetter(params).toString().toLowerCase();
return value.indexOf(include) >= 0 && (value.indexOf(exclude) < 0 || exclude == '') ;
};
DoubleFilter.prototype.isFilterActive = function () {
return (this.includesText !== null && this.includesText !== undefined && this.includesText !== '')
|| (this.excludesText !== null && this.excludesText !== undefined && this.excludesText !== '');
};
DoubleFilter.prototype.getModel = function() {
var model = {
includes: this.includesText.value,
excludes: this.excludesText.value
};
return model;
};
DoubleFilter.prototype.setModel = function(model) {
this.eIncludesText.value = model.includes;
this.eExcludesText.value = model.excludes;
};
Here is a modified plunker. I placed the filter just on the Athlete column, but the DoubleFilter can be applied to any column once it is created.
EDIT:
I realized you were asking for a rather generic double filter in your question with "Includes and Excludes" as an example. Here is a plunker that has a more generic double filter.

Answer 2

ag-Grid now supports this behavior, by default, in version 18.0.0.
https://www.ag-grid.com/ag-grid-changelog/?fixVersion=18.0.0