Grid filtering custom operator - unexpected behaviour

[Iryna]

For certain types of data in my grid, I need to define custom filter operators, e.g.:

updateOrAddFilter(fieldKey, {
    field: fieldKey, operator: function (item) {
        const nItem = normalize(item);
        const nValue = normalize(value);

        return nItem && nItem.includes(nValue);
    }
});

The updateOrAddFilter function then browses through the all the filters currently applied to the grid's dataSource, replaces old current-column filters with the new one and keeps all the other-column ones, and updates the grid's dataSource as such:

grid.dataSource.filter({ logic: "and", filters: updatedFilters });

The problem is that - it doesn't work! The updateOrAddFilter function works exactly as expected until I try to combine the custom operator filter with others.

Why is this happening? How can I fix it? Thanks in advance.

[Martin]

Hello, Iryna,

Would it be possible to provide a runnable Dojo example with the Grid configuration and the custom logic for the filters? I will then be able to investigate on my side, and hopefully provide further details on the matter.

Thank you in advance for the cooperation. Looking forward to your reply.

Regards,
Martin
Progress Telerik

[Iryna]

Hi Martin,

Thanks for your reply, please find the runnable Dojo example here. I've reduced the code to a minimum, so that you still get an idea of how my logic works and what the problem is, but don't have to deal with functionality irrelevant to the given problem.

To get an idea of the problem, do the following:

1. Try filtering just by the Name column - works as should.
2. Try filtering just by the City column - works as should.
3. Now try filtering first by City and then by Name - the Name filter does nothing, although the updateOrAddFilter function calls grid.dataSource.filter with the correct array of filters.

I've tried every way to solve this problem that I could come up with... I will be very grateful if you could help me out. Thanks in advance.

[Martin]

Hello, Iryna,

As far as I understand the requirement, you wish to customize the UI in the filtering popups. We have built-in options that would allow you to achieve it much easier. For the name column, you can use the filterable.ui function, and for the City column - filterable.multi. Here you will the modified version of your example. Let me know if it works as expected.

[Iryna]

Hello Martin,

Thank you for your response - I'm aware of the filterable.iu customisation method, however, I do need to keep the logic the way it is in my initial example. There are multiple types of filters where I need to use the custom operator the way I did in my implementation of the multiple checkbox filter menu - that was just an example.

I would therefore be grateful if you could help me solve the issue described above, not suggest a completely different solution. Thanks :)

[Martin]

Please refer to the modified Dojo example. There was a missing value parameter when calling the updateOrAddFilter function:

updateOrAddFilter(fieldKey, {
                  field: fieldKey, value: value, operator: function (item) {
                      const nItem = normalize(item);
                      const nValue = normalize(value);
      
                      return nItem && nItem.includes(nValue);
                  }
              });

[Iryna]

Unfortunately, this is not working as expected either. The reason why I want to use a custom operator is so that i can normalize both values, and check if nItem CONTAINS nValue (e.g. searching "tere" should return two values - Terezie and Terézie). Adding the value parameter somehow breaks this logic, and searching "tere" does not return any entries.

[Martin]

I reviewed the matter together with a developer colleague. When using custom ui for the filter, the operator would always be "equal to", and at this point the requirement cannot be achieved. You can open a new feature request in our Feedback Portal so that we can track the demand towards it, and consider implementing it in the future.