Skip to content

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

@jsakamotoIGJP

Description

@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.

image

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?

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions