Apply Multiple Filters to One Column in IgxGrid

I am trying to apply multiple filters on one column for the Igx grid but I’m not able to find a solution.

I’ve looked at the FilteringExpressionsTree and tried using that but it seems that it only applies one filter at a time for a given column.

Example:

sort	column1	column2
1
1
2
2
3
3

After filtering out value ‘1’ from ‘sort’ column it should look like this:

sort	column1	column2
2
2
3
3

And then after filtering out value ‘2’ in ‘sort’ column it should look like this:

sort	column1	column2
3
3

And then if the user wants to see all rows with ‘sort’ value ‘2’ again it should look like this:

sort	column1	column2
2
2
3
3

Is there a way to do this? I’ve been trying to use FilteringExpressionsTree but that doesn’t seem to work

Hello,

Have you checked our advanced filtering feature with which you will be able to achieve your requirement? More information and samples can be found on our website here:

https://ko.infragistics.com/products/ignite-ui-angular/angular/components/grid/advanced_filtering.html

Please let me know if this approach does not work in your scenario.

Sincerely,
Tihomir Tonev
Associate Software Developer
Infragistics

Hi,

Yes I have tried that.

In this case when I want to filter out val '1' it would be:

const tree = new FilteringExpressionsTree(FilteringLogic.And);

    tree.filteringOperands.push({

        fieldName: 'Sort',

        condition: IgxNumberFilteringOperand.instance().condition('isNotEqual'),

        searchVal: 1

    });
this.grid.advancedFilteringExpressionsTree = tree;

So now we should get:

sort	column1	column2
2
2
3
3

And then when I want to filter out value '2' as well as value 1 at the same time it would be:

this.grid.advancedFilteringExpressionsTree.filteringOperands.push({

      fieldName: 'Sort',

      condition: IgxNumberFilteringOperand.instance().condition('isNotEqual'),

      searchVal: 2

    });

Which should result in:

sort	column1	column2
3
3

Is this the correct implementation?

Hello,

In case you want to do this with code, you can do it with both filter types. They both end up assigning a filteringExpressionsTree. However, you will need to assign a new tree rather than modifying it in order to update.

I have prepared a sample for you. The sample loads with Product Name already filtered with Value "Queso", and I have added a button to further filter this column.

Please check the sample and let me know if you have any further questions.

https://stackblitz.com/edit/github-cwjufy-iwz6ce?file=src%2Fapp%2Fgrid%2Fgrid-advanced-filtering-sample%2Fgrid-advanced-filtering-sample.component.ts

Sincerely,

Tihomir Tonev
Associate Software Developer
Infragistics

I see. But if I want to get rid of one of the filtering trees, how would I do that?

In your example, if I wanted to get rid of this condition:

const productExpression = {

        condition: IgxStringFilteringOperand.instance().condition("contains"),

        fieldName: "ProductName",

        ignoreCase: true,

        searchVal: "Queso"

      };

But keep the second condition only after applying both condititons:

const productExpressions2 = {

        condition: IgxStringFilteringOperand.instance().condition("contains"),

        fieldName: "ProductName",

        ignoreCase: true,

        searchVal: "Cabrales"

      }

how would I do that?

Would I have to clear all conditions and apply only the ones I want to see?

Hello,

In order to remove one of the filters, you can get the grid's filtering expressions tree, and check in the filteringOperands array for a condition you want to remove. 

Alternatively, you can remove all filters and apply new ones if that's your goal.

I have updated the sample to remove the second condition applied. You can check it here:

https://stackblitz.com/edit/github-cwjufy-iwz6ce?file=src%2Fapp%2Fgrid%2Fgrid-advanced-filtering-sample%2Fgrid-advanced-filtering-sample.component.ts

Should you have further questions, please let me know.

Sincerely,

Tihomir Tonev
Associate Software Developer
Infragistics