[Inquiry] How can I limit the number of filter items on the igx-grid component?

[jsakamotoIGJP]

Inquiry

I am trying to restrict the number of filter items on the igx-grid. For example, let's consider the scenario that we need to limit it to only one filter item.

I have managed to apply the first filter item by utilizing JavaScript code to cancel filtering in the "filtering" event handler.

  public onFiltering(event: IFilteringEventArgs) {

    // This function returns the number of filter items in the filtering expressions tree.
    const getNumberOfFilterItems = (exprs: (IFilteringExpressionsTree | IFilteringExpression)[]) => {
      let n = 0;
      for (const expr of exprs) {
        if (expr.hasOwnProperty("filteringOperands")) n += getNumberOfFilterItems((expr as IFilteringExpressionsTree).filteringOperands);
        else n++;
      }
      return n;
    };

    const numOfFilterItems = getNumberOfFilterItems(event.filteringExpressions.filteringOperands);
    if (numOfFilterItems >= 2) event.cancel = true; // 👈 Cancel filtering if the number of filter items exceeds or equals 2!
  }

However, the 2nd or later filter items are still visible on the filtering UI, even though they are not functional.

Is there any way to hide these 2nd or later filter items? I understand that you may be occupied, but could someone provide me with a helpful hint?

• Sample code: 📦igx-grid-app.zip

[jsakamotoIGJP]

I know well the team is so busy, but is it possible for somebody to suggest any answers or hints to me by the end of this week, May 5th?
I'm really sorry to bother you, but I'd like to know if there is a possibility to limit the number of filter items or not, at least. I don't need a complete solution. If somebody gives me only a hint, such as some APIs of the igx-grid component that would be useful for this scenario, I'll try to resolve the above requirement by myself.

In case we can't achieve the requirement above at the current version of Ignite UI for Angular, I can accept that conclusion. I want to make a decision by the end of this week.

@kdinev, is it possible to coordinate to assign somebody to this inquiry?
Thank you for your help in advance.

[ddaribo]

Hi @jsakamotoIGJP,

It appears that by default canceling the filtering event does not clear the filter row of the newly added expressions’ UI elements – the filtering operator button and the filtering chip. Moreover, there is not a built-in property in the grid to restrict the number of filtering conditions that can be applied.

What I can suggest is the workaround solution demonstrated in this StackBlitz sample. It involves removing the last filtering expression item of the corresponding filtering row when the filtering conditions per column number is exceeded.

  if (n > MAX_FILTERS_NUMBER_PER_COLUMN) {
      event.cancel = true;
      event.owner.filteringRow.expressionsList.pop();
    }

This prevents the above mentioned UI elements from appearing at all.
Please, note that such an approach, including the method to retrieving the number of filtering conditions from the provided code-snippet, will handle the scenario on a per-column basis, not for the entire grid.

Finally, I believe that such a restriction might be slightly confusing to the user, as at least a visual indication of the present constraint has to be included. If you were to share the considerations behind this requirement, maybe we could give alternative suggestions to achieve the target scenario.

[jsakamotoIGJP]

Hi @ddaribo,
Thank you for the great answer! I'll adopt that code snippets to my project. And yes, I agree with your warning. I should handle this requirement so carefully. I'll keep it in my mind.

I'll close this issue now because I could get enough ideas to resolve the root issue on my side. I'll reopen this issue if I get stuck again, but I'm not worried about it for now.

Again, thank you so much for responding to this issue, even though the team members must be busy!

[ddaribo]

Hi @jsakamotoIGJP,
You’re welcome and thank you for following up!

I wanted to also share this alternative approach I implemented after investigating the scenario further. It involves disabling the filtering row input once the allowed filters count is exceeded. It might be less confusing to the user and comes with the benefit of taking into account the filter conditions count on all grid columns, not only a single one.

However, as you will observe, the approach is heavy on the application side, as it involves a lot of element querying, handling some events manually, etc. As a workaround solution, which is not fully tested, it should be carefully verified against all possible interactions.
Having this in mind, we might be investigating whether this scenario could be somehow assisted by a potential enhancement in the IgxGrid API related to filtering, as it is currently not supported out of the box and merely canceling the ‘filtering’ event is not sufficient. Meanwhile, I hope the suggested approaches help.

[jsakamotoIGJP]

Thank you, @ddaribo, so many times! That's fantastic work! I don't have enough words to explain my appreciation.

I believe I've understood what you want to pay attention me in the above post. I could understand that it is just a workaround, which might include some performance considerations and unexpected behavior. I'll take a look at your sample code and apply it to my solution carefully.

Thank you so much!