How to implement 'not contains' operator for Grid filtering
We can implement the “not contains” filter operator for string type columns by using the following approach,
Initially, the default string filter operators are defined along with an additional ‘notcontains’ operator and assigned to the filter module’s stringOperator property in the dataBound event.
var stringCustomOperators = [
{ value: 'startsWith', text: 'Starts With' },
{ value: 'endsWith', text: 'Ends With' },
{ value: 'contains', text: 'Contains' },
{ value: 'equal', text: 'Equal' },
{ value: 'notequal', text: 'Not Equal' },
{ value: 'notcontains', text: 'Not Contains' },
];
var initialFlag = true;
// Grid’s dataBound event handler
function onDataBound() {
// This event will be triggered each time the grid data is modified. Here, the flag variable is used so that this case is executed only on Grid initial rendering.
if (initialFlag) {
grid.filterModule.customOperators.stringOperator = stringCustomOperators
initialFlag = false;
}
}
Then, a custom function is defined for the ‘notcontains’ operator by overriding the DataUtil’s fnOperators method of the EJ2 Data module. This will be triggered for comparing each row value of the filtered column along with the typed filter value where the Boolean result can be returned based on the ‘not contains’ comparison action. This is demonstrated in the following code snippet,
// Define custom function for the 'notcontains' action
ej.data.DataUtil.fnOperators.notcontains = function (actual, expected, ignoreCase, ignoreAccent) {
if (ignoreAccent) {
actual = DataUtil.ignoreDiacritics(actual);
expected = DataUtil.ignoreDiacritics(expected);
}
if (ignoreCase) {
return !ej.base.isNullOrUndefined(actual) && !ej.base.isNullOrUndefined(expected) && ej.data.DataUtil.toLowerCase(actual).indexOf(ej.data.DataUtil.toLowerCase(expected)) === -1;
}
return !ej.base.isNullOrUndefined(actual) && !ej.base.isNullOrUndefined(expected) && actual.toString().indexOf(expected) === -1;
};
Using a similar approach, we can create our own custom filter operators for performing the required filtering action.
Output
You can find the samples here:
