Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
385
How to do a custom filtering on the igx-tree Grid
posted

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

  • 640
    Offline posted

    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

    <igx-tree-grid [data]="data primaryKey="ID" foreignKey="ParentID"
       [filterStrategy]="customFilterStrategy"
    >
    ...
    </igx-grid>
    

    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.