How to do a custom filtering on the igx-tree Grid

Hi,

I have a scenario where in the tree grid I have a nested grouping of rows up to three levels as shown below.

A

B

C

and inside of the filtering options I have the Value A and when I apply column filtering on the first column with option as A I should be able to filter all of its nested child rows B and C as well.

Thanks,

Mani

Hello Mani,

At this point we do not provide an out of the box option for filtering all of the children of the matching records. What I can suggest for achieving your requirement is using a custom filter strategy. You can do this by setting filterStrategy input of the Tree Grid to your own custom strategy in order to display the matching records and all of their children:

HTML

...

TYPESCRIPT

…
export class TreeGridFormattedFilteringStrategyComponent implements OnInit {
    ...
    public customFilterStrategy = new CustomFilteringStrategy();
    ...
}
...
export class CustomFilteringStrategy extends TreeGridFilteringStrategy {
    public filter(data: ITreeGridRecord[], expressionsTree: IFilteringExpressionsTree,
        advancedExpressionsTree?: IFilteringExpressionsTree, grid?: GridType): ITreeGridRecord[] {
        return this.customFilterImpl(data, expressionsTree, advancedExpressionsTree, undefined, grid);
    }

    private customFilterImpl(data: ITreeGridRecord[], expressionsTree: IFilteringExpressionsTree,
        advancedExpressionsTree: IFilteringExpressionsTree, parent: ITreeGridRecord, grid?: GridType): ITreeGridRecord[] {
        let rec: ITreeGridRecord;
        let recWithAllOfItsChildren: ITreeGridRecord;
        const res: ITreeGridRecord[] = [];
        ...
        for (i = 0; i < data.lenght; i++) {
            ...
            recWithAllOfItsChildren = DataUtil.cloneTreeGridRecord(rec);
            ...
            if (this.matchRecord(rec, expressionsTree, grid) && this.matchRecord(rec, advancedExpressionsTree, grid)) {
                res.push(recWithAllOfItsChildren);
            }
            ...
        }
        return res;
    }
    ...
}

I created a small sample illustrating my suggestion, which you can find here. Please keep in mind that this suggestion is a workaround and it is not fully tested, so it is possible to encounter any edge cases for some scenarios. Please test it on your side and let me know whether you find it helpful.

Please let me know if you have any further questions and concerns.

Regards,
Viktor Kombov
Entry Level Software Developer
Infragistics, Inc.

Dear Viktor,  Row should be deleted instead of disable from the below link. I am using text filter  on Product Name -> doesn't contain -> Foods 

https://stackblitz.com/edit/github-qmenlj?file=src%2Fapp%2Ftree-grid-excel-style-filtering-sample-1%2Ftree-grid-excel-style-filtering-sample-1.component.html