Articles in this section
Category / Section

How to implement 'not contains' operator for Grid filtering

2 mins read

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

Filter 'not contains' operator

 

You can find the samples here:

JavaScript (ES5) sample

Angular sample

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied