We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to implement 'not contains' operator for Grid filtering

Platform: JavaScript - EJ 2 |
Control: Grid

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

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile